D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
etachov
Full window
Github gist
d3 glitch clouds
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Conditional Styling</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; } svg { background-color: white; } path { stroke:gray; stroke-width: 2; stroke-opacity: .7; } .axis path, .axis line { fill: none; stroke: black; stroke-width: 0; shape-rendering: crispEdges; } </style> </head> <body> <script type="text/javascript"> var w = 800; var h = 500; var padding = [ 20, 80, 50, 30]; //Top, right, bottom, left var dateFormat = d3.time.format("%Y"); var xScale = d3.time.scale() .range([padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.score); }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("polStaWide.csv", function(data) { var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]; var dataset = []; for (var i = 0; i < data.length; i++) { dataset[i] = { country: data[i].country, stability: [] }; for (var j = 0; j < years.length; j++ ) { if(data[i][years[j]]) { dataset[i].stability.push({ year: years[j], score: data[i][years[j]] }); } } } xScale.domain([ d3.min(years, function(d){ return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.stability, function(d) { return +d.score; }); }), d3.min(dataset, function(d) { return d3.min(d.stability, function(d) { return +d.score; }); }) ]); var groups = svg.selectAll("g") .data(dataset) .enter() .append("g") groups.selectAll("path") .data(function(d) { return [ d.stability ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("stroke-width", 2); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js