D3OG

All examples By author By category About

jaimeps

Full window Github gist

Project 3

Visualization bl.ocks link: /jaimeps/0ba238bd74c5c7e0876ab65c518efcfb/example/

Datasets:

Data scraped from Google Trends: Searches of "Zika virus" by country
Parsed in Python

Resources:

Inspired by: The spread of Zika virus: A rounduop of visualizations
World geojson obtained from [Github - Johan] (https://github.com/johan/world.geo.json)
Adapted code from an unofficial Google Trends API - Pytrends

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
    <script src="https://d3js.org/d3-queue.v2.min.js"></script>
    <style>
        body, html {
            width: 1300px;
            height: 100%;
            font: 16px Arial;
        }

svg {
            width:35%;
            height:64%;
            float: left;
            border:1px solid darkblue;
        }

circle.airbnb {
            fill: #710606;
            opacity: 0.6;
        }

.axis {
            font-family: arial;
            font-size: 0.7em;
        }

text {
            fill: black;
            stroke: none;
        }

.title {
            fill: black;
            font: 16px Arial;
            font-weight: bold;
        }

.footnote{
            fill: black;
            stroke: none;
            font-size: 10px;
        }

.label {
            font-size: 1.5em;
        }

path {
            fill: none;
            stroke: black;
            stroke-width: 2px;
        }
        .tick {
            fill: none;
            stroke: black;
        }

circle {
            opacity: 0.9;
            stroke: none;
            fill: #710606;
        }

.line {
            fill: none;
            stroke: #4374DE;
            stroke-width: 2px;
        }
    </style>

// important: First argument it expects is error
            if (error) throw error;

/*
             D3.js setup code
             */
            var margin = {top: 150, right: 50, bottom: 50, left: 50},
                    width = 350 - margin.left,
                    height = 400 - margin.top;

var margin2 = 50,
                    width2 = 420 - margin2,
                    height2 = 420 - margin2;

var format = d3.time.format("%m/%d/%Y");

// create a projection properly scaled for SF
            var projection = d3.geo.mercator();

// create a path to draw the neighborhoods
            var path = d3.geo.path()
                    .projection(projection);

// create and append the map of SF neighborhoods
            var map = d3.select('#map').selectAll('path')
                    .data(data[0].features)
                    .enter()
                    .append('path')
                    .attr('d', path)
                    .style('stroke', 'darkblue')
                    .style('stroke-width', 1);

// normalize neighborhood names
            map.datum(function(d) {
                var normalized = d.properties.name
                        .replace(/ /g, '_')
                        .replace(/\//g, '_');

d.properties.neighbourhood = normalized;
                return d;
            });

d3.select('#map').append("text")
                    .attr("y", 440)
                    .attr("x", 20)
                    .text("Bubble size: Current worldwide relative popularity (of 'Zika virus' searches on Google)")
                    .attr('class', 'footnote');

d3.select('#map').append('svg').append("rect")
                    .attr("y", 280)
                    .attr("x", 20)
                    .attr("width", 245)
                    .attr("height", 75)
                    .attr("fill", "aliceblue")
                    .attr("stroke", "black");

d3.select('#map').append("text")
                    .attr("y", 300)
                    .attr("x", 45)
                    .text("TRACKING THE SPREAD ")
                    .attr('class', 'title');

d3.select('#map').append("text")
                    .attr("y", 320)
                    .attr("x", 65)
                    .text("OF THE ZIKA VIRUS")
                    .attr('class', 'title');

d3.select('#map').append("text")
                    .attr("y", 340)
                    .attr("x", 30)
                    .text("THROUGH GOOGLE TRENDS")
                    .attr('class', 'title');

// add the neighborhood name as its class
            map.attr('class', function(d) {
                return d.properties.neighbourhood;
            });

// find the min/max of listing per neighborhood
            var listings_extent = d3.extent(d3.values(data[1]));

// append a bubble to each neighborhood
            var bubbles = d3.select('#map').append("g")
                    .attr("class", "bubble")
                    .selectAll("circle")
                    .data(data[0].features)
                    .enter()
                    .append("circle")
                    .attr('class', 'airbnb');

// add the listing data to each neighborhood datum
            bubbles.datum(function(d) {
                d.count = data[1][d.properties.neighbourhood];
                return d;
            });

// scale each bubble with a sqrt scale
            var radius = d3.scale.pow().exponent(.5)
                    .domain(listings_extent)
                    .range([0, 20]);

// transform each bubbles' attributes according to the data
            bubbles
                    .attr("cx", function(d) { return path.centroid(d.geometry)[0]; })
                    .attr("cy", function(d) { return path.centroid(d.geometry)[1]; })
                    .attr("r", function(d) { return radius(d.count); });

// initialize the Jamaica as the default country
            var field = "Jamaica";

// maximum reviews
            var max_y = d3.max(data[2], function(d) {
                var max = 0;

d3.values(d).forEach(function(i) {
                    if (+i && (+i > max)) {
                        max = +i;
                    }
                });

return max;
            });

// Create y-axis scale mapping price -> pixels
            var measure_scale = d3.scale.linear()
                    .range([height2, 60])
                    .domain([0, max_y]);

// Create D3 axis object from measure_scale for the y-axis
            var measure_axis = d3.svg.axis()
                    .scale(measure_scale)
                    .orient("right");

// Append SVG to page corresponding to the D3 y-axis
            d3.select('#chart').append('g')
                    .attr('class', 'y axis')
                    .attr("transform", "translate(" + width2 + " , -15)")
                    .call(measure_axis);

// add label to y-axis
            d3.select(".y.axis")
                    .append("text")
                    .attr('class', 'label')
                    .text("Searches of 'Zika virus' on Google*")
                    .attr("transform", "translate(45,70) rotate(90)");

d3.select('#chart').append("text")
                    .attr("y", 440)
                    .attr("x", 10)
                    .text("* Index of country's relative popularity of the topic in the search engine")
                    .attr('class', 'footnote');

d3.select('#chart').append("text")
                    .attr("y", 420)
                    .attr("x", 40)
                    .text("Source: Google Trends")
                    .attr('class', 'footnote');

// create a function to draw the timeseries for each neighborhood
            var drawChart = function(field) {
                // remove the previous chart
                d3.select('#chart').select('.x.axis').remove();
                d3.select('#chart').select('path').remove();

// update the title
                d3.select('#heading')
                        .text(field.replace(/_/g, ' '));

// remove missing values
                var neigh_data = data[2].filter(function(d) {
                    return d[field];
                });

// get min/max dates
                var time_extent = d3.extent(neigh_data, function(d){
                    return format.parse(d['timestamp']);
                });

// Create x-axis scale mapping dates -> pixels
                var time_scale = d3.time.scale()
                        .range([0, width2 - margin2])
                        .domain(time_extent);

// Create D3 axis object from time_scale for the x-axis
                var time_axis = d3.svg.axis()
                        .scale(time_scale)
                        .tickFormat(d3.time.format("%b '%y"));

// Append SVG to page corresponding to the D3 x-axis
                d3.select('#chart').append('g')
                        .attr('class', 'x axis')
                        .attr('transform', "translate(" + margin2 + ',' + (height2 - 15) + ")")
                        .call(time_axis)
                        .selectAll("text")
                        .attr("y", 0)
                        .attr("x", 9)
                        .attr("dy", ".35em")
                        .attr("transform", "rotate(90)")
                        .style("text-anchor", "start");

// define the values to map for x and y position of the line
                var line = d3.svg.line()
                        .x(function(d) { return time_scale(format.parse(d['timestamp'])); })
                        .y(function(d) { return measure_scale(+d[field]); });

// append a SVG path that corresponds to the line chart
                d3.select('#chart').append("path")
                        .datum(neigh_data)
                        .attr("class", "line")
                        .attr("d", line)
                        .attr('transform', 'translate(' + margin2 + ', -15)');

d3.select('#rect').selectAll('path')
                        .attr("width", 200)
                        .attr("height", 300);

};

drawChart(field);

// create a callback for the neighborhood hover
            var mover = function(d) {
                var neigh = d.properties.neighbourhood;
                d3.select('#map path.' + neigh).style('fill', '#ACBEE6');

drawChart(neigh);
            };

// create a callback for the neighborhood hover
            var mout = function(d) {
                var neigh = d.properties.neighbourhood;
                d3.select('path.' + neigh).style('fill', '#D0AD81');
            }

// attach events to neighborhoods in map
            map.on("mouseover", mover);
            map.on("mouseout", mout);

// attach events to bubbles on map
            bubbles.on('mouseover', mover);
            bubbles.on('mouseout', mout);
        }

</script>
</head>
<body>
<svg id="map"></svg>
<svg id="chart">
    <text x="50%" y="30" id="heading" font-size="1.5em" text-anchor="middle" font-family="Arial">Brazil</text>
</svg>
<script>
    // load data with queue
    var url1 = "countries.geo.json"
    var url2 = "bubbles.json";
    var url3 = "time_series_zika.csv";

var q = d3_queue.queue(3)
            .defer(d3.json, url1)
            .defer(d3.json, url2)
            .defer(d3.csv, url3)
            .awaitAll(draw);

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js

https://d3js.org/d3-queue.v2.min.js