D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
CJKraenzle
Full window
Github gist
Practice - d3-array statistics
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <!-- Data array called "gdp" is in data.js (GDP in $millions) --> <script src="data.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // Using blocks to continue to learn about d3v4 // Following d3 documentation // https://github.com/d3/d3/blob/master/API.md#arrays-d3-array var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500); // d3.min svg.append("text") .text("d3.min: " + d3.min(gdp, function(d) { return d.gdp;})) .attr("y", 40) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.max svg.append("text") .text("d3.max: " + d3.max(gdp, function(d) { return d.gdp;})) .attr("y", 60) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.extent svg.append("text") .text("d3.extent: " + d3.extent(gdp, function(d) { return d.gdp;})) .attr("y", 80) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.sum svg.append("text") .text("d3.sum: " + d3.sum(gdp, function(d) { return d.gdp;})) .attr("y", 100) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.mean svg.append("text") .text("d3.mean: " + d3.mean(gdp, function(d) { return d.gdp;})) .attr("y", 120) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.median svg.append("text") .text("d3.median: " + d3.median(gdp, function(d) { return d.gdp;})) .attr("y", 140) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // Need to provide a sorted array of numbers gdp.sort(function(a,b) { return parseFloat(a.gdp) - parseFloat(b.gdp); }) // d3.quantile svg.append("text") .text("d3.quantile (25th): " + d3.quantile(gdp, .25, function(d) { return d.gdp;})) .attr("y", 160) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.quantile svg.append("text") .text("d3.quantile (50th): " + d3.quantile(gdp, .50, function(d) { return d.gdp;})) .attr("y", 180) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.quantile svg.append("text") .text("d3.quantile (75th): " + d3.quantile(gdp, .75, function(d) { return d.gdp;})) .attr("y", 200) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.variance svg.append("text") .text("d3.variance: " + d3.variance(gdp, function(d) { return d.gdp;})) .attr("y", 220) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") // d3.deviation svg.append("text") .text("d3.deviation: " + d3.deviation(gdp, function(d) { return d.gdp;})) .attr("y", 240) .attr("x", 10) .attr("font-size", 16) .attr("font-family", "monospace") </script> </body>
https://d3js.org/d3.v4.min.js