Reusable D3 Scatter Plot with Curran's Symbols

100%

Reusable D3 Scatter Plot with Curran's Symbols

✓ Published2🌍 Public

Last edited May 9, 2021

Created on May 8, 2021

Forked from Reusable D3 Scatter Plot with Symbols

This example visualizes the growth of Curran Kelleher's YouTube channel subscribers over time, plotting each data point as a custom SVG path resembling a person. The visualization uses D3 v6 to load a CSV file, parse dates, and build a scatter plot with time and linear scales for the x and y axes. A unique "Curran" symbol path is applied to every point, with hover tooltips showing the total subscriber count and date via appended `<title>` elements. The code demonstrates D3's reusable chart pattern with getter and setter methods.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

'Reusable' D3 Scatter Plot with Curranians Symbol with Title

This visualization shows the growth of Curranians on the VizHub Planet over time, with each data point rendered as a custom SVG path of the Curranian symbol. The scatter plot maps dates on the x-axis and user counts on the y-axis, with hover tooltips revealing exact values. The code uses D3 v6 modules including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and a custom path definition from `paths.js`. Data originates from a CSV file containing date and user count pairs, rendered as an SVG with configurable margins and axis labels.

FFelipe Maion

88% match

Loading thumbnail…

Scatterplot of Curranians on VizHub Planet

A scatterplot tracks the growth of registered Curranians on VizHub Planet over time, with each point representing a date and the corresponding number of users. The visualization uses D3.js, loading data from a CSV and mapping dates to the x-axis and user counts to the y-axis. Each data point is rendered as a custom SVG path shape of the Curran logo, scaled and positioned within a white background box. Axis labels clarify that the plot measures dates in the Gregorian calendar against the total number of Curranians.

FFelipe Maion

75% match

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot demonstrates how to build a modular D3 chart with configurable accessor functions. It visualizes the Iris Dataset using a user-defined `xValue` and `yValue`, rendering SVG circles scaled with `d3.scaleLinear` and axes via `d3.axisLeft` and `d3.axisBottom`. Every two seconds, the plot cycles through different columns—petal width, sepal width, petal length, and sepal length—updating the x-axis and circle positions through a set interval that re-calls the chart function. The example uses D3 v6 and follows the "Towards Reusable Charts" pattern, packaging the scatter plot as a closure with setter methods for width, height, data, margins, and radius.

CCurran Kelleher

75% match

Loading thumbnail…

Curranians on VizHub Planet

This scatter plot visualizes the growth of registered users on VizHub over time, from August 2018 to April 2021. Each data point is rendered as a small custom SVG path of a face, scaled and positioned using D3’s `scaleTime` and `scaleLinear`. The code uses `d3.csv` to load the data, `axisLeft` and `axisBottom` for the axes, and `selection.append('path')` with a pre-defined path string from a separate `paths.js` module.

FFelipe Maion

75% match

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This reusable scatter plot displays the Iris dataset, mapping petal width and sepal length while encoding species with distinct D3 symbols. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types, and a custom `symbol` generator to render SVG paths. The chart renders into a full-window SVG and includes labeled axes with a large font size.

CCurran Kelleher

75% match

Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example presents a reusable scatter plot of the Iris Dataset, with each species represented by a distinct D3 symbol (circle, square, or triangle) and color. Users can cycle through different x-axis variables—petal width, sepal width, petal length, or sepal length—by clicking a button, triggering a smooth transition on all marks using `d3.transition`. The chart is built with D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisBottom`/`axisLeft` for rendering. Data is loaded via `d3.csv` from a GitHub Gist, and the SVG output animates axis and symbol updates over one second.

JJuanmaBV

74% match

Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap

74% match

Loading thumbnail…

Reusable D3 Scatterplot w/ symbols

This example shows a reusable scatterplot rendered with SVG that maps iris flower measurements—petal length against sepal length—using distinct D3 symbols to differentiate species. The chart includes axes, labels, and a legend-free encoding of the categorical species variable through symbol shapes. Built with React and D3 v3, the code defines a configurable `scatterPlot` function using `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate paths. Data is loaded asynchronously from a CSV using `d3.csv`, with numeric parsing applied to the measurement columns.

Ccardoza-IPH

74% match