D3 Examples - Visualization Implementation (VI4)

Visualization Implementation (VI4)

Name: Erika Siregar

Assignment : Visualization Implementation (VI4)
Course: Information Visualization (CS725)
Semester : Spring 2016

Explanation:

Bubble Chart

This bubble chart is intended to show the comparison between GDP per Capita and Life Expectancy in 15 Most Populous Contries in The World in 2014.
Channels that are used:
- Position on common scale to show magnitude: The higher position means higher life expectancy and position that is more to the right means the greater GDP per Capita.
- spatial region and color hue to show identity: Each size and color of the bubble represents the continent of the countries being presented.
Marks:each bubble represents a country.
Data Source --> http://www.gapminder.org/data/
Inspiration --> http://www.gapminder.org/GapminderMedia/wp-uploads/gapminder_world_2013_v8.pdf
Tutorial from --> Mike Bostock (/mbostock/4063269)
The Bubble Chart generated with Tableau:

Stacked Area Chart

This chart shows the result of major disease surveillance in Indonesia from 2007 - 2014. From this assignment purpose only, I only choose the diseases: Malaria, TB, Pneumonia, Measles, and Dengue. The information is presented in the form of stacked area chart. From the graph we can see that Malaria has the highest percentage of number of cases since it has the widest area in the chart.
Channels that are used:
- Area to show magnitude: the wider area, the more cases happen for a particular disease
- position on unaligned scale to show magnitude.
- Color hue to show identity: each color represent a different disease
Marks: area
Data Source --> http://bps.go.id/site/pilihdata
Inspiration --> http://visage.co/data-visualization-101-area-charts/
Tutorial from --> Mike Bostock (https://bl.ocks.org/mbostock/3885211)
The Stacked Area Chart created with Tableau:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title> D3 Test </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        font-family: 'Open sans',verdana,arial,sans-serif;
        font-size: 10pt
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <script>
      var divContainer = d3.select('body')
                                        .append('div')
                                            .style('height', '480px')
                                            .style('overflow-x', 'hidden')
                                            .style('overflow-y', 'scroll')
      
      var divBubble = divContainer
                            .append('div')
                        .attr('class', 'chart')
      
      var width = 834;
      var height = 370;
      var margin = 70;
      
      var continents = {}
      d3.csv("populous_country.csv", 
        function(d) {
          return {
            x: +d["GDP Per capita"], 
            y: +d["Life-Expectancy"], 
            size: d["Continent"], 
            label: d["Country"],
            c: d["Continent"]
          }
        }, 
        function(error, data) {
            data.forEach(function(d) {
            continents[d["size"]] = 0
          })
          continents = d3.keys(continents).sort();
            data.forEach(function(d) {
            d["size"] = continents.indexOf(d["size"]) + 1
          })
          
          var labelX = 'GDP Per Capita ($)';
            var labelY = 'Life Expectancy (year)';
        
          var x = d3.scale.linear().domain([
                    d3.min(data, function (d) { return d.x; }), 
                    d3.max(data, function (d) { return d.x; })
                  ]).range([0, width]);
          var y = d3.scale.linear().domain([
                    d3.min(data, function (d) { return d.y; }), 
                    d3.max(data, function (d) { return d.y; })
                  ]).range([height, 0]);
​
          var svg = divBubble
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");
​
          // X Axis
          var xAxis = d3.svg.axis().scale(x);
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width + 20)
              .attr("y", margin - 40)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
​
          // Y Axis
          var yAxis = d3.svg.axis().scale(y).orient("left");
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x", 20)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
​
          // Bubbles
          var scale = d3.scale.sqrt().domain([
                        d3.min(data, function (d) { return d.size; }), 
                        d3.max(data, function (d) { return d.size; })
                      ]).range([5, 20]);
          var color = d3.scale.category10();
​
          svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
              .attr("cx", function (d) { return x(d.x); })
              .attr("cy", function (d) { return y(d.y); })
              .attr("r", function (d) { return scale(d.size); })
              .attr("text", function (d) { return d.label })
              .style("fill", function (d) { return color(d.c); })
              .attr("opacity", 0.7)
​
          svg.selectAll("circle")
            .each(function(d, i) {
              circle = d3.select(this)
              svg.append("text")
                .text(circle.attr("text"))
                .attr("dx", +circle.attr("cx") - (+circle.attr("r")/2))
                .attr("dy", +circle.attr("cy") + 3);
            })
        }
      );
      
      var divStack = divContainer
                            .append('div')
                        .attr('class', 'chart')
      
      var parseDate = d3.time.format("%y-%b-%d").parse;
      var formatPercent = d3.format(".0%");
            
      d3.csv("surveillance-disease.csv", 
        function(d) {
            row = {
            x : d3.time.format("%Y").parse(d.year), 
            y : {
              malaria : +d.malaria, 
              TB : +d.TB, 
              pneumonia : +d.pneumonia, 
              //leprosy : +d.leprosy, 
              //tetanus : +d.tetanus, 
              measles : +d.measles, 
              //diarrhea : +d.diarrhea, 
              dengue : +d.dengue
            } 
          }
          
          var total = 0
          d3.keys(row.y).forEach(function(key) {
            total += row.y[key]
          })
          
          d3.keys(row.y).forEach(function(key) {
            row.y[key] = row.y[key]/total
          })
            
          return row
        }, 
        function(error, data) {
            var labelX = 'Year';
            var labelY = 'Disease';
        
            var svg = divStack
                      .append('svg')
                      .attr('class', 'chart')
                      .attr("width", width + margin + margin)
                      .attr("height", height + margin + margin)
                      .append("g")
                      .attr("transform", "translate(" + margin + "," + margin + ")");
            
            // X Axis
            var x = d3.time.scale()
                        .domain(d3.extent(data, function(d) { return d.x; }))
                        .range([0, width]);
            var xAxis = d3.svg.axis().scale(x);
            
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
              .text(labelX)
              .attr("x", width + 20)
              .attr("y", margin - 40)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
            
            // Y Axis
            var y = d3.scale.linear().range([height, 0]);
            var yAxis = d3.svg.axis().scale(y)
                                .orient("left")
                                .tickFormat(formatPercent);
            
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
              .text(labelY)
              .attr("transform", "rotate(-90)")
              .attr("x", 20)
              .attr("y", -margin)
              .attr("dy", ".71em")
              .style("text-anchor", "end");
            
            // Stack area
            var color = d3.scale.category20()
                      .domain(d3.keys(data[0].y))
          
          var area = d3.svg.area()
                                .x(function(d) { return x(d.date); })
                                .y0(function(d) { return y(d.y0); })
                                .y1(function(d) { return y(d.y0 + d.y); });
          
          var pathData = color.domain().map(function(name) {
                        return {
                          name : name,
                          values: data.map(function(d) {
                            return {
                              date: d.x, y: d.y[name]
                            }
                          })
                        }
                      })
          
          var stackData = d3.layout.stack()
                                .values(function(d) { 
                                    return d.values 
                                })(pathData)
          
          var container = svg.selectAll(".data")
            .data(stackData).enter()
            .append("g")
            .attr("class", "data");
            
            container.append("path")
            .attr("class", "area")
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d) { return color(d.name); });
        
            container.append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
            .attr("x", -6)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; })
            .style("text-anchor", "end");
        }
      );
    </script>
  </body>
</html>
    