pseudo-scatter-plot-with-d3

100%

pseudo-scatter-plot-with-d3

✓ Published0🌍 Public

Last edited Jun 23, 2025

Created on Jun 23, 2025

Forked from Clickable Circles with D3 Rosetta

This example presents a clickable scatter plot rendered with D3.js and the d3-rosetta utility library, which enables unidirectional data flow. It loads data from a CSV file containing circle positions, radii, and colors, and renders them as interactive SVG circles. When clicked, a circle becomes highlighted with a black stroke and raised to the front. The visualization demonstrates d3-rosetta’s `unidirectionalDataFlow`, `createStateField`, and `one` utilities, along with D3’s `select`, `csv`, and data joins for updating the DOM.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Clickable Circles with D3 Rosetta

This example demonstrates interactive selection and highlighting of circles in a scatter plot. The visualization renders six circles from a static dataset using D3 selections, and clicking any circle updates the application state, which re-runs the rendering function to apply a white fill and thick stroke to the selected point. It uses the `d3-rosetta` library's `unidirectionalDataFlow`, `createStateField`, and `one` utilities within a React-free, vanilla JavaScript setup, leveraging D3 v7 for DOM manipulation and event handling.

CCurran Kelleher

86% match

Loading thumbnail…

Scatter Plot with D3 Rosetta

This example shows an interactive scatter plot of the Iris dataset, visualizing sepal length and width with points colored by species. The visualization includes a legend that highlights data points of a species when hovered. It demonstrates the d3-rosetta library's unidirectional data flow pattern, using `one` for DOM element management and `createStateField` for state handling. The code uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` within a React framework.

CCurran Kelleher

82% match

Loading thumbnail…

Clickable Circles with D3 Rosetta

This example shows a scatterplot of BMW car models positioned by x and y coordinates, with clickable circles that highlight the selected model in white with a black stroke while resetting others to black. Built with D3 v7 and the d3-rosetta library’s unidirectional data flow, it uses `setupSVG` with `one` to manage the SVG, `renderCircles` with `join` for circle rendering, and `setupClickInteraction` to handle click events that update state via `createStateField`. The data comes from a static dataset of car sales records.

BBismark Kofi Owusu Sarfo

82% match

Loading thumbnail…

Clickable Circles from CSV

This example displays a scatterplot of colored circles loaded from a CSV file, where clicking a circle highlights it with a black outline. Built with React and D3 v7, it uses the `csv` function to parse data and the `select` API with a `join` operation to bind circle elements to each data row. The `selectedId` state triggers a re-render, applying the stroke style via a conditional attribute.

CCurran Kelleher

81% match

Loading thumbnail…

Loading and Parsing Data

This example demonstrates asynchronous data loading and parsing in a React-free D3 visualization, showing a loading indicator before rendering clickable circles from a CSV file. Using d3-rosetta's unidirectional data flow and `createStateField`, it manages state transitions from loading to succeeded or failed. When data arrives, `d3.csv` parses the x and y columns, then `renderCircles` draws circles that respond to clicks via `setupClickInteraction`, with `highlightSelectedDatum` visually distinguishing the selected point.

CCurran Kelleher

80% match

Loading thumbnail…

Circles with D3 and React

This example renders a scatterplot of 14 colored circles on an SVG canvas using React and D3. Each circle’s position, radius, and color come from static data defined in a separate JavaScript module. The visualization integrates React’s `useRef` and `useEffect` hooks with D3’s `select` method to bind data and create circle elements via `join`. The D3 v7 code applies `attr` setters for cx, cy, r, and fill properties.

CCurran Kelleher

78% match

Loading thumbnail…

D3 Partial Scatter Plot

This example renders a scatter plot using D3 version 6 within a React-compatible setup, drawing circles with SVG. It loads the Iris dataset from a GitHub Gist, parses numeric fields, and maps petal length to the x-axis and sepal length to the y-axis using `d3.csv` and `d3.scaleLinear`. The code uses `d3.extent` for domain calculation and `d3.select` to append and join circle elements, with each point positioned via scaled coordinates.

CCurran Kelleher

78% match

Loading thumbnail…

D3 Example

This scatterplot shows a small set of pink circles positioned within a 250×250 SVG canvas, with a large yellow title in the Jua font above it. The visualization reads data from a remote CSV file hosted on GitHub, parsing each row with `d3.csv` and passing the parsed objects to a custom function named `a_name`. That function uses the D3.js library (version 3.5.5) to bind data to circles, appending new circles, updating their `cx` and `cy` attributes based on the `x` and `y` values from the data, and removing any circles for removed records. The rendering is done via SVG, and the circle fill color and text styling are defined in the page’s CSS.

PPabloDA

77% match