| license: mit |
bl.ocks.org/Eleonore9/dd8810a3fb4657e423f148cd71ea7e19
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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .bar { | |
| fill: #3366cc; | |
| } | |
| .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 = 150, xLabelyPosition = 80, | |
| yName = "maximal", // column name for y-axis in the csv | |
| yAxisLabel = "Temperature (°C)"; | |
| 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: 40, right: 10, bottom: 60, left: 40}, | |
| 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])}; // '+' 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]); | |
| // Add the x-axis | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // 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"); | |
| // Add one bar per data point | |
| g.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.xData); }) | |
| .attr("y", function(d) { return y(d.yData); }) | |
| .attr("width", x.bandwidth()) | |
| .attr("height", function(d) { return height - y(d.yData); }); | |
| // Add x-axis label | |
| svg.append("text") | |
| .attr("x", (width /2) + xLabelxPosition) | |
| .attr("y", height + xLabelyPosition) | |
| .style("text-anchor", "end") | |
| .text(xAxisLabel); | |
| // Add y-axis label | |
| svg.append("text") | |
| .attr("x", 0) | |
| .attr("y", maxY) | |
| .style("text-anchor", "start") | |
| .text(yAxisLabel); | |
| }); | |
| </script> |
| day | minimal | maximal | hist_min | hist_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 |
