Last year, the ZingChart team made a humble New Year's Eve dashboard for exploring how people were ringing in 2014. This year, we've updated the dashboard to be more engaging:

  • We added more cities to the JavaScript map
  • We implemented a sleek new color scheme and chart styling
  • We included a live data chart

screenshot of zingchart new year

The dashboard can be viewed at:

JS Chart Components

  • We wrote a function to add second level city markers based on XY position (using 'getxyposition' method) instead of calculating them by hand, like we did last year.
  • City markers now use label objects instead of image and shape objects. When the Google map-style pins we used last year overlapped, we used shape areas to make visible parts clickable. This year, with double the cities, we used circular shapes to allow for better clickability.

Dataviz Principles

  • We implemented a design that scales to different devices using Twitter Bootstrap and table display CSS values.
  • We designed a new color palette for the dashboard that would be easier on the eyes. BUT we still tested it for usability in case some viewers experience color blindness. One of our initial swatches showed some colors that were indistinguishable for Protanopia-type color blindness. So we made a slight variation to accommodate these users.
    trial color palette for the JavaScript dashboard  selected color palette for javascript dashboard
  • We designed the dashboard to be comprised of blocks to keep all the information and chart data from flowing together.

Visualizing Twitter Data

The time series chart visualizing the volume of New Year's Eve-related tweets is live up to the moment the dashboard is rendered. It pulls the most recent mentions on Twitter of New Years Eve hashtags within the city's area (based on coordinates).

JavaScript and Chart Performance

  • We rewrote the code to make only one call to the ZingChart 'addobject' method when drawing city markers on world view. This new call adds an array of objects instead of making one call per object.
  • We streamlined loading of ZingChart map modules using zingchart.loadModules();
  • We pulled chart JSON out of page and put them in separate .js files. This keeps the code workspace clean and easier to use.
  • And we performed some miscellaneous code cleaning... always good to do periodically with projects that hang around over time.

How Will You Celebrate?

We hardly expect you to stay in at midnight clicking on our dashboard... Let us know how you will welcome 2015 in the comments below. And Happy New Year from everybody here at ZingChart!