Data Visualization with D3.js
Learning exercises using D3.js for data visualization on the Web.
3 Demonstrations included, that showcase graphs, force simulation, animations, color mapping, mouse hover tooltips and interaction.
Try it here: http://13.38.23.80/d3/
In this experiment, we demonstrate D3.js’s built-in force simulation capabilities, where objects can attract, repel, and collide with one another, creating an engaging visual experience.
Here, the input data is simply the user’s text input, and the size of each circle in the visualization represents how many times each character appears in the text.
This example uses D3.js to create a bar chart from a CSV file, with added animations.
Users can toggle between male and female cases, and the bars smoothly transition to reflect the selection, allowing for a clear comparison.
Tooltips display Y-axis values on mouse hover, and case numbers are shown above each bar to make it clear when there is data distortion because of too few cases.
This experiment features a heatmap where each square represents instances when two variables match, with color intensity indicating frequency.
The data, from a CSV file, includes smoker status (smoker, ex-smoker, non-smoker) and chest pain type (heart-related, asymptomatic, etc.).
For example, asymptomatic non-smokers appear in the bottom-right square, while the adjacent darker square shows more non-smokers with non-heart-related pain.
Tooltips on hover display exact case counts. This is a good example of color mapping, as D3.js dynamically generates color scales based on the data range.
