D3 Examples - data_viz_final

data_viz_final_project
How did global temperature and temperature of each country change over the last century?
This is the final project for data vizualization course.
Raw data source: http://berkeleyearth.org/data/
Contents in dataset:
dt: date in terms of the first day of the month
LandAverageTemperature: land average temperature
LandAverageTemperatureUncertainty: uncertainty of land average temperature
Land average temperature by Country, State or City
For this project, global temperature and temperature by country in 1914-2013 was used.
xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
  
  <style>
​
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
​
#container1 {
    position: fixed;
    top: -100px;
    left: 0px;
    width: 960px;
    height: 960px;
/*     background: lightgray; */
/*   max-height: 450px; */
}
​
    #country_chart {
    position: fixed;
    top: 100px;
    left: 1000px;
    width: 960px;
/*     height: 960px; */
/*     background: lightgray; */
/*   max-height: 450px; */
}
    
    #global_chart {
    position: fixed;
    top: 450px;
    left: 1000px;
    width: 960px;
}
    
   #color_grad {
    position: fixed;
    top: 50px;
    left: 500px;
    width: 600px;
/*     height: 960px; */
/*     background: lightgray; */
/*   max-height: 450px; */
}
    .axis {
          font-family: arial;
          font-size: 0.8em;
        }
​
    .axis text {
      fill: black;
      stroke: none;
    }
​
    path {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
​
    .tick {
      fill: none;
      stroke: black;
    }
​
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
    
    .gline {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
    
    .chart_overlay {
            stroke-width: 0px;
            fill-opacity: 0;
}
</style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
  
  <script>
    
  function draw(temp_data_all) {
    var temp_data_country = temp_data_all['countries'],
        temp_data_gl = temp_data_all['global'],
        alias_map = temp_data_all['alias'];
    
    
    draw_country_chart('USA', temp_data_country, alias_map);
//     d3.json('temp_gl.json', draw_global_chart);
    
    
    
    draw_global_chart(temp_data_gl);
    var temp_data=temp_data_country['2013'];
    var color_scale = d3.scale.linear()
                        .domain([-20,-10,0,10,20,30])
                        .range(['#0500ff','#0054ff','#00ffa8',
                                '#FFfa00','#FF8200','#FF0a00']);
//     var color_scale = d3.scale.linear().domain([-20,30]).range(['blue','red']);
    
    var fill_key = {};
    var fill_value = {};
    // show the values stored
    for (var k in temp_data) {
      fill_key[k]={fillKey: k, temperature:d3.round(temp_data[k], 1)};
      fill_value[k]=color_scale(temp_data[k]);
      
    }
    fill_value['defaultFill']='white';  
//     console.log(fill_value);
    var map = new Datamap({
        scope: 'world',
        element: document.getElementById('container1'),
      
        projection: 'mercator',
        height: 900,
        geographyConfig: {
          highlightBorderColor: 'white',
//           popupTemplate: function(geography, fill_value) {
//             return '<div class="hoverinfo">' + geography.properties.name + 
//               ': ' +  fill_value.temperature + '&deg;C'
//           },
          highlightBorderWidth: 2
        },
​
        fills: fill_value,
        
        data: fill_key,
        done: function(datamap) {
              datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
//                   var m = {};
//                   m[geography.id] = '#000000';
//                   datamap.updateChoropleth(m);
//                 draw_country_chart(geography.id, temp_data_all);
                update_country_chart(geography.id, temp_data_country, alias_map);
              });
            }
      });
    
    var vis = d3.select("#color_grad")
            .append("svg")
        .attr("width", 600)
        .attr("height", 100);
            var color_grad = d3.range(-20,32,2),
                    setwidth = 400./(color_grad.length-1);
            vis.selectAll('rect')
        .data(color_grad)
        .enter()
        .append('rect')
            .attr("x", function(d, i) { return setwidth*i+10; })
            .attr("y", 20)
            .attr("height", 20)
            .attr("width", setwidth)
            .attr('fill', function(d) { return color_scale(d)})
      
      vis.selectAll('text')
      .data([-20,-10,0,10,20,30])
      .enter()
      .append("text")
            .attr("x", function(d,i) { return 400.*(i)/5+10; })
            .attr("y", 50)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
    
    vis.append("text")
            .attr("x", 125)
            .attr("y", 10)
            .attr("dy", ".35em")
            .text('Temperature Scale (Celsius)');
// +'&deg;C'
        var gvertical = d3.select(".gchart")
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 1)
        .attr("height", 175)
        .attr("fill","red");
    
    var vertical = d3.select(".chart")
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 1)
        .attr("height", 300)
        .attr("fill","red");
    
        var margin = {top: 25, right: 40, bottom: 25, left: 75};
        var width = 800 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
        var time_extent = [1914,2013];
        var time_scale = d3.scale.linear()
              .range([0, width])
              .domain(time_extent);
​
    var overlay = d3.svg.area()
    .x(function (d) { return time_scale(+d); })
    .y0(0)
    .y1(height);
​
        d3.select(".gchart").append('path')
    .attr('class', 'chart_overlay')
    .attr('d', overlay(d3.keys(temp_data_country)));
    
    d3.select(".chart_overlay")
      .on("mousemove", function(){ 
        mousex = d3.mouse(this)[0];
        gvertical.attr("x", mousex);
      vertical.attr("x", mousex);
        var x0 = time_scale.invert(mousex)
        var update_data = temp_data_country[""+d3.round(x0,0)];
        var color_update = {};
        for (var k in update_data) {
        color_update[k]=color_scale(update_data[k]);
        }
        color_update['defaultFill']='white';  
        map.updateChoropleth(color_update);
      })
      .on("mouseover", function(){ 
        mousex = d3.mouse(this)[0];
        gvertical.attr("x", mousex);
      vertical.attr("x", mousex);
        var x0 = time_scale.invert(mousex)
        var update_data = temp_data_country[""+d3.round(x0,0)];
        var color_update = {};
        for (var k in update_data) {
        color_update[k]=color_scale(update_data[k]);
        }
        color_update['defaultFill']='white';  
        map.updateChoropleth(color_update);
      });
    
    
    //                  
  }
    
    
    function update_country_chart(id, data_c, alias) {
        var margin = {top: 25, right: 40, bottom: 25, left: 75};
        // set height and width of chart
        var width = 800 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
        d3.select(".title")
            .text(alias[id]+" Temperature");
      
         var i = 0;
                 var data_select = [];
         for (var k in data_c) {
             data_select[i]={key:+k,values:data_c[k][id]};
           i = i+1;
                  }
        var temp_extent = d3.extent(data_select, function(d) {
              return d.values;
          });
​
        var time_extent = [1914,2013];
​
        var time_scale = d3.scale.linear()
            .range([0, width])
            .domain(time_extent);
​
        var temp_scale = d3.scale.linear()
            .range([height, 0])
            .domain(temp_extent);
​
        var time_axis = d3.svg.axis()
            .scale(time_scale)
            .orient("bottom")
            .tickFormat(d3.format("04d"));
​
        var temp_axis = d3.svg.axis()
            .scale(temp_scale)
            .orient("left");
      
        var line = d3.svg.line()
              .x(function(d) {
                return time_scale(d.key);
              })
              .y(function(d) {
                return temp_scale(d.values);
              });
        // Select the section we want to apply our changes to
        var svg_1 = d3.select("#country_chart");
​
        var line = d3.svg.line()
              .x(function(d) {
                return time_scale(d.key);
              })
              .y(function(d) {
                return temp_scale(d.values);
              });
​
        // Make the changes
            svg_1.select(".line") 
                .attr("d", line(data_select));
            svg_1.select(".x.axis")
                .call(time_axis);
            svg_1.select(".y.axis")
                .call(temp_axis);
      
      svg_1.select(".cursor")
            .on("mousemove", mousemove);
      
      function mousemove() {
            var x0 = time_scale.invert(d3.mouse(this)[0]),
            i = x0 | 0,
            d0 = data_select.filter(function(d){return d.key===i})[0],
            d1 = data_select.filter(function(d){return d.key===i+1})[0],
            da = {key:x0,values:(d1.values-d0.values)/(d1.key-d0.key)*(x0-i)+d0.values};
                        
            svg_1.select(".cursor_point").select("circle.y")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")");
            svg_1.select(".cursor_point").select("text.y1")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text(d3.round(da.values, 2));
            svg_1.select(".cursor_point").select("text.y2")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text(d3.round(da.values, 2));
            svg_1.select(".cursor_point").select("text.y3")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text('year: '+d3.round(da.key, 0));
            svg_1.select(".cursor_point").select("text.y4")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text('year: '+d3.round(da.key, 0));
            svg_1.select(".cursor_point").select(".x")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                           .attr("y2", height - temp_scale(da.values));
            svg_1.select(".cursor_point").select(".y")
                .attr("transform",
                      "translate(" + width * -1 + "," +
                                     temp_scale(da.values) + ")")
                           .attr("x2", width + width);
            }
    }
    
    
    function draw_country_chart(id, data_c, alias) {
        var margin = {top: 25, right: 40, bottom: 25, left: 75};
​
        // set height and width of chart
        var width = 800 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
        var svg = d3.select("#country_chart")
                    .append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                    .append('g')
                      .attr('class','chart')
                      .attr("transform",
                            "translate(" + margin.left + "," + margin.top + ")");
        svg.append("text")
            .attr('class', 'title')
          .attr("x", (width / 2))             
          .attr("y", 0 - (margin.top / 2))
          .attr("text-anchor", "middle")  
          .style("font-size", "16px")  
          .text(alias[id]+" Temperature");
      
         var i = 0;
                 var data_select = [];
         for (var k in data_c) {
             data_select[i]={key:+k,values:data_c[k][id]};
           i = i+1;}
​
        var temp_extent = d3.extent(data_select, function(d) {
              return d.values;
          });
​
        var time_extent = [1914,2013];
​
        var time_scale = d3.scale.linear()
            .range([0, width])
            .domain(time_extent);
​
        var temp_scale = d3.scale.linear()
            .range([height, 0])
            .domain(temp_extent);
​
        var time_axis = d3.svg.axis()
            .scale(time_scale)
            .orient("bottom")
            .tickFormat(d3.format("04d"));
​
        var temp_axis = d3.svg.axis()
            .scale(temp_scale)
            .orient("left");
​
        var line = d3.svg.line()
            .x(function(d) {
              return time_scale(d.key);
            })
            .y(function(d) {
              return temp_scale(d.values);
            });
​
        var path = svg.append("path")
                       .attr("class", "line")
                       .attr("d", function(d) {return line(data_select); });
​
        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', "translate(0," + height + ")")
            .call(time_axis);
​
        svg.append('g')
            .attr('class', 'y axis')
            .call(temp_axis);
​
        // add label to y-axis
        d3.select(".y.axis")
            .append("text")
            .text("Degrees (Celsius)")
            .attr("transform", "rotate(-90, -43, 0) translate(-260)")
            .style('font-size', '1.2em');
      
        var focus = svg.append("g")
        .attr("class","cursor_point")
                .style("display", "none");
        focus.append("line")
        .attr("class", "x")
        .style("stroke", "blue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0.5)
        .attr("y1", 0)
        .attr("y2", height);
        // append the y line
        focus.append("line")
            .attr("class", "y")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("x1", width)
            .attr("x2", width);
        // append the circle at the intersection
        focus.append("circle")
            .attr("class", "y")
            .style("fill", "none")
            .style("stroke", "blue")
            .attr("r", 4);
        // place the value at the intersection
        focus.append("text")
            .attr("class", "y1")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "-.3em");
        focus.append("text")
            .attr("class", "y2")
            .attr("dx", 8)
            .attr("dy", "-.3em");
        // place the date at the intersection
        focus.append("text")
            .attr("class", "y3")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "1em");
        focus.append("text")
            .attr("class", "y4")
            .attr("dx", 8)
            .attr("dy", "1em");
        // append the rectangle to capture mouse
        svg.append("rect")
                .attr("class","cursor")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .on("mouseover", function() { focus.style("display", null); })
            .on("mouseout", function() { focus.style("display", "none"); })
            .on("mousemove", mousemove);
        function mousemove() {
            var x0 = time_scale.invert(d3.mouse(this)[0]),
            i = x0 | 0,
            d0 = data_select.filter(function(d){return d.key===i})[0],
            d1 = data_select.filter(function(d){return d.key===i+1})[0],
            da = {key:x0,values:(d1.values-d0.values)/(d1.key-d0.key)*(x0-i)+d0.values};
​
            focus.select("circle.y")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")");
            focus.select("text.y1")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text(d3.round(da.values, 2));
            focus.select("text.y2")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text(d3.round(da.values, 2));
            focus.select("text.y3")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text('year: '+d3.round(da.key, 0));
            focus.select("text.y4")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                .text('year: '+d3.round(da.key, 0));
            focus.select(".x")
                .attr("transform",
                      "translate(" + time_scale(da.key) + "," +
                                     temp_scale(da.values) + ")")
                           .attr("y2", height - temp_scale(da.values));
            focus.select(".y")
                .attr("transform",
                      "translate(" + width * -1 + "," +
                                     temp_scale(da.values) + ")")
                           .attr("x2", width + width);
            }
    }
    
    function draw_global_chart(data_c) {
        var margin = {top: 25, right: 40, bottom: 25, left: 75};
​
        // set height and width of chart
        var width = 800 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;
        var svg = d3.select("#global_chart")
                    .append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                    .append('g')
                      .attr('class','gchart')
                      .attr("transform",
                            "translate(" + margin.left + "," + margin.top + ")");
        svg.append("text")
          .attr("x", (width / 2))             
          .attr("y", 0 - (margin.top / 2))
          .attr("text-anchor", "middle")  
          .style("font-size", "16px")  
          .text("Global Temperature");
//       console.log(data_c);
         var i = 0;
                 var data_select = [];
         for (var k in data_c) {
             data_select[i]={key:+k,values:data_c[k]};
           i = i+1;}
​
        var temp_extent = d3.extent(data_select, function(d) {
              return d.values;
          });
​
        var time_extent = [1914,2013];
​
        var time_scale = d3.scale.linear()
            .range([0, width])
            .domain(time_extent);
​
        var temp_scale = d3.scale.linear()
            .range([height, 0])
            .domain(temp_extent);
​
        var time_axis = d3.svg.axis()
            .scale(time_scale)
            .orient("bottom")
            .tickFormat(d3.format("04d"));
​
        var temp_axis = d3.svg.axis()
            .scale(temp_scale)
            .orient("left");
​
        var line = d3.svg.line()
            .x(function(d) {
              return time_scale(d.key);
            })
            .y(function(d) {
              return temp_scale(d.values);
            });
​
        var path = svg.append("path")
                       .attr("class", "gline")
                       .attr("d", function(d) {return line(data_select); });
​
        svg.append('g')
            .attr('class', 'gx axis')
            .attr('transform', "translate(0," + height + ")")
            .call(time_axis);
​
        svg.append('g')
            .attr('class', 'gy axis')
            .call(temp_axis);
​
        // add label to y-axis
        d3.select(".gy.axis")
            .append("text")
            .text("Degrees (Celsius)")
            .attr("transform", "rotate(-90, -43, 0) translate(-190)")
            .style('font-size', '1.2em');
    }
​
  </script>  
</head>
<meta charset="utf-8">
<body>
  <h2>Global Land Temperature</h2>
  <div id="country_chart"></div>
  <div id="global_chart"></div>
  <div id="container1"></div>
  <div id="color_grad"></div>
     <script>
       d3.json('combined_temp_1914.json', draw);
​
       
​
     </script>
</body>
    