Lighting up the ESB with Twitter data during the Superbowl – Um, ok... how? – Ok. So your dashboard code, then?

View Github Repository Open presentation in a new window

jcnesci

See all presentation from jcnesci

Lighting up the ESB with Twitter data during the Superbowl – Um, ok... how? – Ok. So your dashboard code, then?

0 0

SDJS-talk-d3

Slides for SDJS talk about D3.

On Github jcnesci / SDJS-talk-d3

Lighting up the ESB with Twitter data during the Superbowl

--- and how D3.js was used to visualize the data --- JC Nesci sosolimited.com @sosolimited

Wait, what?

Um, ok... how?

So I built this internal dashboard to visualize our live data...

But wait, what's D3.js?

It's a charting library in Javascript. There are many others but this one was built by Mike Bostock and Jeff Heer who are at the forefront of the datavis renaissance.

Here's an example

Ok. So your dashboard code, then?

Let's switch over to Sublime, shall we?

But first, what's the shape of the data?

Let's look at 1 minute of confidence.

{
  "question": "game",
  "type": "confidence",
  "afc_team": "broncos",
  "nfc_team": "seahawks",
  "afc": [
    {
      "value": 0.5727699530516432,
      "time": [
        2014,
        1,
        31,
        23,
        3,
        59
      ]
    }
  ],
  "nfc": [
    {
      "value": 0.6851851851851852,
      "time": [
        2014,
        1,
        31,
        23,
        3,
        59
      ]
    }
  ]
}

Let's make some time-series charts

  • global vars for all charts : dimensions, scales, axes
  • specific vars for each chart : setup_charts()
  • format the raw data, do some averaging : format_raw_data()
  • draw charts one by one : draw_chart()

The real deal : a realtime app in the VPH

A quick taste of MISO

  • framework for building reusable charts
  • again, try the bar chart example and discover chart.draw()

Resources