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:
- Hover over a line to highlight it and get the entity and year.
- Click on an entity in the list to highlight its line on the graph.
- Click on the graph to see a list of the fragments that have that entity and reference that year.
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.