Fork of Responsive Scatter Plot

100%

Fork of Responsive Scatter Plot

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This interactive scatter plot visualizes the Penguin dataset, encoding sepal and petal measurements along the axes while using distinct colors and symbols to differentiate species. Built as a reusable D3 chart, it uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.symbol` for shape encoding, and renders points as SVG paths. A `setInterval` cycles through the four measurement columns every two seconds, dynamically reassigning the x-axis value and updating the chart via the reusable chart function.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Responsive Scatter Plot

This example presents an interactive scatter plot of the Penguin dataset, mapping petal width and sepal length with additional dimensions encoded through point size and symbol shape. Built with D3 v6, the visualization uses SVG and animation to cycle through four column pairings every 2 seconds, automatically updating the x-axis and point positions. Species are distinguished by color (Chinstrap, Gentoo, Adelie) and symbol, with a legend and title displayed on screen. The plot is designed as a reusable chart component, making it easy to adapt to different datasets or axes.

Ttejasrikotipalli1@gmail.com

94% match

Loading thumbnail…

Fork of D3 Scatter Plot

This interactive scatter plot visualizes a penguin dataset, encoding sepal length, petal length, and sepal width through the x-axis, y-axis, and point radius, respectively, while petal width drives a rainbow color scale. Built with React, it uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, `axisLeft` and `axisBottom` for axes, and `interpolateRainbow` for color mapping. The SVG circles are rendered dynamically, with a full-window layout and tick labels styled at 24px.

Ssnehareddygurram

86% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping petal length, sepal length, sepal width, and petal width to the x-axis, y-axis, circle radius, and rainbow color scale, respectively. The code loads data with `d3.csv`, applies `d3.scaleLinear` to set domains and ranges, and renders SVG circles with `d3.selectAll().join()`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the color encoding uses `d3.interpolateRainbow`. The visualization fills the browser window, with tick text enlarged via CSS.

Ssnehareddygurram

86% match

Loading thumbnail…

Reusable Scatter Plot

This interactive scatter plot visualizes penguin measurements, cycling through different feature pairs on the x-axis with a timed animation. Built with D3.js, it uses an ES6 module (scatterPlot.js) to define a reusable chart component. The plot colors points by species (Adelie, Gentoo, Chinstrap) using D3's `scaleLinear` and `axisLeft`/`axisBottom` APIs, and loads data from a remote CSV file via `d3.csv`. The SVG rendering includes a legend and axis labels, with the animation triggered by `setInterval`.

LLakshmanRangisetti

85% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguins Dataset by plotting bill length against flipper length. Each circle represents a penguin, with its position determined by these two measurements, and the semi-transparent teal fill reveals overlapping data points. The visualization is built with D3, using `scaleLinear`, `extent`, and axis label helpers to render the scatter plot. It also incorporates `observeResize` from `@RelaxingSoul/res-axis` to handle responsive dimensions, and the SVG elements are managed through D3's `select` and `join` methods.

Oownerofthesoul0000@gmail.com

85% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes a fork of the Penguin dataset, mapping each observation’s Perigee_km on the x-axis and Apogee_km on the y-axis, while coloring circles by species (Adelie, Gentoo, or other) and encoding bill length and depth as rectangle radii (rx, ry). The code uses d3.csv to load the data, d3.scaleLinear and d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes, rendering SVG circles via a data join. Axis labels and a title are added with SVG text elements.

Vvryvarma5577@gmail.com

84% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example displays a scatter plot of penguin data that cycles through different x-axis attributes every two seconds, showing how the distribution shifts when petal width, sepal width, petal length, or sepal length is plotted against sepal length. Data points are colored by species (setosa, versicolor, virginica) using blue, red, and yellow fills, with white axis labels and strokes. The visualization builds a reusable chart using D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `setInterval` for animation. It loads CSV data from a GitHub gist and renders SVG circles on a black background.

Ddheeraj1509

84% match

Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the penguin dataset, mapping petal length and width as x and y coordinates while sepal length and width are redundantly encoded as circle radii. The D3 v6 code loads CSV data, applies linear scales, and renders colored circles for each species using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`. The SVG output uses the `join` operator to create marks, with axis labels styled in red and purple.

RRahulChaitu999

84% match