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

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

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());
  });