Skip to content

Instantly share code, notes, and snippets.

@jonsafari

jonsafari/index.html

Last active August 29, 2015 14:16
Download ZIP

Revisions

  1. jonsafari revised this gist Feb 24, 2015. 2 changed files with 7946 additions and 0 deletions.
    7,946 changes: 7,946 additions & 0 deletions news.2013.hi.shuffled.cc_min-200_n-120_freqs.json
    View file
    7,946 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. jonsafari created this gist Feb 24, 2015.
    126 changes: 126 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,126 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <!-- Derived from https://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html -->
    <style>

    .node {
    cursor: pointer;
    }

    .node:hover {
    stroke: #66c;
    stroke-width: 1.5px;
    }

    .node--leaf {
    fill: white;
    }

    .label {
    font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-anchor: middle;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }

    .label,
    .node--root,
    .node--leaf {
    pointer-events: none;
    }

    h1,h5 {
    font-family: "Avantgarde", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: darkblue;
    }


    </style>
    <body>
    <h1>Hindi Word Clusters</h1>
    <h5><small>Made using <a href="https://github.com/jonsafari/clustercat">ClusterCat</a></small></h5>
    <h5><small><b>Click</b> to zoom in/out</small></h5>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = 20,
    diameter = 960;

    var color = d3.scale.linear()
    .domain([-1, 5])
    //.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
    //.range(["hsl(152,60%,99%)", "hsl(228,30%,40%)"])
    .range(["hsl(037,96%,80%)", "hsl(037,96%,20%)"])
    .interpolate(d3.interpolateHcl);

    var pack = d3.layout.pack()
    .padding(2)
    .size([diameter - margin, diameter - margin])
    .value(function(d) { return d.size; })

    var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

    d3.json("news.2013.hi.shuffled.cc_min-200_n-120_freqs.json", function(error, root) {
    if (error) return console.error(error);

    var focus = root,
    nodes = pack.nodes(root),
    view;

    var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
    .style("fill", function(d) { return d.children ? color(d.depth) : null; })
    .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

    var text = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("class", "label")
    .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
    .style("display", function(d) { return d.parent === root ? null : "none"; })
    .text(function(d) { return d.name; });

    var node = svg.selectAll("circle,text");

    d3.select("body")
    .style("background", color(-1))
    .on("click", function() { zoom(root); });

    zoomTo([root.x, root.y, root.r * 2 + margin]);

    function zoom(d) {
    var focus0 = focus; focus = d;

    var transition = d3.transition()
    .duration(d3.event.altKey ? 7500 : 750)
    .tween("zoom", function(d) {
    var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
    return function(t) { zoomTo(i(t)); };
    });

    transition.selectAll("text")
    .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
    .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
    }

    function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });
    }
    });

    d3.select(self.frameElement).style("height", diameter + "px");

    </script>

    <small><small>Uses <a href="http://d3js.org">D3</a></small></small> &nbsp; &nbsp;
    <small><small><a href="news.2013.hi.shuffled.cc_min-200_n-120_freqs.json">Download json data</a></small></small>
    </body>