I want to explore rendering charts via static site generators. Here are a couple of libraries that are easy to integrate.
In this post, I plot open data from NYC 311 call records using:
-
chart.xkcd - a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
-
vega-lite - a high-level grammar of interactive graphics.
Raw data is available here, or viewed interactively via my test post on DataTables.
Here’s a peek at raw csv data.
Unique Key,Created Date,Closed Date,Agency,Agency Name,Complaint Type,Descriptor,Location Type,Incident Zip,Incident Address,Street Name,Cross Street 1,Cross Street 2,Intersection Street 1,Intersection Street 2,Address Type,City,Landmark,Facility Type,Status,Due Date,Resolution Description,Resolution Action Updated Date,Community Board,BBL,Borough,X Coordinate (State Plane),Y Coordinate (State Plane),Open Data Channel Type,Park Facility Name,Park Borough,Vehicle Type,Taxi Company Borough,Taxi Pick Up Location,Bridge Highway Name,Bridge Highway Direction,Road Ramp,Bridge Highway Segment,Latitude,Longitude,Location
42254749,04/18/2019 09:55:45 PM,04/19/2019 03:45:24 AM,NYPD,New York City Police Department,Noise - Residential,Banging/Pounding,Residential Building/House,11235,3855 SHORE PARKWAY,SHORE PARKWAY,BRAGG STREET,BELT PARKWAY WB KNAPP STREET EN,,,ADDRESS,BROOKLYN,,Precinct,Closed,04/19/2019 05:55:45 AM,The Police Department responded to the complaint and with the information available observed no evidence of the violation at that time.,04/19/2019 03:45:24 AM,15 BROOKLYN,3088060140,BROOKLYN,1002973,152924,PHONE,Unspecified,BROOKLYN,,,,,,,,40.5863974,-73.9325913,"(40.5863974, -73.9325913)"chart.xkcd
chart.xkcd uses JSON to define axis and dataset, but does not come with any data loading APIs.
Since I don’t want to write data wrangling code via javscript, I manually enter pre-aggregated complaint counts into JSON definition below.
Top 10 NYC 311 Complaint Types
Overall, chart.xkcd is simple to use, looks nice, and tooltip works out of the box.
vega-lite
It is fairly easy to integrate vega-lite.
vega-lite offers vastly more flexibility in terms of data aggregation, sorting, filtering, and rendering options, but it’s also harder to debug.
Summary
I think both libraries have their usecases. I would use chart.xkcd to illustrate a point that only requires a few synthetic data points. Meanwhile, vega-lite’s data aggregation, sorting, and filtering options makes it much more versatile for use with real datasets.