Sthlm temperatures May 2018-2

Sthlm temperatures May 2018

Link

bl.ocks.org/2ffc14f279f76f2f6688447dd6cbae68

Content

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>

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