Exploring the D3 Javascript Library




D3 is a Javascript library for data visualization. The above is my first visualization using D3. It's called a Streamgraph visualization. The data shown is random. Each time you reload the page, the visualization will look different because it will generate new random data.
To create the visualization I started with an example Streamgraph on the D3 website and removed the code for transitions. I changed the data and the data handling code so that each layer would have a label. I created mytooltip.js, so that when you mouse over, a custom tooltip appears with the layer's label. This will be crucial when we have real data.

Google Flu Trends


Above is my second visualization using D3. It is a Stream Graph visualization of Google Flu Trends estimate of flu in the United States.[1] Thicker bars for higher numbers. Each band is a region of the US made up of a group of states. Mouse or touch a band to explore and you'll see a tool tip with the flu activity estimate in that region on that date. The specific numbers "can be interpreted as the estimated number of Influenza Like Illness cases per 100,000 physician visits." [1] But more importantly the visualization shows the relative difference over the years and the seasonal nature of the flu. It also shows that even though it's early in the flu season, this season already shows higher flu activity than any year in this 10 year dataset.

[1] "Data Source: Google Flu Trends (http://www.google.org/flutrends)"

Text Exploration


Above is my third visualization using D3. It is a line chart that interacts with tables, for text exploration. It shows a data set of fragments from articles that are health specific (have medical entities) and reference a year. Each line in the graph represents one of the entities, which are listed to the left of the graph. The height of the line is the number of fragments in the data set that have that entity and reference that year. This line chart may not be the most effective visualization for this dataset because of the occlusion but I wanted to add another chart type as I learn more about D3. A streamgraph may work for these entities.
Interactions supported:

Text Exploration


Above is another visualization of the same dataset as the line graph below. Each dot is collection of text fragments with one of the entities and referring to one of the years. The dots are darker colored when there are more fragments. Click on a dot to see a list of the fragments.
Note: If you're not able to see or interact with the visualization, it may be because you're using a browser that doesn't support some of the functionality needed. Internet Explorer version 8 or lower, for example. In that case you might want to try Google's Chrome browser.