D3 Examples - Modern Lib. 100 — Scatter Plot Sketches

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
    body {
        font-family: arial, sans;
        font-size: 9px;
        width: 960px;
        margin: 40px auto;
    }
​
    svg {
        border: 1px solid #f0f;
    }
​
  .axis path {
        display: none;
    }
    .yAxis .tick line {
        stroke: #ddd;
    }
    .xAxis .tick line {
        stroke: #ddd;
    }
​
</style>
​
<body>
<h1>Author and Book Data Comparisons</h1>
</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: 40, right: 40, bottom: 40, left: 40};
​
var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
var xScale = d3.scale.linear()
        .range([0,width]);
​
var yScale = d3.scale.linear()
        .range([height,0]);
​
d3.tsv("books_authors.tsv", ready);
​
function ready(error, data) {
    if (error) return console.warn(error);
​
    console.log(data);
​
    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.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;
​
    });
​
    function letsGraph(xData, yData) {
​
        var svg = d3.select("body").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 + ")");
​
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .tickSize(-height)
            .tickPadding(2)
            .tickFormat(d3.round)
            // important for year formatting
            .orient("bottom");
​
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .tickSize(-width)
            .tickPadding(2)
            .tickFormat(d3.round)
            .orient("right");
​
        xScale.domain(d3.extent(data, function(d) { return d[xData]; }));
        yScale.domain(d3.extent(data, function(d) { return d[yData]; }));
​
        svg.append("g")
            .attr("class", "axis xAxis")
            .attr("transform", "translate(0," + height +")")
            .call(xAxis);
        svg.append("g")
            .attr("class", "axis yAxis")
            .attr("transform", "translate(" + width +",0)")
            .call(yAxis);
​
        var circleGroup = svg.selectAll(".circleGroup")
            .data(data)
            .enter()
            .append("g")
            .attr("class", ".circleGroup")
            .attr("transform", function (d) { return "translate(" + xScale(d[xData]) + "," + yScale(d[yData]) + ")"; })
            .attr("title", function (d) { return d.BOOK; });
​
        circleGroup.append("circle")
            .attr("r", 5);
​
        svg.append("text")
            .attr("transform", "translate(4,10)")
            .text( function (d) { return xData + " v. " + yData; });
​
    };
​
    letsGraph("RANKING", "YEAR_BOOK");
    letsGraph("RANKING", "AGE_BOOK");
    letsGraph("RANKING", "LIFESPAN");
    letsGraph("RANKING", "EDITORS_WIKI");
    letsGraph("RANKING", "WIKIPEDIA_VIEWS");
    letsGraph("EDITORS_WIKI", "YEAR_BOOK");
    letsGraph("EDITORS_WIKI", "AGE_BOOK");
    letsGraph("EDITORS_WIKI", "LIFESPAN");
    letsGraph("WIKIPEDIA_VIEWS", "YEAR_BOOK");
    letsGraph("WIKIPEDIA_VIEWS", "AGE_BOOK");
    letsGraph("WIKIPEDIA_VIEWS", "LIFESPAN");
​
};
​
​
</script>
    