Last active
July 6, 2018 23:19
-
-
Save rlbarter/9fb335430468cb6a3605dce1b71427ef to your computer and use it in GitHub Desktop.
Points and lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| text { | |
| font-size: 14px; | |
| font-family: avenir; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {top: 20, right: 10, bottom: 20, left: 10}; | |
| var width = 990 - margin.left - margin.right, | |
| height = 1000 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var scaleData = d3.scaleLinear() | |
| .domain([0, 1000]) | |
| .range([margin.left, width - margin.right]); | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| // Add theta at top | |
| var y_theta = 10; | |
| var x_theta = width / 2; | |
| svg.selectAll("text") | |
| .data(["θ"]) .enter() | |
| .append("text") | |
| .attr("x", scaleData(x_theta)) | |
| .attr("y", y_theta) | |
| .attr("fill", "black") | |
| .attr("text-anchor", "middle") | |
| .html(function(d) { return d; }) | |
| .style("font-size", "34px"); | |
| runSimulation = function(add_delay, fade, iteration) { | |
| // define the random data | |
| var data = d3.range(10).map(function() { | |
| return 1000 * Math.random(); | |
| }); | |
| // Add the lines from theta down to randomized positions | |
| var y_data_layer = 200; | |
| var lines = svg.selectAll("firstline") | |
| .data(data) | |
| .enter() | |
| .append("line") | |
| .attr("x1", scaleData(x_theta)) | |
| .attr("y1", y_theta + 10) | |
| .attr("x2", scaleData(x_theta)) | |
| .attr("y2", y_theta + 10) | |
| .attr("stroke", color(iteration)) | |
| .transition() | |
| .duration(1000) | |
| .delay(function(d, i) { return add_delay + i * 100}) | |
| .attr("x2", function(d) { return scaleData(d); }) | |
| .attr("y2", y_data_layer) | |
| .attr("stroke-width", 2) | |
| .attr("opacity", 1); | |
| // define new lines originating at data | |
| var lines2 = svg.selectAll("secondline") | |
| .data(data) | |
| .enter() | |
| .append("line") | |
| .attr("x1", function(d) { return scaleData(d); }) | |
| .attr("y1", y_data_layer) | |
| .attr("y2", y_data_layer) | |
| .attr("x2", function(d) { return scaleData(d); }) | |
| .attr("stroke", color(iteration)) | |
| .transition() | |
| .delay(2000 + add_delay) | |
| .duration(1000) | |
| .attr("y2", y_data_layer * 2) | |
| .attr("x2", scaleData(d3.mean(data))) | |
| .attr("stroke-width", 2) | |
| .attr("opacity", 1); | |
| // Make circles to appear after first lines have transitioned | |
| var circleborder = svg.selectAll("datacircle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 0) | |
| .attr("cx", function(d) { return scaleData(d); }) | |
| .attr("cy", y_data_layer) | |
| .attr("fill", "white") | |
| .transition() | |
| .delay(function(d, i) { return add_delay + i * 100 + 800; }) | |
| .duration(200) | |
| .attr("r", 13); | |
| var circles = svg.selectAll("datacircle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 0) | |
| .attr("cx", function(d) { return scaleData(d); }) | |
| .attr("cy", y_data_layer) | |
| .attr("fill", color(iteration)) | |
| .transition() | |
| .delay(function(d, i) { return add_delay + i * 100 + 800; }) | |
| .duration(200) | |
| .attr("r", 10) | |
| .attr("opacity", 1); | |
| // Add function summary at the bottom | |
| var y_fun = y_data_layer * 2; | |
| textfun = svg.selectAll("newtext") | |
| .data(["f(x)"]) .enter() | |
| .append("text") | |
| .attr("x", scaleData(d3.mean(data))) | |
| .attr("y", y_fun + 40) | |
| .attr("fill", color(iteration)) | |
| .attr("text-anchor", "middle") | |
| .attr("opacity", 0) | |
| .html(function(d) { return d; }) | |
| .style("font-size", "34px") | |
| .transition() | |
| .delay(3000 + add_delay) | |
| .attr("opacity", 1); | |
| if (fade) { | |
| // grey out first run | |
| lines.transition() | |
| .delay(function(d, i) { return 5000 - i * 100 - 100; }) | |
| .duration(1000) | |
| .attr("opacity", 0.1) | |
| .attr("stroke-width", 0.5); | |
| circles.transition() | |
| .delay(function(d, i) { return 5000 - i * 100 - 100; }) | |
| .duration(1000) | |
| .attr("opacity", 0.1); | |
| lines2.transition() | |
| .delay(3000 - 100) | |
| .duration(1000) | |
| .attr("opacity", 0.1) | |
| .attr("stroke-width", 0.5); | |
| textfun.transition() | |
| .delay(2500) | |
| .duration(1000) | |
| .attr("opacity", 0.3); | |
| }; | |
| }; | |
| var iterations = [0, 1, 2, 3, 4]; | |
| for (i in iterations) { | |
| runSimulation(i * 6000, true, i); | |
| }; | |
| runSimulation(iterations.length * 6000, false, i + 1); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment