atmr0

@atmr0·2 public vizzes

Fork of Fork of D3 Starter

This example demonstrates how to set up a D3 force simulation and a scatter plot using reusable modular functions. It imports `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3, along with the `d3-selection-multi` library for chainable `.attrs()` calls. The visualization appends an SVG to the body sized to the full viewport, runs `d3.forceSimulation` on a single data point, and updates circle positions on each simulation tick. A separate `scatterPlot` module builds axes and marks from data arrays using linear scales and margins.

Nov 21, 2023

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Nov 17, 2023