| license: mit |
bl.ocks.org/2ffc14f279f76f2f6688447dd6cbae68
You might neither know nor care, but May 2018 was the warmest May ever recorded in Sweden (where I live). I looked up the temperatures for each day of May 2018 on this website
Note: One data point seemed really high (40C) so I used the temperature from Dark Sky instead.
Built with blockbuilder.org
forked from Eleonore9's block: Sthlm temperatures May 2018
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .bar:hover { | |
| fill: #729fcf; | |
| } | |
| .axis--x path { | |
| display: none; | |
| } | |
| svg { | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // *** EDIT TO CUSTOMISE *** | |
| var dataFile = "stockholm_may_temp.csv", | |
| xName = "day", // column name for x-axis in the csv | |
| xAxisLabel = "Days of the month (May 2018)", | |
| xLabelxPosition = -60, xLabelyPosition = 80, | |
| yName = "maximal", // column name for y-axis (bar) in the csv | |
| y2Name = "historical_max", // column name for y-axis (line) in the csv | |
| yAxisLabel = "Temperature (°C)", | |
| barColor = "#3366cc", lineColor = "#16a085", | |
| legendData = [{"name": yName, "color": barColor}, | |
| {"name": y2Name, "color": lineColor}]; | |
| function transformXdata(data) { | |
| return data.substring(0, 2); | |
| } | |
| function transformYdata(data) { | |
| return data; | |
| } | |
| // ************************** | |
| // Define the svg element, the plot dimensions (and margins) | |
| var svg = d3.select("svg"), | |
| margin = {top: 50, right: 20, bottom: 50, left: 30}, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom; | |
| var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), | |
| y = d3.scaleLinear().rangeRound([height, 0]); | |
| // Define the svg subelements 'g' | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv(dataFile, function(d) { | |
| return {xData: transformXdata(d[xName]), | |
| yData: transformYdata(d[yName]), | |
| y2Data: transformYdata(d[y2Name])}; // '+' converts to numbers | |
| }, function(error, data) { | |
| if (error) throw error; | |
| // Define the span of x and y axis | |
| var maxY= d3.max(data, function(d) { return d.yData; }); | |
| x.domain(data.map(function(d) { return d.xData; })); | |
| y.domain([0, maxY]); | |
| var line = d3.line() | |
| .x(function(d) { return x(d.xData); }) | |
| .y(function(d) { return y(d.y2Data); }); | |
| // Add the x-axis | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| svg.append("text") // Add x-axis label | |
| .attr("fill", "#000") | |
| .attr("x", (width /2) + xLabelxPosition) | |
| .attr("y", height + xLabelyPosition) | |
| .style("font-size", "14px") | |
| .text(xAxisLabel); | |
| // Add the y-axis | |
| g.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(d3.axisLeft(y).ticks(10)) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", "0.71em"); | |
| svg.append("text") // Add y-axis label | |
| .attr("fill", "#000") | |
| .attr("x", 0) | |
| .attr("y", maxY) | |
| .style("font-size", "14px") | |
| .text(yAxisLabel); | |
| // Add one bars (y) | |
| var widthBar = x.bandwidth(); | |
| g.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("fill", barColor) | |
| .attr("x", function(d) { return x(d.xData); }) | |
| .attr("y", function(d) { return y(d.yData); }) | |
| .attr("width", widthBar) | |
| .attr("height", function(d) { return height - y(d.yData); }); | |
| // Add line (y2) | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", lineColor) | |
| .attr("stroke-linejoin", "round") | |
| .attr("stroke-linecap", "round") | |
| .attr("transform", "translate(" + widthBar / 2 + ",0)") | |
| .attr("stroke-width", 2.5) | |
| .attr("d", line); | |
| // Add a title | |
| svg.append("svg:text") | |
| .style("font-size", "18px") | |
| .attr("class", "title") | |
| .attr("x", 250) | |
| .attr("y", maxY) | |
| .text("Maximal temperatures in Stockholm in May 2018"); | |
| // Add a legend | |
| var legend = svg.append("g") | |
| .attr("class", "legend") | |
| .attr("height", 100) | |
| .attr("width", 100) | |
| .attr("transform", "translate(-790,60)"); | |
| legend.selectAll("rect") | |
| .data(legendData) | |
| .enter() | |
| .append("rect") | |
| .attr("x", width - 65) | |
| .attr("y", function(d, i){ return i * 20;}) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", function(d) { | |
| return d.color; | |
| }); | |
| legend.selectAll("text") | |
| .data(legendData) | |
| .enter() | |
| .append("text") | |
| .attr("fill", "#000") | |
| .attr("x", width - 52) | |
| .attr("y", function(d, i){ return i * 20 + 9;}) | |
| .text(function(d) { | |
| return d.name; | |
| }); | |
| }); | |
| </script> |
| day | minimal | maximal | historical_min | historical_max | |
|---|---|---|---|---|---|
| 01/05/18 | 6 | 14 | 3 | 13 | |
| 02/05/18 | 4 | 12 | 3 | 13 | |
| 03/05/18 | 3 | 13 | 4 | 14 | |
| 04/05/18 | 5 | 14 | 4 | 14 | |
| 05/05/18 | 3 | 19 | 4 | 14 | |
| 06/05/18 | 8 | 21 | 4 | 14 | |
| 07/05/18 | 8 | 24 | 4 | 15 | |
| 08/05/18 | 10 | 23 | 4 | 15 | |
| 09/05/18 | 8 | 21 | 5 | 15 | |
| 10/05/18 | 8 | 18 | 5 | 15 | |
| 11/05/18 | 12 | 21 | 5 | 15 | |
| 12/05/18 | 9 | 24 | 5 | 16 | |
| 13/05/18 | 7 | 24 | 5 | 6 | |
| 14/05/18 | 7 | 26 | 5 | 16 | |
| 15/05/18 | 8 | 27 | 6 | 16 | |
| 16/05/18 | 9 | 28 | 6 | 16 | |
| 17/05/18 | 10 | 15 | 6 | 16 | |
| 18/05/18 | 5 | 17 | 6 | 17 | |
| 19/05/18 | 3 | 21 | 6 | 17 | |
| 20/05/18 | 8 | 25 | 6 | 17 | |
| 21/05/18 | 9 | 25 | 7 | 17 | |
| 22/05/18 | 8 | 24 | 7 | 17 | |
| 23/05/18 | 7 | 21 | 7 | 17 | |
| 24/05/18 | 7 | 23 | 7 | 17 | |
| 25/05/18 | 6 | 23 | 7 | 17 | |
| 26/05/18 | 6 | 26 | 7 | 18 | |
| 27/05/18 | 9 | 24 | 7 | 18 | |
| 28/05/18 | 8 | 23 | 8 | 18 | |
| 29/05/18 | 8 | 28 | 8 | 18 | |
| 30/05/18 | 12 | 26 | 8 | 18 | |
| 31/05/18 | 10 | 20 | 8 | 18 |
