Skip to main content
SimilarExport ZIP
100%

Episode 9 - Reusable Charts (GIRIBAW) w/ Symbols

✓ Published0🌍 Public
Eemberix@gmail.com
Last edited Jun 4, 2021
Created on Jun 3, 2021

This example demonstrates a reusable scatter plot built with D3 v6, visualizing the classic Iris dataset with petal width on the x-axis and sepal length on the y-axis. The scatterPlot.js module creates a configurable chart function that uses d3.scaleLinear for axes, d3.scaleOrdinal to map species to different d3.symbol shapes, and d3.symbol to generate the path data. Data is loaded asynchronously via d3.csv from a GitHub Gist. The chart is rendered as an SVG, with the reusable pattern allowing custom setters for dimensions, margins, accessors, and symbol size.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Episode 9 - Reusable Charts (GIRIBAW)

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The chart is built using D3 v6 and rendered as SVG, with circles sized by a configurable radius and axes drawn using `axisLeft` and `axisBottom`. The code defines a `scatterPlot` function with a fluent API for setting width, height, data, margins, and value accessors, then invokes it via `svg.call()`. Data is loaded asynchronously from a remote CSV using `d3.csv`.

Eemberix@gmail.com
94% match
Loading thumbnail…

Episode 10 - Reusable Charts w/ Idempotence (GIRIBAW)

This visualization demonstrates reusable scatter plots using the D3.js library, rendering an SVG of the Iris dataset. The chart cycles through four attributes—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds, with sepal length fixed on the y-axis. The code uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and the `join` pattern for idempotent updates. Data loads from a GitHub Gist via `d3.csv`, and the plot’s configuration (width, height, margins, radius, accessor functions) is set through a chained getter-setter API.

Eemberix@gmail.com
89% match
Loading thumbnail…

Reusable Charts + symbol

This example demonstrates a reusable scatter plot built with D3 version 7, visualizing the classic Iris dataset. The chart encodes sepal length against petal width, with each species represented by a distinct symbol (circle, cross, diamond, etc.) and color-coded (blue, green, red) using `d3.scaleOrdinal` and `d3.symbol`. The code uses `d3.csv` to load data and a custom `scatterPlot` function with setters for dimensions, margins, and accessors. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, with the plot updating through `selection.join` for dynamic data binding.

Aadventuresenglish.info@gmail.com
88% match
Loading thumbnail…

Reuseable D3 Scatter Plot Exercise with Symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width and sepal length on the x and y axes while using different D3 symbols to distinguish species. The chart is built as a custom `scatterPlot` function that leverages D3 scales like `scaleLinear` and `scaleOrdinal`, along with `axisLeft`, `axisBottom`, and the `symbol` generator to render SVG paths. Data is loaded asynchronously via `d3.csv`, and the plot is rendered into a full-window SVG using a React-compatible approach.

Ppkdvalis
87% match
Loading thumbnail…

Ep. 09 Reusable Charts Scatter Plot

A reusable D3.js scatter plot displays the Iris dataset, plotting petal length against sepal length. Each point is colored by species using `scaleOrdinal` with `schemeCategory10`, and includes a hover tooltip via an appended `title`. The example uses a builder-pattern API to configure the plot, with `scaleLinear` for axes and `axisLeft`/`axisBottom` for ticks. SVG circles are rendered with transitions on hover, managed through D3's selection and join operations. Data is loaded asynchronously from a CSV URL and parsed with numeric coercion.

Ddanheavern
86% match
Loading thumbnail…

Reusable D3 Scatter Plot - Ep9

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. It uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to generate the axis ticks. The plot renders circles with a fixed radius in an SVG that fills the browser window, with margins applied using d3-selection’s append and attr methods. The code is written in D3 v7 and is the ninth episode in a series on building reusable visualizations.

SSam Hege
86% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example shows a reusable D3 scatter plot displaying the Iris dataset, with each species represented by a distinct symbol (circle, diamond, and triangle). The chart maps petal length on the x-axis and sepal length on the y-axis, using axes generated with `d3.axisLeft` and `d3.axisBottom`. The implementation uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` and `d3.symbol` to assign symbols to species, and a modular JavaScript structure with getter-setter functions to configure width, height, margins, and accessor functions. Data is loaded via `d3.csv` from a GitHub gist URL.

TTheo-0201
86% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example illustrates a reusable D3.js scatter plot that visualizes the classic Iris dataset, mapping petal width against sepal length and using different symbols to distinguish species. The implementation leverages D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to create a flexible, configurable chart component. The code loads data from a remote CSV file, parses numeric fields, and renders the plot as an SVG using a custom `scatterPlot` function with settable properties like margins and symbol size.

OOleg Zhernovoy
86% match