About the graph

I spent my Christmas in Bergen, Norway, and was hit by quite a big difference in daily sunlight compared to Portland, Oregon. I decided to find the difference per day over the coming year and ended up with the graph above.

I calculated the hours of sunlight using the excellent PyEphem library, and exported the data to a JSON file. This could then easily be read and plotted with D3. The full source code can be found on bitbucket.

Exploration of the graph is done by hovering it. This changes the axes by showing only a few tick marks: the specific date hoverd and the precise daylight values. In the case where values on the y-axis would overlap, they are pushed away from each other. So instead of we get . This was done simply, and some would say hacky, by modifying the DOM after D3 has done its drawing.

I also nudged the month names over to the right so instead of having "January" on January 1st, it's centered within that month. This communicates better that January isn't one data point, but the whole range of points within that month. Compare to

Search for nudge in app.js to see how I implemented these modifications.

Johannes Hoff, January 2014
johannes@johanneshoff.com