Vonnie

@Vonnie·3 public vizzes

Dynamic Animated Reusable D3 Scatter Plot

This visualization is a reusable scatter plot that dynamically cycles through different feature pairs from the Iris Dataset. It uses D3’s `selection.join` API to animate the data points and axes as the plotted columns change every three seconds. Circles transition smoothly between positions via D3’s `transition` API, with a staggered delay for a wave-like effect. The chart is rendered as SVG and demonstrates a modular, reusable chart component.

May 27, 2021

Loading thumbnail…

NASA Near Earth Objects Scatter Plot

This scatter plot visualizes NASA Near Earth Objects, plotting each object’s velocity in thousand miles per hour against its distance from Earth in million miles. The D3.js v6 code loads data from a CSV file hosted in a GitHub gist, parses numeric fields, and uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render an SVG with circles for each object. Axis labels are added as SVG text elements, and the chart fills the browser window, with margins controlling the layout.

May 13, 2021

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes CDC COVID-19 data, plotting daily new deaths against new cases, with each point representing a 14-day moving average. The chart reveals a general correlation where more infected cases correspond to more deaths. Built with D3 v6, the visualization uses `d3.csv` to load the dataset and `d3.scaleLinear` to map values to screen coordinates, with points rendered as SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire browser window.

May 8, 2021