Makeover Monday (German vehicle production) Heatmap

Built with blockbuilder.org, and D3 Annotation + D3 Legend (ie standing on the shoulder's of Shirley Wu's excellent work!)

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.17.0/d3-annotation.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
  	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro" rel="stylesheet">
    <style>
      
        body {
            font-family: 'Source Serif Pro', serif;
            margin: 20;
          	background: Ivory;
            top: 20;
            right: 20;
            bottom: 20;
            left: 20;
        }
      
      h2 {
        margin-top: 0;
      }
      
      
      
  
      
        .box-label {
          font-size: 11px;
        }

:root {
            --annotation-color: #8c8c8c;
        }

.annotation path {
            stroke: var(--annotation-color);
            fill: none;
        }

.annotation text,
        .annotation .annotation-connector .connector-dot,
        .annotation path.connector-arrow,
        .annotation.callout.rect path.subject {
            fill: var(--annotation-color);
            font-size: 13px;
        }

.annotation-note-title {
            font-weight: bold;
        }

.annotation-note-bg {
            fill: rgba(0, 0, 0, 0);
        }

.annotation.callout.rect path.subject {
            fill-opacity: 0;
        }

.annotation.badge path.subject-pointer,
        .annotation.badge path.subject {
            fill: var(--annotation-color);
            stroke-width: 3px;
            stroke-linecap: round;
        }

.annotation.badge path.subject-ring {
            fill: white;
            stroke-width: 3px;
        }

.annotation.badge .badge-text {
            fill: white;
            font-size: .7em;
        }
        /* Handling edit mode styles */

.editable .annotation-subject,
        .editable .annotation-note {
            cursor: move;
        }

circle.handle {
            stroke-dasharray: 5;
            stroke: var(--annotation-color);
            fill: rgba(255, 255, 255, .2);
            cursor: move;
            stroke-opacity: .4;
        }
      
      
      .legendTitle {
        text-anchor: start
      }
    </style>
</head>

const maxBoxSize = 45;

const width = maxBoxSize * 13;
        const height = maxBoxSize * 9;
        const margin = { "top": 50, "bottom": 150, "left": 50, "right": 150 };

const radius = 4;

const years = ["2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"];
        const months = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];

var xScale = d3.scaleLinear()
            .domain([1, 13])
            .range([0, width])

var yScale = d3.scaleLinear()
            .domain([2008, 2017])
            .range([0, height]);

var size = d3.scaleSqrt()
            .range([0, maxBoxSize]);
      
       var colour = d3.scaleSequential(d3.interpolateRdYlGn)

d3.csv("data2.csv", convertTextToNumbers, function (error, allData) {
            if (error) { throw error; };

var nestedData = d3.nest()
                .key(function (d) { return d.car_type; })
                .entries(allData);

nestedData.forEach(function (chartData) {

let div = d3.select("#charts").append("div");
              
              	let header = div.append("div")
                .attr("class", "header");

header.append("div")
                		.attr("class", "header")
                  	.append("h2")
                    .text(chartData.key + " production");
              
              	const legendWidth = 3 * maxBoxSize + 10;
              	const legendHeight = maxBoxSize;
              	const legendPadding = 30;
              
              	let legend = header.append("div")
                	.attr("class", "legend")
                	.append("svg")
                	.attr("width", (legendWidth * 2) + (legendPadding * 4))
                  .attr("height", legendHeight +(legendPadding * 3));

let diffExtent = d3.extent(chartData.values, function (d) { return d.diff_to_avg; });
                let maxExtent = Math.abs(diffExtent[0]) > Math.abs(diffExtent[1])
                    ? Math.abs(diffExtent[0])
                    : Math.abs(diffExtent[1]);

//colour.domain([-(maxExtent), 0, maxExtent]);
              	colour.domain([-(maxExtent), maxExtent]);

size.domain([0, d3.max(chartData.values, function (d) { return d.value; })]);

let svg = div.append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom);

let g = svg.append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let yearLabels = g.selectAll(".year-label")
                    .data(years)
                    .enter()
                    .append("g")
                    .attr("class", "year-label")
                    .attr("transform", function (d) { return "translate(0, " + yScale(+d) + ")" });

yearLabels.append("text")
                    .text(function (d) { return d; })
                    .attr("x", -5)
                    .attr("y", 27)
                    .style("text-anchor", "end");

let monthLabels = g.selectAll(".month-label")
                    .data(months)
                    .enter()
                    .append("g")
                    .attr("class", "month-label")
                    .attr("transform", function (d, i) { return "translate(" + xScale(i + 1) + ",0)" });

monthLabels.append("text")
                    .text(function (d) { return d; })
                    .attr("x", maxBoxSize / 2)
                    .attr("y", -5)
                    .style("text-anchor", "middle");

//MAKE ANNOTATIONS ON THE CAR CHART
                if (chartData.key == "Passenger cars") {

const type = d3.annotationCalloutRect;

const annotations = [{
                            note: {
                                label: "Below average production (more red)",
                                title: "Global financial crisis"
                            },
                            x: 0,
                            y: maxBoxSize,
                            dy: 10,
                            dx: width + 10,
                            subject: {
                                width: width,
                                height: maxBoxSize
                            }
                        },{
                            note: {
                                label: "August and December has lower output compared to rest of year (smaller boxes)",
                                title: "Seasonal downturn"
                            },
                            x: width * (7/12),
                            y: 0,
                            dy: height + 20,
                            dx: 10,
                            subject: {
                                width: maxBoxSize,
                                height: height
                            }
                        }
                    ];

var makeAnnotations = d3.annotation()
                        .editMode(false)
                        .type(type)
                        .annotations(annotations)

g.append("g")
                        .attr("class", "annotation-group")
                        .call(makeAnnotations)

};

if (chartData.key == "Trucks") {

const type = d3.annotationCalloutRect;

const annotations = [{
                            note: {
                                label: "Below average production lasted longer for trucks",
                                title: "Global financial crisis"
                            },
                            x: 0,
                            y: maxBoxSize,
                            dy: 10,
                            dx: width + 10,
                            subject: {
                                width: width,
                                height: maxBoxSize * 2
                            }
                        },{
                            note: {
                                label: "Last three years have been consistently above average",
                                title: "Recent boom"
                            },
                            x: 0,
                            y: maxBoxSize * 6,
                            dy: 10,
                            dx: width + 10,
                            subject: {
                                width: width,
                                height: maxBoxSize * 3
                            }
                        }
                    ];

var makeAnnotations = d3.annotation()
                        .editMode(false)
                        .type(type)
                        .annotations(annotations)

g.append("g")
                        .attr("class", "annotation-group")
                        .call(makeAnnotations)

};
              
             
              	//drawLegend();
              
              	let padding = 5;
              	let offset = 10;
              	let boxSize = 23;
              
              	let legendSize = d3.legendSize()
                  .scale(size)
                	.title("Production p/month")
                  .shape('rect')
                  .shapePadding(padding)
                	.cells(d3.extent(chartData.values, function(d){ return d.value }))
                  .labelOffset(offset)
                	.labelFormat(function(d){ return Math.round(d/10000) + "k"; })
                  //.orient('horizontal');
              
              	let legendSizeG = legend.append("g")
                    .attr("transform", "translate(" + legendPadding + "," + legendPadding + ")")
                .call(legendSize);
              
              	legendSizeG.selectAll("rect")
                	.style("fill", "lightgrey")
                	//.style("stroke", "black")
              
              	let legendColour = d3.legendColor()
                	.scale(colour)
                	.title("% diff to month avg")
                	.cells(3)
                	.shape('rect')
                	.shapePadding(padding)
                	.labelOffset(offset)
                  .shapeWidth(boxSize)
                	.shapeHeight(boxSize)
                	.labelFormat(function(d){ return formatPercentage(d); })
                  //.orient('horizontal');
              
              	let colourSizeG = legend.append("g")
                    .attr("transform", "translate(" + (legendWidth + (legendPadding * 3)) + "," + legendPadding + ")").call(legendColour);

});

});
      
      	function drawLegend() {
          
        };
      
      	function formatPercentage(n) {
          let roundedNumber = Math.round(n*100);
          return roundedNumber + "%";
        };

function convertTextToNumbers(d) {
            d.value = +d.value;
            d.month_number = +d.month_number;
            d.date = dateParser(d.date);
            d.year = +d.year;
            d.diff_to_avg = +d.diff_to_avg - 1;
            return d;
        };
      
    </script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.17.0/d3-annotation.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js