Department for Business, Innovation & Skills

COMTRADE Map Presentation

30 Apr 2015

Francesco Merletti
@mjs2020
@mjs2020
[email protected]

Doing a bit of Javascript, Node, Angular and D3 among other things.

The COMTRADE Database

Main features:

  • A repository of official trade statistics
  • Statistics dating back as far as 1962
  • Offers an API
  • Structured data
  • > 3 billion records
0000

Why a visualization?

  • To provide an easier query interface
  • To give insights into the data
  • Live access to the data

Sneak preview...

Trade for a reporter

Top exported goods

Top imported goods

Top export markets

Top import markets

Features we're planning

  • Walkthrough for first time users
  • SVG/PNG download of charts
  • Embedding

The visualization is still under development but weekly builds are available here:

http://analysis.bis.gov.uk/UN-trade-in-goods

(And a development version here)

The main technical overview

  • Single page application
  • Responsive
  • Uses D3js, Crossfilter, Bootstrap, jQuery, Historyjs
  • Packaged with Grunt, Bower, Requirejs

Challenges

The obstacles we faced

  • Size and complexity of the data
  • Query limits
  • Query complexity
  • Complex metadata
  • Need for a query middleware

Lessons

(learned?)

If we had to do it again...

  • Map out the dataset and all user interaction
  • Stick to few, multipurpose libraries
  • Test regularly on different browsers/platforms

... we would do it better

  • Accessibility!
  • More user testing

Making it work

(on the less cutting-edge browsers)*



*Any reference to real browsers, in development or discontinued, is purely coincidental.

Browser requirements

  • Javascript
  • SVG (caniuse.com reports 94.5 support as Apr 2015)
  • XHR Object with CORS enabled
  • History API (optional)

Look mum no SVG!

The New York Times Electoral visualization in 2012

http://elections.nytimes.com/2012/ratings/electoral-map

Look mum no SVG! (2)

Rendering to <canvas>

Better performance across browsers

Easy to export to bitmap files

Less interactivity

No vector export

Detect features, not browsers

  • Customizable: detect only what you need
  • Shivs and Polyfills

Let libraries do some heavy lifting

Many of the common open-source and widely used libraries like D3, jQuery, Bootstrap, Underscore/lodash level off slight inconsistencies between browsers.

Responsiveness

  • Design for small screens first
  • Same HTML, adapted for screen sizes with CSS
  • Media queries:
    
    @media (max-width: 768px) {
      #main,
      #charts {
        padding-top: 183px;
      }
      #charts {
        margin-top: 183px;
      }
    }
                    

D3, SVG and responsiveness

  • Viewport
    
      viewBox="0 0 1920 1080"
      preserveAspectRatio="xMidYMid meet"
      width="547" height="485"
                    
  • window resize event
    
    $(window).on('resize', function () {
      rowchart.resizeSvg(svg, $chart.width());
    });
                    

Thank you

Francesco Merletti
@mjs2020
@mjs2020
[email protected]

Link to these slides: http://fm.to.it/trademap