Various people in my feedreader have nifty graphics of their stuff on their sites. Sparkline graphs of their posting frequency of various types of content. In the words of Edward Tufte, sparklines are ‘word like graphs’ that can be used inline. I never really tried to find out how you make those sparklines. “View source”, the most important feature of any web browser, reveals it’s simple HTML5 using a vector image (SVG).
The data for the graph is declared as numbers. Such as d=”M0,20 0,16 1,17 2,20 3,15 4,19 5,20 6,15 7,17 8,13 9,19 10,20 11,15 12,12″ (the start of that data string sets the lower and higher end of the y-axis, and then the data points are given numbered from 0. Data point 0 has a value of 16, 1 of 17 etc. Kevin Marks wrote it up a few years ago. That gives sparkline graphics like the one below:
Now the next question is how to pull that data from somewhere and turn it into a HTML5 statement on the fly.
Since shortly after we moved in we have a temperature and humidity sensor in our garden.
This week’s heat wave is breaking records across Europe including here in the Netherlands. So I’ve kept an eye on the temperature in our garden. Our sensor is part of a city wide network of sensors, which includes two sensors nearby. Of the three sensors, ours indicates the lowest temperature at 36.8 (at 16:45), the other two hover just under 40 and at 41.8 respectively. Such differences are caused by the surroundings of the sensor. That ours is the lowest is because it’s placed in a very green garden, while the others are out on the street. In our completely paved and bricked up courtyard the temperature is 42.1 in the shade, due to the radiation heat of sun and stones. Goes to show that greenery in a city is key in lowering temperatures.
Three sensors in our neighbourhood, ours is in the middle, showing the lowest temperature. Note that the color scale is relative, for these 3 sensors running from 36.6 to 41.8.
In the past days since our return from France the temperature has been steadily rising, as per the graph below (which currently ends at the peak of 36.8 at 16:45). Staying inside is the best option, although the also increasingly higher lowest temperatures (from 15 to above 20) mean that the nights are slowly becoming more uncomfortable as the outside temperature will stay above the in house temperature during most or all of the night.
UPDATE as of 26/7 June noon, here you can see how the night minimum jumped 5 degrees in 24 hours, bringing it above the in house temperature for the entire night, except a brief moment around 6 am. At noon the maximum for the day before is already nearly reached.
The way to make this graph yourself is
Go to meetjestad.net/data, where you can select various data types and time frames. Our sensor is number 51, and I selected a time frame starting at July 19th at midnight. This allows me to download the data as CSV.
The data in that download is Tab separated, not comma,when you select a comma to be used as decimal point.
The file contains columns for the sensor number and its latitude and longitude, that are not needed as this is data for just one sensor. Likewise, empty columns for measurement values for which my sensor kit doesn’t contain sensors, such as particulate matter, can be removed. Finally the columns for battery level and humidity are also not needed on this occasion.
With the remaining columns, time and temperature it is easy to build the graph. In this case I replaced the timestamps with sequential numbers, as I intend to make a sparkline graph with it later.