This page contains a few different data visualization demos, each utilizing a different framework and dataset. All data is stored locally in a JSON file and retrieved via jQuery when the page loads.
Each framework has its strengths and weaknesses so I've showcased them all using simple demos with favorable datasets, outlining the pros and cons below.
Planetary Comparisons (Vue.js)
Lines of JS: 25
Lines of HTML: 50
Vue is great for client-side UI manipulation, and the templating system is fairly intuitive. It lends itself well to dynamically creating a modular UI while using the data to control layout, content, and styling.
It's very easy to perform calculations within the HTML using Vue, so I've used the values printed below each planet (e.g. Diameter, Axis) to transform the images of the planets. If you look closely, each planet is rotated using CSS to match the natural axial rotation, and the image of Earth added for scale is likewise scaled using CSS according to the relative diameter of each planet.
Vue.js
Strengths
- Similar syntax to Angular and React
- Lightweight
- Intuitive binding and templating system
- Can access and update large, complex objects very quickly
Weaknesses
- Slight learning curve for more complex applications / component usage
- Benefits from local and low-overhead data calls (using something like JSON will be faster and more semantic than sql)
- Can be tempting to perform lots of logic in the UI, but performs best when complex calculations are done via computed values and local methods (and some would say that takes away from the UI-centric philosophy).
U.S. Populations (D3.js)
Lines of JS: 23
Lines of HTML: 0
Whereas Vue focuses on binding a UI to data so that both can be dynamically modified, D3.js is a great library for generating a semi-static UI based upon a dataset. That means that generating a chart or graph using a block of JSON is fairly easy; modifying that UI after it renders requires custom JS logic.
In my demo, I have pulled a list of U.S. population statistics for the past few decades, and then printed those values in the UI. Based upon the population value itself, I've modified the element containing the value to scale proportionally (as well as the font-size). In about 20 lines of code, D3 has converted a JSON array to a visual representation requiring minimal math / logic.
D3.js
Strengths
- Low learning curve for simple / 2D visuals
- Fairly simple to integrate multiple datasets in the same visual
- Supports easy integration of custom / vanilla JS
- Large selection of formats / types of visualizations
Weaknesses
- Higher learning curve for complex / 3D visuals
- Sparse documentation (beyond basic examples)
- Much of the logic / UI integration is reliant on the developer
Nobels by Nation (Chart.js)
Lines of JS: 60 (~30 lines of chart settings)
Lines of HTML: 1 (canvas tag)
Chart.js is capable of generating robust and aesthetically-pleasing visuals using HTML5 Canvas, but lacks flexibility from a developer perspective. Each of the frameworks used on this page are fairly quick to set up, with D3 being the fastest, Vue the slowest, and Chart depending mostly on the data itself. While it's quick to create a simple chart with static data, it takes a decent amount of manual effort to massage a complex object into something Chart.js can work with.
Chart works best (almost exclusively) with plain arrays, which means you have to parse your data and create those arrays if they don't exist already. This adds overhead to load time, and development effort, depending on the data structure. There is also very little in the way of helper methods, e.g. it's one line of code to loop through an entire file for each instance of a value; it's about 15 lines of code to count those occurrences and return the value.
Chart.js
Strengths
- Chart formats are robust enough to represent large datasets
- Uses canvas to create slick, responsive UI
- Pre-configured settings cover most general use cases
- Provides support for generating complex legends via HTML instead of pure canvas
Weaknesses
- Needs most data converted to a plain arrays, adding an extra step for complex datasets
- Generating the chart via canvas limits the amount of DOM manipulation that can occur outside of Chart.js logic
- Canvas element makes responsive charts difficult; Chart.js offers some responsive configuration options, but they are not very extensive
- Most necessary configuration values must be created manually, or via custom function, e.g. to generate the colors in the graph, I either had to write out one hex code for each country value (no thank you), or write a custom function that generates a random hex code by looping through the country list (which I did).
Planetary Comparisons
How does Earth stack up to its neighbors?
Powered by Vue.js and data from Wikipedia
{{ planet.name | capitalize }}
(Earth for scale)
- Your weight on {{ planet.name | capitalize }}: {{ weight * planet.relative_gravitational_modifier }}
- Gravity: {{ planet.relative_gravitational_modifier }} x Earth gravity
- Diameter: {{ planet.relative_equatorial_diameter }} x Earth diameter
- Mass: {{ planet.relative_mass }} x Earth mass
- 1 Year: {{ planet.orbital_period_years }} Earth years
- 1 Day: {{ planet.rotation_period_days }} Earth days
- Moons: {{ planet.confirmed_moons }}
- Axial Tilt: {{ planet.axial_tilt_degrees }}°
- Rings: {{ planet.rings | capitalize }}
- Atmosphere: {{ planet.atmosphere | capitalize }}