Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active June 28, 2017 22:37
Show Gist options
  • Save tomshanley/85821296bffbe08ec1b79e4dab3f0f5c to your computer and use it in GitHub Desktop.
Save tomshanley/85821296bffbe08ec1b79e4dab3f0f5c to your computer and use it in GitHub Desktop.
Download ZIP
Makeover Monday (German vehicle production) Heatmap
Raw
.block
license: mit
Raw
README.md
Raw
data2.csv
car_type export_production date month_number year value diff_to_avg
Passenger cars Production 39448 1 2008 475197 1.161411659
Passenger cars Production 39479 2 2008 531397 1.109590872
Passenger cars Production 39508 3 2008 492336 0.944015155
Passenger cars Production 39539 4 2008 579869 1.202169785
Passenger cars Production 39569 5 2008 444537 0.962328359
Passenger cars Production 39600 6 2008 516609 1.044203485
Passenger cars Production 39630 7 2008 434801 0.958094832
Passenger cars Production 39661 8 2008 340288 0.963721423
Passenger cars Production 39692 9 2008 535893 1.016597412
Passenger cars Production 39722 10 2008 448565 0.928686136
Passenger cars Production 39753 11 2008 452590 0.885252186
Passenger cars Production 39783 12 2008 279948 0.78353524
Passenger cars Production 39814 1 2009 310113 0.757935874
Passenger cars Production 39845 2 2009 297921 0.622078074
Passenger cars Production 39873 3 2009 435693 0.835406704
Passenger cars Production 39904 4 2009 373308 0.77393273
Passenger cars Production 39934 5 2009 427239 0.924881857
Passenger cars Production 39965 6 2009 478133 0.966433308
Passenger cars Production 39995 7 2009 410321 0.904152543
Passenger cars Production 40026 8 2009 325060 0.920594572
Passenger cars Production 40057 9 2009 553205 1.049438547
Passenger cars Production 40087 10 2009 508450 1.052668991
Passenger cars Production 40118 11 2009 493851 0.965957439
Passenger cars Production 40148 12 2009 351229 0.983040775
Passenger cars Production 40179 1 2010 376937 0.921257976
Passenger cars Production 40210 2 2010 450355 0.94037
Passenger cars Production 40238 3 2010 560055 1.073860956
Passenger cars Production 40269 4 2010 464591 0.963178343
Passenger cars Production 40299 5 2010 470130 1.017731778
Passenger cars Production 40330 6 2010 528820 1.068885147
Passenger cars Production 40360 7 2010 392553 0.865000312
Passenger cars Production 40391 8 2010 335748 0.950863799
Passenger cars Production 40422 9 2010 536468 1.017688196
Passenger cars Production 40452 10 2010 502507 1.040364906
Passenger cars Production 40483 11 2010 519765 1.01664443
Passenger cars Production 40513 12 2010 414480 1.160071464
Passenger cars Production 40544 1 2011 398078 0.972927923
Passenger cars Production 40575 2 2011 519342 1.084419262
Passenger cars Production 40603 3 2011 583399 1.118621221
Passenger cars Production 40634 4 2011 470463 0.975352025
Passenger cars Production 40664 5 2011 563015 1.218808111
Passenger cars Production 40695 6 2011 456548 0.922804311
Passenger cars Production 40725 7 2011 462005 1.018039524
Passenger cars Production 40756 8 2011 396706 1.123501478
Passenger cars Production 40787 9 2011 562504 1.067078895
Passenger cars Production 40817 10 2011 502897 1.041172342
Passenger cars Production 40848 11 2011 546272 1.068491311
Passenger cars Production 40878 12 2011 410689 1.149460986
Passenger cars Production 40909 1 2012 443510 1.083966617
Passenger cars Production 40940 2 2012 508798 1.062402717
Passenger cars Production 40969 3 2012 546169 1.047235655
Passenger cars Production 41000 4 2012 426321 0.883837944
Passenger cars Production 41030 5 2012 448045 0.969922436
Passenger cars Production 41061 6 2012 463839 0.937541352
Passenger cars Production 41091 7 2012 460830 1.015450382
Passenger cars Production 41122 8 2012 363254 1.028762877
Passenger cars Production 41153 9 2012 450072 0.853793631
Passenger cars Production 41183 10 2012 454716 0.941420853
Passenger cars Production 41214 11 2012 482406 0.94357137
Passenger cars Production 41244 12 2012 340499 0.953009008
Passenger cars Production 41275 1 2013 397634 0.971842759
Passenger cars Production 41306 2 2013 459180 0.958797164
Passenger cars Production 41334 3 2013 474467 0.909752768
Passenger cars Production 41365 4 2013 502411 1.041585813
Passenger cars Production 41395 5 2013 428684 0.928009975
Passenger cars Production 41426 6 2013 475779 0.961675251
Passenger cars Production 41456 7 2013 444960 0.980480442
Passenger cars Production 41487 8 2013 394991 1.118644468
Passenger cars Production 41518 9 2013 514468 0.975953851
Passenger cars Production 41548 10 2013 456669 0.945464245
Passenger cars Production 41579 11 2013 537383 1.051104699
Passenger cars Production 41609 12 2013 353278 0.988775639
Passenger cars Production 41640 1 2014 442430 1.081327029
Passenger cars Production 41671 2 2014 513041 1.071262371
Passenger cars Production 41699 3 2014 522428 1.001714174
Passenger cars Production 41730 4 2014 494416 1.025010781
Passenger cars Production 41760 5 2014 482483 1.044473404
Passenger cars Production 41791 6 2014 456069 0.921836126
Passenger cars Production 41821 7 2014 535001 1.178888028
Passenger cars Production 41852 8 2014 272744 0.772431693
Passenger cars Production 41883 9 2014 524072 0.994172789
Passenger cars Production 41913 10 2014 478999 0.99169514
Passenger cars Production 41944 11 2014 515340 1.007989266
Passenger cars Production 41974 12 2014 367003 1.027189991
Passenger cars Production 42005 1 2015 421510 1.03019722
Passenger cars Production 42036 2 2015 501118 1.046366386
Passenger cars Production 42064 3 2015 556049 1.06617977
Passenger cars Production 42095 4 2015 479631 0.994358891
Passenger cars Production 42125 5 2015 447925 0.969662661
Passenger cars Production 42156 6 2015 513315 1.037545439
Passenger cars Production 42186 7 2015 533264 1.175060505
Passenger cars Production 42217 8 2015 338834 0.959603585
Passenger cars Production 42248 9 2015 538149 1.020877079
Passenger cars Production 42278 10 2015 529856 1.096986883
Passenger cars Production 42309 11 2015 518512 1.014193601
Passenger cars Production 42339 12 2015 329975 0.923553806
Passenger cars Production 42370 1 2016 416983 1.019132944
Passenger cars Production 42401 2 2016 529061 1.104713155
Passenger cars Production 42430 3 2016 523210 1.003213597
Passenger cars Production 42461 4 2016 550158 1.140573689
Passenger cars Production 42491 5 2016 445393 0.964181418
Passenger cars Production 42522 6 2016 563546 1.139075581
Passenger cars Production 42552 7 2016 410630 0.904833432
Passenger cars Production 42583 8 2016 410256 1.161876105
Passenger cars Production 42614 9 2016 529463 1.004399601
Passenger cars Production 42644 10 2016 464434 0.961540505
Passenger cars Production 42675 11 2016 535180 1.046795698
Passenger cars Production 42705 12 2016 368494 1.031363091
Trucks Production 39448 1 2008 25412 1.203865711
Trucks Production 39479 2 2008 28381 1.291297622
Trucks Production 39508 3 2008 27083 1.12623194
Trucks Production 39539 4 2008 32175 1.373695446
Trucks Production 39569 5 2008 25918 1.131504909
Trucks Production 39600 6 2008 28591 1.162529818
Trucks Production 39630 7 2008 25323 1.191309302
Trucks Production 39661 8 2008 24331 1.338952582
Trucks Production 39692 9 2008 29329 1.097578318
Trucks Production 39722 10 2008 24756 0.995193854
Trucks Production 39753 11 2008 18562 0.71785903
Trucks Production 39783 12 2008 11065 0.609313624
Trucks Production 39814 1 2009 12277 0.58160945
Trucks Production 39845 2 2009 9334 0.424684543
Trucks Production 39873 3 2009 13133 0.546128718
Trucks Production 39904 4 2009 10349 0.441845351
Trucks Production 39934 5 2009 12879 0.562259886
Trucks Production 39965 6 2009 14238 0.578926919
Trucks Production 39995 7 2009 12826 0.603393481
Trucks Production 40026 8 2009 12165 0.669448776
Trucks Production 40057 9 2009 18601 0.696104685
Trucks Production 40087 10 2009 20106 0.808263355
Trucks Production 40118 11 2009 17875 0.69129028
Trucks Production 40148 12 2009 13845 0.762399197
Trucks Production 40179 1 2010 14349 0.679768184
Trucks Production 40210 2 2010 17655 0.803278937
Trucks Production 40238 3 2010 20594 0.856390376
Trucks Production 40269 4 2010 19105 0.815678368
Trucks Production 40299 5 2010 18591 0.811629283
Trucks Production 40330 6 2010 21773 0.885305226
Trucks Production 40360 7 2010 19710 0.927248207
Trucks Production 40391 8 2010 10444 0.574740897
Trucks Production 40422 9 2010 23025 0.861663908
Trucks Production 40452 10 2010 20866 0.838815437
Trucks Production 40483 11 2010 27080 1.047280603
Trucks Production 40513 12 2010 17494 0.963337779
Trucks Production 40544 1 2011 19977 0.946388529
Trucks Production 40575 2 2011 21555 0.980723732
Trucks Production 40603 3 2011 23891 0.993494342
Trucks Production 40634 4 2011 21584 0.921518027
Trucks Production 40664 5 2011 25242 1.101992704
Trucks Production 40695 6 2011 19651 0.79902324
Trucks Production 40725 7 2011 20441 0.961637778
Trucks Production 40756 8 2011 19684 1.083224801
Trucks Production 40787 9 2011 27674 1.035643301
Trucks Production 40817 10 2011 24456 0.983133822
Trucks Production 40848 11 2011 29416 1.13762209
Trucks Production 40878 12 2011 21459 1.181677456
Trucks Production 40909 1 2012 21618 1.02412911
Trucks Production 40940 2 2012 21703 0.987457535
Trucks Production 40969 3 2012 24872 1.034288698
Trucks Production 41000 4 2012 17889 0.76376186
Trucks Production 41030 5 2012 22248 0.971283325
Trucks Production 41061 6 2012 23178 0.942433497
Trucks Production 41091 7 2012 20078 0.944560604
Trucks Production 41122 8 2012 19069 1.049380904
Trucks Production 41153 9 2012 25366 0.949271084
Trucks Production 41183 10 2012 24434 0.982249419
Trucks Production 41214 11 2012 24850 0.961038515
Trucks Production 41244 12 2012 15496 0.853314407
Trucks Production 41275 1 2013 19743 0.935303035
Trucks Production 41306 2 2013 21021 0.956427445
Trucks Production 41334 3 2013 24014 0.998609231
Trucks Production 41365 4 2013 25375 1.083372865
Trucks Production 41395 5 2013 23212 1.013368776
Trucks Production 41426 6 2013 26161 1.063724339
Trucks Production 41456 7 2013 20857 0.981208313
Trucks Production 41487 8 2013 21898 1.205062827
Trucks Production 41518 9 2013 25196 0.942909179
Trucks Production 41548 10 2013 23137 0.93010988
Trucks Production 41579 11 2013 29256 1.131434317
Trucks Production 41609 12 2013 18448 1.015871462
Trucks Production 41640 1 2014 25329 1.199933677
Trucks Production 41671 2 2014 23337 1.061802354
Trucks Production 41699 3 2014 24855 1.033581762
Trucks Production 41730 4 2014 27804 1.187077799
Trucks Production 41760 5 2014 27494 1.20030851
Trucks Production 41791 6 2014 28063 1.141060973
Trucks Production 41821 7 2014 25655 1.206928095
Trucks Production 41852 8 2014 20743 1.141502339
Trucks Production 41883 9 2014 29240 1.094247674
Trucks Production 41913 10 2014 26320 1.058066822
Trucks Production 41944 11 2014 25247 0.976391927
Trucks Production 41974 12 2014 19435 1.070222347
Trucks Production 42005 1 2015 27071 1.282459022
Trucks Production 42036 2 2015 26000 1.1829653
Trucks Production 42064 3 2015 30193 1.255559611
Trucks Production 42095 4 2015 27932 1.192542694
Trucks Production 42125 5 2015 24309 1.061260623
Trucks Production 42156 6 2015 29727 1.208720363
Trucks Production 42186 7 2015 22937 1.079060991
Trucks Production 42217 8 2015 19059 1.048830597
Trucks Production 42248 9 2015 31125 1.164789974
Trucks Production 42278 10 2015 32696 1.314382705
Trucks Production 42309 11 2015 31496 1.218063141
Trucks Production 42339 12 2015 22681 1.248969028
Trucks Production 42370 1 2016 24202 1.146543284
Trucks Production 42401 2 2016 28822 1.311362533
Trucks Production 42430 3 2016 27792 1.155715322
Trucks Production 42461 4 2016 28587 1.22050759
Trucks Production 42491 5 2016 26259 1.146391983
Trucks Production 42522 6 2016 29962 1.218275625
Trucks Production 42552 7 2016 23481 1.104653229
Trucks Production 42583 8 2016 16152 0.888856278
Trucks Production 42614 9 2016 30938 1.157791878
Trucks Production 42644 10 2016 27109 1.089784706
Trucks Production 42675 11 2016 28935 1.119020097
Trucks Production 42705 12 2016 23515 1.2948947
Raw
index.html
<!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>
<body>
<div id="charts"></div>
<script>
const dateParser = d3.timeParse("%d/%m/%Y");
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 boxes = g.selectAll("rect")
.data(chartData.values)
.enter()
.append("g")
.attr("transform", function(d){
let x = xScale(d.month_number);
let y = yScale(d.year);
return "translate(" + x +"," + y + ")" ;
});
boxes.append("rect")
.attr("x", function (d){ return (maxBoxSize - size(d.value)) / 2; })
.attr("y", function (d) { return (maxBoxSize - size(d.value)) / 2; })
.attr("width", function (d) { return size(d.value); })
.attr("height", function (d) { return size(d.value); })
.style("fill", function (d) { return colour(d.diff_to_avg); });
boxes.append("text")
.text(function(d){ return formatPercentage(d.diff_to_avg); })
.attr("class", "box-label")
.attr("x", maxBoxSize/2)
.attr("y", 27)
.style("text-anchor", "middle")
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment