D3 Example
This example visualizes the classic Iris dataset as a scatter plot using SVG, with axes and interactive hover effects that highlight individual points. The visualization is built using a reusable reactive architecture called Reactivis, which leverages D3’s data joins and scales to map sepal/petal measurements to x and y positions. It responds fluidly to browser resizing, as the layout dimensions are driven by CSS and propagated through the reactive data flow. The plot is styled with a dotted border, white background, and Poiret One font, and includes axis labels and tick formatting. The code is derived from a screencast tutorial and demonstrates how to structure D3 visualizations for reusability.
AI-generated descriptionThis is a scatter plot of the Iris data set.
The purpose of this example is to show one approach to isolate reusable reactive flows that are reusable between visualizations, in an API called Reactivis, which stands for "reactive visualizations". This approach allows one to generalize D3 patterns ad infinitum.
Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.
The code for this is derived from example 106 of the screencast Introduction to D3.js.