Visualization Hosted on GitHub Pages
This project was a remix on a visualization hosted by the U.S. Energy Information Administration.
The original visualization displays the net generation, in thousand megawatthours, of coal, natural gas, nuclear, and conventional hydroelectric energy from 2001 to 2020. This is a very well made visualization, including tooltips, customizable range, as well as a linked table of individual values. I created a new version of this vis with the goal to summarize the results by year and clearly show proportional differences between each energy type through a linked barplot.
The remixed version of this visualization is displayed below:
Reference on d3.bisector()
Refrence on building a legend in d3
Reference on building a barplot in d3
Due to the lack of textual labeling of the line plot, it was important to make the visualization colorblind friendly. I selected the color scheme from David Nichols' Colorblind Palette. Each of the four colors used are distinctive for true vision, and individuals with protanopia, deuteranopia, or tritanopia. In order to make the interactive portion of the visualization as intuitive as possible, I included a vertical line which tracks mouse movemenent. This intersects each of the 4 lineplot lines at the values displayed on the barplot.
In order to make the barplot scaling smooth, with a dataset that only had one value per year, I used an interpolator. The d3.interpolateNumber() function generated an interpolator between the start and end dates nearest to the mouseover. This enabled the calculation of an artificial value within the range of the two true y-values available for each energy type.