D3 Examples - d3 glitch clouds

xxxxxxxxxx
 
<!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>
​
​
​
​
​
​
​
​
​
​
​
​
​
​
    