Skip to content

Instantly share code, notes, and snippets.

@jonahx

jonahx/index.html

Last active December 16, 2015 08:48
Download ZIP

Revisions

  1. jonahx renamed this gist May 26, 2013. 1 changed file with 0 additions and 0 deletions.
    0 d3sample.html → index.html
    View file
    File renamed without changes.
  2. jonahx renamed this gist May 26, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → d3sample.html
    View file
    File renamed without changes.
  3. jonahx created this gist Apr 17, 2013.
    156 changes: 156 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,156 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>yguyghggjkgh</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

    .axis path,
    .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
    }

    .axis text {
    font-family: sans-serif;
    font-size: 11px;
    }

    </style>
    </head>
    <body>

    <div>
    <input type="text" id="count" name="howmany">
    <input type="button" id="drawbtn" value="draw">
    </div>


    <script type="text/javascript">

    //Width and height
    var w = 500;
    var h = 300;
    var padding = 30;

    //Dynamic, random dataset
    var dataset = []; //Initialize empty array
    var numDataPoints = 50;
    console.log("so we are here.")
    var maxRange = Math.random() * 1000; //Max range of new values
    for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times
    var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
    var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
    dataset.push([newNumber1, newNumber2]); //Add new number to array
    }

    //Create scale functions
    var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

    var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

    //Define X axis
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

    //Define Y axis
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

    //Create SVG element
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

    //Create circles
    svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
    return xScale(d[0]);
    })
    .attr("cy", function(d) {
    return yScale(d[1]);
    })
    .attr("r", 2);

    //Create X axis
    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

    //Create Y axis
    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);


    //On click, update with new data
    d3.select("#drawbtn")
    .on("click", function() {
    //New values for dataset
    var numValues = parseInt(document.getElementById('count').value, 10);
    console.log(numValues);
    var maxRange = Math.random() * 1000;
    dataset = []; //Initialize empty array
    for (var i = 0; i < numValues; i++) { //Loop numValues times
    var newNumber1 = Math.floor(Math.random() * maxRange); //New random integer
    var newNumber2 = Math.floor(Math.random() * maxRange); //New random integer
    dataset.push([newNumber1, newNumber2]); //Add new number to array
    }

    //Update scale domains
    xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
    yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);

    //Update all circles
    svg.selectAll("circle")
    .data(dataset)
    .transition()
    .duration(1000)
    .attr("cx", function(d) {
    return xScale(d[0]);
    })
    .attr("cy", function(d) {
    return yScale(d[1]);
    });

    //Enter new circles
    svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
    return xScale(d[0]);
    })
    .attr("cy", function(d) {
    return yScale(d[1]);
    })
    .attr("r", 2);

    // Remove old
    svg.selectAll("circle")
    .data(dataset)
    .exit()
    .remove()

    });


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