D3 Examples - Modern Lib. 100

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
    body {
        font-family: "Roboto", serif;
        font-size: 9px;
        width: 960px;
        margin: 40px auto;
        color: #333;
    }
​
    h1 {
        color: #650000;
        font-size: 28px;
    }
    h3 {
        color: #650000;
        font-size: 12px;
    }
​
    svg {
    }
    .container {
        margin-bottom: 12px;
    }
    .block {
        margin-bottom: 3px;
        display: inline-block;
        vertical-align: middle;
    }
    .about {
        width: 600px;
        line-height: 2;
        font-size: 11px;
    }
    .legendContainer {
        margin-top: 36px;
    }
    .w180 {
        width: 180px;
        display: inline-block;
    }
    .w600 {
        width: 567px;
        padding-left: 28px;
        display: inline-block;
    }
​
    .authorBlock {
        width: 180px;
    }
    .authorName {
        font-size: 15px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
    }
    .authorYears {
        color: #888;
        margin-left: 3px;
    }
    .asia {
        color: #266538;
    }
    .europe {
        color: #146b89;
    }
    .northamerica {
        color: #820c22;
    }
    .southamerica {
        color: #b15a9f;
    }
​
    .dashLine {
        stroke: #bbb;
        stroke-width: 1px;
        stroke-dasharray: 5,5;
    }
    .timelineLegend {
        fill: #888;
        text-anchor: left;
    }
    .timelineBaseline {
        stroke: #888;
        stroke-width: 1px;
    }
    .timelineActive {
        fill: #897553;
        opacity: 0.33;
    }
    .timelineStart {
        fill: #888;
    }
    .timelineEnd {
        fill: #eeeae1;
        stroke: #888;
        stroke-width: 1px;
    }
    .sublabel {
        fill: #888;
    }
    .bookCircleLabel {
        text-anchor: middle;
    }
​
    .booksBlock {
        width: 180px;
    }
​
    .book {
        margin-right: 2px;
        line-height: 1.5;
        display: inline-block;
        color: #888;
    }
    .book:after {
        content: ",";
    }
    .book:last-of-type:after {
        content: "";
    }
    .book0 {
        fill: #7a419f;
    }
    .book1 {
        fill: #de57a3;
    }
    .book2 {
        fill: #ea7c2d;
    }
    .book3 {
        fill: #e4c90a;
    }
​
    .legendCircle {
        width: 7px;
        height: 7px;
        margin-right: 5px;
    }
​
    .d1 {
        display: none;
    }
​
</style>
​
<body>
<h1>Modern Library's<br>100 Best Novels and Authors</h1>
<p class="about">In 1998, the Modern Library, an American Publishing house, published a list of the 100 best novels of the twentieth century. In 2013, Accurat visualized the creative output of the authors of these novels. The below graphic visualizes this same data, including information about the author's origin, lifespan, and creative output, as well the name, year, and author's age for each novel on the list.</p>
<div class="legendContainer">
    <h3 class="w180">Author</h3>
    <h3 class="w600">Timeline</h3>
    <h3 class="w180">Works, Chronological Order</h3>
</div>
<div class="mainContainer"></div>
</body>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
​
<script type="text/javascript">
​
var margin = {top: 10, right: 30, bottom: 10, left: 30};
​
var width = 600 - margin.left - margin.right,
        height = 40 - margin.top - margin.bottom;
​
var xScale = d3.scale.linear()
        .range([0,width]);
​
d3.tsv("books_authors.tsv", ready);
​
function ready(error, data) {
    if (error) return console.warn(error);
​
    function capitalizeEachWord(str) {
    return str.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
    };
​
    data.forEach( function (d) {
        d.AGE_BOOK = +d.AGE_BOOK;
        d.AGE_FIRST_NOVEL = +d.AGE_FIRST_NOVEL;
        d.BORN = +d.BORN;
        d.DIED = +d.DIED;
        d.DIFF = +d.DIFF;
        d.EDITORS_WIKI = +d.EDITORS_WIKI;
        d.FIRST_NOVEL = +d.FIRST_NOVEL;
        d.LIFESPAN = +d.LIFESPAN;
        d.RANKING = +d.RANKING;
        d.WIKIPEDIA_VIEWS = +d.WIKIPEDIA_VIEWS;
        d.YEAR_BOOK = +d.YEAR_BOOK;
        d.NATION = capitalizeEachWord(d.NATION);
        d.ACTIVE_SPAN = d.LIFESPAN - d.AGE_FIRST_NOVEL;
    });
​
    data.sort( function (a,b) { return a.AGE_BOOK - b.AGE_BOOK; });
​
    var xLifespan = data.map( function (d) { return d.LIFESPAN; });
    var xMax = d3.max(xLifespan);
    //console.log(xMax);
​
    var nestedData = d3.nest()
      .key(function(d) { return d.AUTHOR; })
      .entries(data);
​
    nestedData.forEach( function (d) {
        d.BORN = +d.values[0].BORN;
        d.DIED = +d.values[0].DIED;
        d.AGE_FIRST_NOVEL = +d.values[0].AGE_FIRST_NOVEL;
        d.LIFESPAN = +d.values[0].LIFESPAN;
        d.CONTINENT_CLASS = d.values[0].CONTINENT.replace(" ","");
        d.NATION = capitalizeEachWord(d.values[0].NATION);
        d.ACTIVE_SPAN = +d.values[0].LIFESPAN - +d.values[0].AGE_FIRST_NOVEL;
    });
​
    nestedData.sort( function (a,b) { return a.LIFESPAN - b.LIFESPAN; });
​
    // for all values within each object in nestedData
    // sort a,b a-b
​
    var container = d3.select("body").select("div.mainContainer").selectAll("div.container")
        .data(nestedData)
        .enter()
        .append("div")
        .attr("class", function (d) { return "container " + d.key; });
​
    // build containers
    var authorContainer = d3.selectAll("div.container");
    authorContainer.append("div").attr("class", "authorBlock block");
    authorContainer.append("div").attr("class", "timelineBlock block");
    authorContainer.append("div").attr("class", "booksBlock block");
​
    // add author information
    var authorBlockInfo = d3.selectAll("div.authorBlock");
    authorBlockInfo.append("div")
        .attr("class", "authorName")
        .text( function (d) { return d.key; });
    authorBlockInfo.append("span")
        .attr("class", function (d) { return "authorCountry " + d.CONTINENT_CLASS; })
        .text( function (d) { return d.NATION; });
    authorBlockInfo.append("span")
        .attr("class", "authorYears")
        .text( function (d) { return d.BORN + "—" + d.DIED; });
​
    // add timeline
    var timelineBlockInfo = authorContainer.select("div.timelineBlock");
    timelineBlockInfo.append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    xScale.domain([0,xMax]);
​
    var rectHeight = 5;
    var bookRadius = 5;
​
    var timelineDraw = timelineBlockInfo.selectAll("g")
        .append('g');
    timelineDraw.append("line")
        .attr("class", "dashLine")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", height/2)
        .attr("y2", height/2);
    timelineDraw.append("line")
        .attr("class", "timelineBaseline")
        .attr("x1", 0)
        .attr("x2", function (d) { return xScale(d.LIFESPAN); })
        .attr("y1", height/2)
        .attr("y2", height/2);
    timelineDraw.append("rect")
        .attr("class", "timelineActive")
        .attr("width", function (d) { return xScale(d.ACTIVE_SPAN); })
        .attr("height", rectHeight)
        .attr("x", function (d) { return xScale(d.LIFESPAN - d.ACTIVE_SPAN); })
        .attr("y", height/2-rectHeight/2);
    timelineDraw.append("circle")
        .attr("class", "timelineStart")
        .attr("r", rectHeight/2)
        .attr("cx", function (d) { return xScale(d.AGE_FIRST_NOVEL); })
        .attr("cy", height/2);
    timelineDraw.append("circle")
        .attr("class", "timelineEnd")
        .attr("r", rectHeight/2)
        .attr("cx", function (d) { return xScale(d.LIFESPAN); })
        .attr("cy", height/2);
    timelineDraw.append("text")
        .attr("text-anchor", "middle")
        .attr("class", "sublabel")
        .attr("dy", height/2-bookRadius-5)
        .attr("dx", function (d) { return xScale(d.AGE_FIRST_NOVEL); })
        .text( function (d) { return d.AGE_FIRST_NOVEL; });
    timelineDraw.append("text")
        .attr("text-anchor", "middle")
        .attr("class", "sublabel")
        .attr("dy", height/2-bookRadius-5)
        .attr("dx", function (d) { return xScale(d.LIFESPAN); })
        .text( function (d) { return d.LIFESPAN; });
    timelineDraw.selectAll(".bookCircleGhost")
        .data( function (d) { return d.values; })
        .enter()
        .append("circle")
        .attr("class", function (d, i) { return "bookCircleGhost book" + i; })
        .attr("r", bookRadius*3)
        .style("opacity", 0.25)
        .attr("cy", height/2)
        .attr("cx", function (d) { return xScale(d.AGE_BOOK); });
    timelineDraw.selectAll(".bookCircle")
        .data( function (d) { return d.values; })
        .enter()
        .append("circle")
        .attr("class", function (d, i) { return "bookCircle book" + i; })
        .attr("r", bookRadius)
        .attr("cy", height/2)
        .attr("cx", function (d) { return xScale(d.AGE_BOOK); })
    timelineDraw.selectAll(".bookCircleLabel")
        .data( function (d) { return d.values; })
        .enter()
        .append("text")
        .attr("class", function (d) { return "bookAge d" + d.DIFF;})
        .attr("text-anchor", "middle")
        .attr("dy", height/2+bookRadius+10)
        .attr("dx", function (d) { return xScale(d.AGE_BOOK); })
        .text( function (d) { return d.AGE_BOOK; });
​
    // add books
    var booksBlockInfo = authorContainer.select("div.booksBlock");
    var eachBookInfo = booksBlockInfo.selectAll(".book")
        .data( function (d) { return d.values; })
        .enter()
        .append("div");
    var booksBlockSVG = eachBookInfo.append('svg')
        .attr("class", "legendCircle");
    booksBlockSVG.append("circle")
        .attr("class", function (d, i) { return "book" + i; })
        .attr("r", 3.5)
        .attr("cx", 3.5)
        .attr("cy", 3.5);
    eachBookInfo.append("span")
        .attr("class", "book")
        .text( function (d) { return d.BOOK; });
​
    // add legend
    var legendTimeline = d3.select('div.West div.timelineBlock svg g g');
    legendTimeline.append("text")
        .attr("class", "timelineLegend")
        .attr("dy", height/2+bookRadius+10)
        .attr("dx", 0)
        .style('fill', '#333')
        .text("Age at Release");
    legendTimeline.append("text")
        .attr("class", "timelineLegend")
        .attr("dy", height/2-bookRadius-5)
        .attr("dx", 0)
        .text("Age First Published, Died");
​
};
​
​
</script>
    