'Reusable' D3 Scatter Plot with Curranians Symbol with Title

100%

'Reusable' D3 Scatter Plot with Curranians Symbol with Title

✓ Published1🌍 Public

Last edited May 9, 2021

Created on May 9, 2021

Forked from Reusable D3 Scatter Plot with Curran's Symbols

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Reusable D3 Scatter Plot with Curran's 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.

FFelipe Maion

88% 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

87% 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

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…

Hello VizHub 3

This example demonstrates a dynamic scatter plot rendered using D3 version 7.8.5, where circles appear one by one with an animated radius expansion. The visualization reads data from a CSV file containing circle positions, sizes, and colors, and uses the D3 `transition` API with `easeLinear` for both slow entrance animations and fast updates. A grid of ten blue squares animates across the top of the canvas, while the circles use `mix-blend-mode: multiply` for overlapping color effects. The SVG is sized to the container’s dimensions and the entire scene animates on a yellow-green background.

CCurran Kelleher

74% match

Loading thumbnail…

VizHub Users Scatterplot B&W

This scatterplot displays the growth of VizHub’s user base over time, with each circle representing a recorded date and corresponding user count. The data originates from a CSV file containing dates and cumulative user totals. The visualization uses D3 v6’s `scaleLinear` for both axes, `extent` to set domains, and `axisBottom` and `axisLeft` for ticks. Circles are rendered via SVG, and the chart fills the browser window with fixed margins, using a black-and-white design for clarity.

AAndre J Denais

74% 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