OnlineDataVizSolution2

by Kate Mokhova

CSS

path, line {
    fill: none;
    stroke: #999;
    shape-rendering: crispEdges;
}

JavaScript

var margin = {top: 8, right: 80, bottom: 32, left: 40}

var width = 500 - margin.left - margin.right
var height = 400 - margin.top - margin.bottom

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 x = d3.scale.linear()
    .range([0, width])

var y = d3.scale.linear()
    .range([height, 0])

var r = d3.scale.linear()
    .range([3, 10])

d3.csv('http://d3-js.ru/data/gapminder-extended.csv', function (country) {
    country.gdp = Number(country.gdp)
    country.life = Number(country.life)
    country.population = Number(country.population)
    country.kids = Number(country.kids)
    return country
}, function (countries) {
    x.domain(d3.extent(countries, function (d) { return d.kids }))
    y.domain(d3.extent(countries, function (d) { return d.life }))
    r.domain(d3.extent(countries, function (d) { return d.population }))
    
    svg.append('g')
        .attr('transform', 'translate(0,' + (height + 10) + ')')
        .call(d3.svg.axis()
            .scale(x)
            .orient('bottom'))
    
    svg.append('g')
        .attr('transform', 'translate(' + (-10) + ',0)')
        .call(d3.svg.axis()
            .scale(y)
            .orient('left'))
   
    var g = svg.selectAll('g.point')
        .data(countries)
        .enter()
        .append('g')
        .attr('class', 'point')
    
    g.append('circle')
        .attr('r', function (d) { return r(d.population) })
        .attr('fill', function (d) { return d.color })
        .attr('cx', function (d) { return x(d.kids) })
        .attr('cy', function (d) { return y(d.life) })
        
    g.append('text')
        .attr('dx', 10)
        .attr('dy', 5)
        .text(function (d) { return d.country })
        .attr('x', function (d) { return x(d.kids) })
        .attr('y', function (d) { return y(d.life) })
   ...