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
xxxxxxxxxx<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> https://d3js.org/d3.v4.min.js