D3 Examples - BabyNames NZ - Remix of http://open.mashblock.co.nz/nz-baby-names/

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
    <title>Baby Names NZ</title>
    <style>
        body, html {
            margin: 0, padding: 0;
        }
​
        app {
            font-family: Roboto;
        }
​
        vis > div {
            display: inline-block;
            position: relative;
            top: 0;
            bottom: 0;
            vertical-align: top;
            margin-right: 24px;
        }
​
        .headers .background {
            fill: #657D8B;
            fill-opacity: 0.2;
        }
        
        .headers text {
            font-size: 16px;
            font-weight: 500;
        }
    
        .headers .subtext {
            font-size: 12px;
        }
​
        .row .odd {
            fill: #E7EBEE;
            fill-opacity: 0.2;
        }
    
        .row .even {
            fill: #C4CFD4;
            fill-opacity: 0.2;
        }
​
        /* column 1 : Name */
​
        .row .name {
            font-size: 15px;
        }
​
        /* column 2 : name popularity distribution */
        path.gridline {
            stroke: #FFFFFF;
            stroke-width: 1;
            fill: none;
        }
​
        .density {
            stroke-width: 1;
            stroke: #d7098c;
            fill: #d7098c;
            stroke-opacity: 0.2;
            fill-opacity: 0.5;
        }
​
        .boy .density  {
            stroke: #005dac;
            fill: #005dac;
        }   
​
        /* column 3 : rank history */
​
        path.sparkline {
            stroke: #d7098c;
            stroke-width: 1;
            stroke-opacity: 0.8;
            fill: none;
        }
        
        .boy path.sparkline  {
            stroke: #005dac;
        }
    
    </style>
</head>
<body>
<app>
    <h1>Popularity of Baby Names in New Zealand</h1>
    <p><a href="https://gist.github.com/widged/7226863">Gist</a> by <a href="https://twitter.com/widged">@widged</a>. Remix of <a href="https://github.com/Mashblock/baby-names">mashblock</a>.</p>
    <vis>
        <div id="boys" class="boy"></div>
        <div id="girls" class="girl"></div>
    </vis>
</app>
<script>
​
d3.csv("boys.csv", function(data) {
    var d = parseData(data);
    var div = document.getElementById('boys');
    render(div, d.dataset, d.config.rankMaximum);
});
d3.csv("girls.csv", function(data) {
    var d = parseData(data);
    var div = document.getElementById('girls');
    render(div, d.dataset, d.config.rankMaximum);
});
​
var Dict = {};
(function(Class) {
​
    Class.instance = function() {
        var instance = {}, keys = [], items = [];
​
        instance.getOrAdd = function(k) {
            var idx = keys.indexOf(k);
            if(idx === -1) { 
                idx = keys.length; keys.push(k); 
                items[idx] = {k: k};
            } 
            return items[idx];
        };
​
        instance.list = function() {
            return items;
        };
        return instance;
    };
​
}(Dict));
​
​
function parseData(data) {
​
    var nameDict = Dict.instance(), nMax = 0, rMax = 0; yearList = [];
    data.forEach(function(item) {
        var name = nameDict.getOrAdd(item.name);
        if(!name.hasOwnProperty("d")) { name.d = []; }
        var n = parseInt(item.number, 10);
        if(nMax < n) { nMax = n; }
        var r = parseInt(item.rank, 10);
        if(rMax < r) { rMax = r; }
        var y = parseInt(item.year);
        if(yearList.indexOf(y) === -1) { yearList.push(y); }
        name.d.push(item);
    });
​
    var dataset = nameDict.list();
    dataset.sort(function(a,b) { 
        return a.k < b.k ? -1 : +1; 
    });
    return {dataset: dataset, config: {rankMaximum: rMax}};
​
}
​
​
function babyNames(config) {
    var lineHeight = config.lineHeight;
    return function(nodes) {
        nodes.append("svg:text")
            .style("text-anchor", "left")
            .attr("x", 0).attr("y", lineHeight - 8)
            .attr("class", "name")
            .text(function(d, i) { return "" + d.k;  });
​
    };
}
​
function nameRankVariations(config) {
​
    var DOT_WIDTH = 6, lineHeight = config.lineHeight;
​
    return function(nodes) {
        var  xDensity = function(v) { return ((v / 660) * 200); };
​
        [0,100,200,300,400,500,600,700].forEach(function(tick) {
            nodes
                .append("svg:path")
                .attr("d", "M"+xDensity(tick)+",0L"+xDensity(tick)+", " + lineHeight)
                .attr("class","gridline");
        });
​
        var density = nodes
            .selectAll("g").data(function(d) { return d.d; })
            .enter()
            .append("svg:circle")
            .attr("class", "density")
            .attr("r", DOT_WIDTH)
            .attr("cy", 11)
            .attr("cx", function(d) { return xDensity(d.number); });
​
         yearList.sort();
    };
​
}
​
function nameRankHistory(config) {
    var rankMaximum = config.rankMaximum, 
        lineHeight = config.lineHeight;
​
​
    return function(nodes) {
​
        var rankLine = d3.svg.line()
            .x(function(d, i) { return i * 4; })
            .y(d3.scale.linear().domain([0, rankMaximum]).range([2, lineHeight-4]));
​
        var sparkline = nodes
            .selectAll("g")
                .data(function(d) {
                    var yearMap = {};
                    d.d.forEach(function(item) {
                        yearMap[item.year] = item.rank;
                    });
                    var yearData = yearList.map(function(y) {
                        return yearMap[y] || rankMaximum+1;
                    });
                    return [yearData]; 
                })
                .enter()
                .append("svg:g")
                .attr("transform", "translate("+ [24,0].join(',') +")");
​
        sparkline.append("svg:path")
            .attr("d", function(d) {  return rankLine(d); })
            .attr("class", "sparkline");        
​
    };
}
    
function render(node, dataset, rankMaximum) {
​
    var LINE_HEIGHT = 24;
    var width = 500, height = (dataset.length * LINE_HEIGHT) + 40;
​
    var svg = d3.select(node).append("svg")
        .attr("width", width)
        .attr("height", height);
​
    var columns = [
        {
            header: {text: 'Names'}, 
            itemRenderer: babyNames({lineHeight: LINE_HEIGHT}),
            left: 5
        },
        {
            header: {text: 'Rank Variations', subtext: '(gridline every 100)'}, 
            itemRenderer: nameRankVariations({lineHeight: LINE_HEIGHT}),
            left: 120,
        },
        {
            header: {text: 'Rank over years', subtext: '(from 1999 to 2012)'},  
            itemRenderer: nameRankHistory({rankMaximum: rankMaximum,lineHeight: LINE_HEIGHT}),
            left: 380
        }
    ];
​
​
    var headers  = svg.append("g")
        .attr("class", 'headers')
        .attr("transform", function(d, i) { return "translate("+0+"," + 0 +")"; } );
​
    headers.append("svg:rect")
        .attr("width", width)
        .attr("height", 40)
        .attr("class", 'background');
​
    var body = svg.append("g")
        .attr("transform", function(d, i) { return "translate("+0+"," + 40 +")"; } );
​
    var rows =  body.selectAll("g.row")
        .data(dataset)
        .enter()
        .append("svg:g")
        .attr("class", "row")
        .attr("transform", function(d, i) { return "translate("+0+"," + (i * LINE_HEIGHT) +")"; } );
​
    // decoration for odd and event rows
    rows
        .append("svg:rect")
        .attr("width", width)
        .attr("height", LINE_HEIGHT-2)
        .attr("class", function(d, i) { return i % 2 === 0 ? "odd": "even"; });
​
​
    columns.forEach(function(col) {
        var header = col.header, left = col.left, itemRenderer = col.itemRenderer;
        var group = headers.append("svg:g");
​
        if(header.text) {
            group
                .append("text")
                .text(header.text)
                .attr("class", "text")
                .attr("transform", function(d, i) { return "translate("+ left+"," + 16 +")"; } );
        }
        if(header.subtext) {
            group
                .append("text")
                .text(header.subtext)
                .attr("class", "subtext")
                .attr("transform", function(d, i) { return "translate("+ left+"," + 30 +")"; } );
        }
​
        var items = rows
            .append("svg:g")
            .attr("transform", function(d, i) { return "translate("+ left+"," + 0 +")"; } );
        itemRenderer(items, {lineHeight: LINE_HEIGHT, rankMaximum: rankMaximum});
​
    });
​
}
​
​
</script>
</body>
</html>
​
    