Advisory on why the visualization resizes nodes bigger than the SVG window. This is intentional. The site is designed to be blatantly curt with statistical data that is undeniable. To confirm and fact check aggregated data please feel free to visit https://systems.jhu.edu/
Node.jsJavaScriptD3 libraryHTML 5CSS 3
The CIBC is a feature rich data visualization that works on the D3.js library. It enables the user direct, asynchronously updated elements through the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University. Users will be able to choose between available statistics such as recovery rate per country, current and new cases.
- Intuitive and brave design that not only engages the Client, but allows for ease of flow through app while providing informational guidance in bottom left.
- With D3.js, the technology affords our user a seamless experiencing while parsing our targeted data and iteratively redrawing SVG elements to our measurements.
Because of D3's integrated force sim, free-flowing nodes were realized. Force sim enables under-the-hood redrawing of nodes based on their x,y position in the
contained window. With respect to each node's circumfrence we are able to calculate to the perfect measurement to prevent overlapping and stagnant positioning.
Force charge is leveraged in the opposite sense where conventionally it would be used to group nodes of a tree data structure together, but instead by setting
it to a negative value were we able to achieve repulsion contingent of each node's relative measurements.
Movement is simulated with our ticked function which changes the positioning of each node and separate label coordinates each frame of our function.
- Client is able to render visually comparable data based on their choice of below options.
Our code below shows how D3 allows us to accomplish the feature above by binding our data points and re-rendering them with the chosen parameter.
By default, we size each datapoint(node) according to recovery cases.
But with our passed argument filter we can achieve dynamic rendering.
- Client is able view data based on selected a selected state(node) giving an in-depth analysis of each node's bound data.
- Github Pages
- Implement side by side comparison of two states my choice
- Include data comparison for countries