D3 demosΒΆ

  • Visualize genome sequence reading errors


    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.

  • Visualize a NFL game


    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


Javascript ajax technology is used to connect to yahoo finance webservice to get realtime quote (15 minutes delay) every minute, and chart is updated automatically. This demo can be applied to similar real time data graphing projects, such as instrument reading.

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.

  • Position widgets to mark a curve fluctuation


    This demo focus on user interaction rather than plotting. And the javascript programming pattern : module.

    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.

  • CCT Direcotory spin


    Adopted from this D3 demo, spinning gears with teeth grinding on each other perfectly – this demo shows off CCT’s multi-discriplinary organization, and emphasize on interaction and collaboration. :)

    Art work by Brittany Ball.