This demo may not be useful in reality but serves as an example of D3 Sankey flow chart
Assume you have 10 readings of a segment of genome, each reading is split into 4-mers (reference: k-mer). This demo plot all readings as a flow, when there is a difference among readings for a specific position, the flow splits out, and then merges back when the readings become homogeneous again.
How to plot a NFL game? In this demo I draw the field and mark the yard lines, draw each progression as a line with starting point marked. The two teams are color-coded of course. And then I draw the scoring as dashed line to the end zone, with points marked. Finally, several groups of annotation can be added to the plays, such as unsuccessful plays, and penalties.
Don’t stop here! The game can be animated, drawing each progression separately as time pass forward, implemented using D3.transition
web service used:
http://query.yahooapis.com/v1/public/yql?q=select * from yahoo.finance.quotes where symbol in ('AAPL')&env=store://datatables.org/alltableswithkeys
As shown in this demo, multiple symbols can be queried at the same time and plotted in the same chart, but there will be a problem that the y axis scale can be very different among the symbols. So maybe plotting in multiple subchart with different y scale might make more sense. See an example in the next chart: US Lower 48 states crude oil production.
The shale oil fracture technology has rapidly changed the dynamics of U.S. crude oil production, import/export, and WTI spot price in the late years. More crude oil reserves are found at basins such as Bakken and Permian.
This demo plot the US lower 48 states crude oil proved reserves and productions over the years 1977 to 2013, as line graph, and on a US lower 48 states map. Animate them through the years to see the change.
To draw maps using D3, see Bostock’s tutorial Let’s make a map
Giving a randomly generated curve, uses are provided marker widgets to mark any specific positions according to the curve fluctuation.
The widgets are really just little rectangles draw on the webpage, but they can be picked, dragged, added and removed, and fitted to the curve’s height. All of the widget information, such as poisition, height, selection status, etc. can be collected and save into json data object.