DaveCumin

@DaveCumin·3 public vizzes

Fork of Reusable D3 Scatter Plot with Symbols 2

This example displays the Iris dataset as a scatter plot, encoding petal width on the x-axis, sepal length on the y-axis, and species as distinct shapes using D3’s `symbol` API. It uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and `axisBottom`/`axisLeft` for ticks. The plot is rendered as an SVG, sized to the full window, and loads data from a CSV URL via `d3.csv`. The reusable `scatterPlot` function configures margins, symbol size, and value accessors.

Apr 24, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x- and y-axes. Each species is encoded with a distinct symbol, demonstrating a reusable D3 scatter plot component that can be re-invoked with different data, as seen when it renders a smaller test dataset. The implementation uses D3’s `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` APIs to generate SVG paths, with axis rendering via `axisLeft` and `axisBottom`. The animation and interactive resizing are not fully implemented, but the code includes a framework for updating the chart’s width.

Apr 24, 2023

Loading thumbnail…

Fork of D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with an input field that adjusts the x-axis domain. The code uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, with `transition().duration(1000)` animating axis rescaling and circle repositioning when the domain changes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG viewport uses `preserveAspectRatio` for responsive scaling.

Apr 14, 2023