Data Visualisation with D3 journal Part: 4

Visualise Data with a Heat Map

In the third project, I made a heap map of monthly global land surface temperature over a period of time with colour coding. I used dark shades to represent more heat and light colours are being used for less heat. I also added a colours scale range at the bottom using temperature range.

These are my implementation steps. I will skip those steps which have already mentioned in previous projects

1. First I fetched data from API and created ‘svg’ canvas. Y-axis is being used to define months like this:

const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var yScale = d3.scaleBand()
             .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
             .range([padding,h-padding]);
    
// define axis
const yAxis = d3.axisLeft(yScale)
    .tickValues(yScale.domain())
    .tickFormat(function(d){
      return monthNames[d];
    });

Scale band is very helpful when we have to split our range into number of bands. In out case we need to divide y-axis into ranges. I also added labels using the monthly names array. I used the same scale and domain to create years time line on axis which I have already used in previous projects.

const monthlVarianceArray = json.monthlyVariance;
  
      const minYear =
      d3.min(monthlVarianceArray, function(d) {
        return d.year;
      });
    const maxYear =
      d3.max(monthlVarianceArray, function(d) {
        return d.year;
      });  
  
      const xScale = d3
      .scaleLinear()
      .domain([minYear, maxYear])
      .range([padding, w - padding]);  
  
      const xAxis = d3.axisBottom(xScale)
      .tickFormat(d3.format("d"));

2. Add ‘rects’ with different colours to create heap map

      svg
      .selectAll("rect")
      .data(monthlVarianceArray)
      .enter()
      .append("rect")
      .attr("class", "cell")
      .attr("x", (d)=>{
        return xScale(d.year);
      })
      .attr("y", (d) => {
        return yScale(d.month-1);
      })
      .attr("width", widthConst)
      .attr("height", heightConst)
      .attr("data-month",(d) => d.month-1)
      .attr("data-year",(d) => d.year)
      .attr("data-temp",(d) => d.variance)
      .style("fill",(d,i)=>{
         
         return getColorForValue(parseFloat(d.variance + json.baseTemperature));
      });

I used previously defined scale to map values on x and y-axis. Moreover, width and height const are being defined like this:

const widthConst = parseFloat(w/(maxYear-minYear));
const heightConst = yScale.bandwidth();

This is the look of completed project:

Visualise Data with a Choropleth Map

This kind of map is generally used to show density of certain factor in various areas using colour range. In this project I displayed united states educational attainment percentage of adults with bachelors degree or higher.

This project was a bit from the previous ones in terms of its implementation. I have been working with scale and ranges so far but it needs to draw path using for each county using data coming from API and fill it with appropriate colour according to the education value.

Implementations Steps:

1. This project is dependent on two API’s. The first one gives the geometry of each county and the second one gives education value. All counties can be linked with their corresponding education value using id. So in the first step I fetch data from both API’s and created ‘svg’ using fixed height and width.
2. This is the most important step in this project implementation. I added paths in svg using ‘topojson’ api. Its an extension of Geojson that encodes topology.

const colors = ["#42A5F5", "#2196F3", "#1E88E5", "#1976D2", "#1565C0", "#0D47A1"];
var path = d3.geoPath();
const minEducation = d3.min(educationResponse, function(d) {
        return d.bachelorsOrHigher;
      });
const maxEducation = d3.max(educationResponse, function(d) {
        return d.bachelorsOrHigher;
      });
const colorRangeFactor = (maxEducation - minEducation) / colors.length;
svg
        .append("g")
        .selectAll("path")
        .data(
          topojson.feature(countiesResponse, countiesResponse.objects.counties)
            .features
        )
        .enter()
        .append("path")
        .attr("fill", function(d, i) {
          var colorIndex = 0;
          const eduObj = getEducationValue(d.id);
          colorIndex = parseInt(
            (eduObj.bachelorsOrHigher - minEducation) / colorRangeFactor
          );
          return colors[colorIndex];
        })
        .attr("d", path)
        .attr("class", "county");

In the code given above, first education range is being computed using min and max values. Next paths has been added to to svg and its color is dependent on the education value.

This is the final look of my project implementation.

I am currently working on rest of the projects required to complete this certification. You can track my progress here.