Skip to content

Instantly share code, notes, and snippets.

@JimShady

JimShady/index.html

Last active February 23, 2016 16:27
Download ZIP

Revisions

  1. JimShady revised this gist Feb 23, 2016. 1 changed file with 0 additions and 45080 deletions.
    45,080 changes: 0 additions & 45,080 deletions no2.csv
    View file
    0 additions, 45,080 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  2. JimShady revised this gist Feb 23, 2016. 1 changed file with 10 additions and 9 deletions.
    19 changes: 10 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -107,15 +107,16 @@ <h3></h3>
    // On click, update with new data
    d3.select("h4")
    .on("click", function() {
    var numValues = dataset.length; // Get original dataset's length
    var maxRange = Math.random() * 1000; // Get max range of new values
    dataset = []; // Initialize empty array
    for(var i=0; i<numValues; i++) {
    var newNumber1 = Math.floor(Math.random() * maxRange); // Random int for x
    var newNumber2 = Math.floor(Math.random() * maxRange); // Random int for y
    dataset.push([newNumber1, newNumber2]); // Add new numbers to array
    }


    var dataset = [[15.37,25.71],
    [38.37,25.71],
    [5.68,34.88],
    [54.79,34.88],
    [109.79,34.88],
    [10.79,34.88],
    [17.65,30.47],
    [17.65,30.47]]; // Initialize empty array

    // Update scale domains
    xScale.domain([0, d3.max(dataset, function(d) {
    return d[0]; })]);
  3. JimShady revised this gist Feb 23, 2016. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,14 +33,15 @@ <h3></h3>
    <script type="text/javascript">

    // Setup data
    var dataset = []; // Initialize empty array
    var numDataPoints = 15; // Number of dummy data points
    var maxRange = Math.random() * 1000; // Max range of new values
    for(var i=0; i<numDataPoints; i++) {
    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
    }
    var dataset = [[9.37,25.71],
    [9.37,25.71],
    [26.68,34.88],
    [11.79,34.88],
    [11.79,34.88],
    [11.79,34.88],
    [17.65,30.47],
    [17.65,30.47]]; // Initialize empty array


    // Setup settings for graphic
    var canvas_width = 500;
  4. JimShady revised this gist Feb 23, 2016. 1 changed file with 45080 additions and 0 deletions.
    45,080 changes: 45,080 additions & 0 deletions no2.csv
    View file
    45,080 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  5. JimShady created this gist Feb 23, 2016.
    167 changes: 167 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@

    <!DOCTYPE html>
    <html>
    <head>
    <!-- Load D3 from site -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>

    <!-- CSS (Styling) -->
    <style type="text/css">
    /* Format X and Y Axis */
    .axis path,
    .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
    }

    .axis text {
    font-family: sans-serif;
    font-size: 11px;
    }
    </style>
    <!-- End CSS (Styling) -->

    <body>
    <h2>D3 Scatterplot </h2>
    <p>This is a data visualization using transitions with a scatterplot</p>
    <h4>Click on this text to update chart with new values</h4>
    <h3></h3>

    <!-- Begin D3 Javascript -->
    <script type="text/javascript">

    // Setup data
    var dataset = []; // Initialize empty array
    var numDataPoints = 15; // Number of dummy data points
    var maxRange = Math.random() * 1000; // Max range of new values
    for(var i=0; i<numDataPoints; i++) {
    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
    }

    // Setup settings for graphic
    var canvas_width = 500;
    var canvas_height = 300;
    var padding = 30; // for chart edges

    // Create scale functions
    var xScale = d3.scale.linear() // xScale is width of graphic
    .domain([0, d3.max(dataset, function(d) {
    return d[0]; // input domain
    })])
    .range([padding, canvas_width - padding * 2]); // output range

    var yScale = d3.scale.linear() // yScale is height of graphic
    .domain([0, d3.max(dataset, function(d) {
    return d[1]; // input domain
    })])
    .range([canvas_height - padding, padding]); // remember y starts on top going down so we flip

    // 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("h3") // This is where we put our vis
    .append("svg")
    .attr("width", canvas_width)
    .attr("height", canvas_height)

    // Create Circles
    svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle") // Add circle svg
    .attr("cx", function(d) {
    return xScale(d[0]); // Circle's X
    })
    .attr("cy", function(d) { // Circle's Y
    return yScale(d[1]);
    })
    .attr("r", 2); // radius

    // Add to X axis
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (canvas_height - padding) +")")
    .call(xAxis);

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

    // On click, update with new data
    d3.select("h4")
    .on("click", function() {
    var numValues = dataset.length; // Get original dataset's length
    var maxRange = Math.random() * 1000; // Get max range of new values
    dataset = []; // Initialize empty array
    for(var i=0; i<numValues; i++) {
    var newNumber1 = Math.floor(Math.random() * maxRange); // Random int for x
    var newNumber2 = Math.floor(Math.random() * maxRange); // Random int for y
    dataset.push([newNumber1, newNumber2]); // Add new numbers 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 circles
    svg.selectAll("circle")
    .data(dataset) // Update with new data
    .transition() // Transition from old to new
    .duration(1000) // Length of animation
    .each("start", function() { // Start animation
    d3.select(this) // 'this' means the current element
    .attr("fill", "red") // Change color
    .attr("r", 5); // Change size
    })
    .delay(function(d, i) {
    return i / dataset.length * 500; // Dynamic delay (i.e. each item delays a little longer)
    })
    //.ease("linear") // Transition easing - default 'variable' (i.e. has acceleration), also: 'circle', 'elastic', 'bounce', 'linear'
    .attr("cx", function(d) {
    return xScale(d[0]); // Circle's X
    })
    .attr("cy", function(d) {
    return yScale(d[1]); // Circle's Y
    })
    .each("end", function() { // End animation
    d3.select(this) // 'this' means the current element
    .transition()
    .duration(500)
    .attr("fill", "black") // Change color
    .attr("r", 2); // Change radius
    });

    // Update X Axis
    svg.select(".x.axis")
    .transition()
    .duration(1000)
    .call(xAxis);

    // Update Y Axis
    svg.select(".y.axis")
    .transition()
    .duration(100)
    .call(yAxis);
    });

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