Reusable D3 Scatterplot with Default Values

100%

Reusable D3 Scatterplot with Default Values

✓ Published1🌍 Public

Last edited Jul 10, 2023

Created on Jul 9, 2023

This reusable scatterplot displays the Iris dataset, plotting petal width against sepal length with points encoded by species and adjustable point size, chart title, and axis labels. Built as a reusable D3 chart following Mike Bostock’s “Towards Reusable Charts” convention, it exposes setter functions for width, height, data, xValue, yValue, size, symbolValue, margin, and labels. The code uses D3 v3 APIs like `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Axis ranges extend 10% beyond data extremes, and all options except data fall back to defaults when unspecified.

AI-generated description

A reusable D3 scatterplot built following the convention layed out in Mike Bostock's Towards Reusable Charts

Allows specification of a number of values including the size of the points, the accessor functions for x and y values, the symbols to be used for points, the chart title, and axes labels. When any of the options are not set (except for the data value) default values are supplied.

Axis ranges by default extend 10% above and below the smallest and largest data points. This prevents points from running into the axes which I think looks bad. There is currently no defined method to alter this behavior.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Yyankesswang

92% match

Loading thumbnail…

Reusable D3 Scatterplot

This example demonstrates a reusable D3.js scatterplot that visualizes the Iris dataset, plotting petal width against sepal length. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and SVG circles for data points. The code implements a modular, configurable scatterPlot function with settable properties for width, height, data, margins, and radius, allowing the same visualization to be easily reused with different datasets or configurations. The rendering is fully SVG-based and fills the browser window.

Aajoua

91% match

Loading thumbnail…

Reusable D3 Scatter plot

This reusable scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length across iris species. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render SVG marks with distinct symbol shapes for each species, such as circles, crosses, and diamonds. The chart is built as a customizable function following the “Towards Reusable Charts” pattern, with setters for dimensions, margins, data accessors, and symbol size. Data is loaded from a GitHub Gist containing Fisher’s classic measurements.

JJuan Corrales Correyero

91% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot visualizing the Iris Dataset, with petal length mapped to the x-axis and sepal length to the y-axis. The implementation uses D3's `scaleLinear` for coordinate scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for labeled axes. The code demonstrates a custom `scatterPlot` function that accepts configurable parameters like dimensions, margins, data, and value accessors, enabling flexible reuse across different datasets. The plot renders as an SVG with circles sized by a configurable radius parameter, and the dataset is loaded via D3's `csv` function from a remote source.

Jjmetzg11alpine

90% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis, with each of the three species represented by a distinct symbol. The chart is built using D3's `scaleLinear`, `scaleOrdinal`, `extent`, `axisLeft`, `axisBottom`, and `symbol` APIs, rendered as SVG with a configured margin and symbol size. The implementation follows the "Towards Reusable Charts" pattern, exposing a configurable `scatterPlot` function that accepts data, value accessors, and layout parameters.

Aavvarijayakrishna99@gmail.com

90% match

Loading thumbnail…

Reusable D3 Scatterplot

This scatterplot displays the Iris dataset, plotting petal width against sepal length and encoding species with distinct symbols. Built as a reusable React component, it uses the D3.js library’s `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs, with marks rendered as SVG paths via the `symbol` function. The chart automatically sizes to the browser window, applies margins, and includes labeled axes, regenerating whenever input parameters change.

MMatthew Bruffey

90% match

Loading thumbnail…

Reusable scatter plot

This example shows a reusable scatter plot of the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species as symbol shapes. Built with D3.js, it uses a custom `scatterPlot` function that takes data, value accessors, and margin configuration, then renders SVG paths via the `symbol` and `symbols` APIs. It also applies `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `axisLeft`/`axisBottom` for tick marks, with data parsed from a CSV URL.

KKiran Jyothi Bodduluri-11604571

90% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis. It demonstrates a configurable D3 chart factory pattern, where the scatter plot function accepts chained setters for width, height, data, accessors, margins, and point radius. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render an SVG with circles and axes. The data loads from a GitHub Gist CSV file, and the visualization fills the entire browser window.

Ttrissentety

90% match