Skip to content

Instantly share code, notes, and snippets.

@levinalex

levinalex/index.html

Forked from njvack/LICENSE
Last active December 16, 2015 11:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save levinalex/5427026 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save levinalex/5427026 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. levinalex revised this gist Apr 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@
    .append("svg:circle")
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; })
    .attr('r', 20);
    .attr('r', 200);

    paths.selectAll("path")
    .data(d3.geom.voronoi(vertices))
  2. levinalex revised this gist Apr 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,7 +63,7 @@
    .attr("id", function(d, i) {
    return "point-"+i; })
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2)
    .attr("r", 5)
    .attr('stroke', 'none');

    </script>
  3. @njvack njvack revised this gist Nov 29, 2011. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,7 @@

    <html>
    <head>
    <script type="text/javascript" src="d3.js"> </script>
    <script type="text/javascript" src="d3.geom.js"> </script>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    </head>
    <body>
    <div id="chart">
  4. @njvack njvack created this gist Nov 29, 2011.
    73 changes: 73 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@

    <html>
    <head>
    <script type="text/javascript" src="d3.js"> </script>
    <script type="text/javascript" src="d3.geom.js"> </script>

    </head>
    <body>
    <div id="chart">
    </div>
    <script type="text/javascript">
    var w = 960,
    h = 500;

    var vertices = d3.range(100).map(function(d) {
    return [Math.random() * w, Math.random() * h];
    });

    var svg = d3.select("#chart")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h);
    var paths, points, clips;
    clips = svg.append("svg:g").attr("id", "point-clips");
    points = svg.append("svg:g").attr("id", "points");
    paths = svg.append("svg:g").attr("id", "point-paths");

    clips.selectAll("clipPath")
    .data(vertices)
    .enter().append("svg:clipPath")
    .attr("id", function(d, i) { return "clip-"+i;})
    .append("svg:circle")
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; })
    .attr('r', 20);

    paths.selectAll("path")
    .data(d3.geom.voronoi(vertices))
    .enter().append("svg:path")
    .attr("d", function(d) { return "M" + d.join(",") + "Z"; })
    .attr("id", function(d,i) {
    return "path-"+i; })
    .attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
    .style("fill", d3.rgb(230, 230, 230))
    .style('fill-opacity', 0.4)
    .style("stroke", d3.rgb(200,200,200));

    paths.selectAll("path")
    .on("mouseover", function(d, i) {
    d3.select(this)
    .style('fill', d3.rgb(31, 120, 180));
    svg.select('circle#point-'+i)
    .style('fill', d3.rgb(31, 120, 180))
    })
    .on("mouseout", function(d, i) {
    d3.select(this)
    .style("fill", d3.rgb(230, 230, 230));
    svg.select('circle#point-'+i)
    .style('fill', 'black')
    });

    points.selectAll("circle")
    .data(vertices)
    .enter().append("svg:circle")
    .attr("id", function(d, i) {
    return "point-"+i; })
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2)
    .attr('stroke', 'none');

    </script>
    </body>
    </html>