D3 Examples - slavery

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='lodash.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
  <style>
        svg {
          width: 960px;
          height: 500px;
          border: solid 1px #ccc;
          font: 10px sans-serif;
          shape-rendering: crispEdges;
        }
    </style>
</head>
<body>
    <script type='text/javascript'>
​
    var w = 960;
    var h = 500;
    var p = [20, 50, 30, 20];
    var x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]);
    var y = d3.scale.linear().range([0, h - p[0] - p[2]]);
    var z = d3.scale.ordinal().range(['lightpink', 'darkgray', 'lightblue']);
    var dateParse= d3.time.format('%Y').parse;
    var format = d3.time.format('%b');
​
    var svg = d3.select('body').append('svg:svg')
        .attr({
            width: w,
            height: h
        })
        .append('svg:g')
            .attr({
                transform: 'translate(' + p[3] + ',' + (h - p[2]) + ')'
            });
​
    d3.csv('slavery.csv', function(slavery) {
        // Transpose the data into layers by cause.
        var causes = d3.layout.stack()([
            'spain',
            'portugal',
            'great_britian',
            'netherlands',
            'usa',
            'france',
            'denmark_baltics'
        ].map(function(cause) {
            return slavery.map(function(d) {
                // clean up data. Some of the data has numbers like "2,412" so we have to remove the commas (any non-numerical character)
                return {
                    // parse date
                    x: dateParse(d.year), 
                    // ensure it's a string, replace any non numerical 
                    // character, then get the value (+ operator) (note: could
                    // also use parseInt((code) , 10)
                    y: +(('' + d[cause]).replace(/[^0-9]/g,''))
                };
                });
            }
        ));
​
        // Compute the x-domain (by date) and y-domain (by top).
        x.domain(causes[0].map(function(d) { return d.x; }));
        y.domain([0, d3.max(causes[causes.length - 1], function(d) { 
            return d.y0 + d.y; 
        })]);
​
        // Add a group for each cause.
        var cause = svg.selectAll('g.cause')
          .data(causes)
        .enter().append('svg:g')
          .attr('class', 'cause')
          .style('fill', function(d, i) { return z(i); })
          .style('stroke', function(d, i) { return d3.rgb(z(i)).darker(); });
​
        // Add a rect for each date.
        var rect = cause.selectAll('rect')
          .data(Object)
        .enter().append('svg:rect')
          .attr('x', function(d) { return x(d.x); })
          .attr('y', function(d) { return -y(d.y0) - y(d.y); })
          .attr('height', function(d) { return y(d.y); })
          .attr('width', x.rangeBand());
​
        // Add a label per date.
        var label = svg.selectAll('text')
          .data(x.domain())
        .enter().append('svg:text')
          .attr('x', function(d) { return x(d) + x.rangeBand() / 2; })
          .attr('y', 6)
          .attr('text-anchor', 'middle')
          .attr('dy', '.71em')
          .text(format);
​
        // Add y-axis rules.
        var rule = svg.selectAll('g.rule')
          .data(y.ticks(5))
        .enter().append('svg:g')
          .attr('class', 'rule')
          .attr('transform', function(d) { return 'translate(0,' + -y(d) + ')'; });
​
        rule.append('svg:line')
          .attr('x2', w - p[1] - p[3])
          .style('stroke', function(d) { return d ? '#fff' : '#000'; })
          .style('stroke-opacity', function(d) { return d ? .7 : null; });
​
        rule.append('svg:text')
          .attr('x', w - p[1] - p[3] + 6)
          .attr('dy', '.35em')
          .text(d3.format(',d'));
​
        console.log('up');
        });
    </script>
</body>
</html>
​
    