Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published1🌍 Public
Rrushithareddyy
Last edited Jun 28, 2023
Created on Jun 28, 2023

This scatter plot visualizes the relationship between sepal length and petal length for three iris species, using different symbol shapes to distinguish species categories. The visualization loads CSV data from a GitHub-hosted iris dataset, converts numeric fields, and renders it with d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to assign shape encodings. A custom shape legend displays the mapping between species and symbols. The code relies on d3.csvParse, d3.extent, and the d3.symbol generator to create the marks.

AI-generated description

The impact of genre on movie ratings

This stacked bar chart gives the percentage of each rating level within different movie genres. The aim is to show the impact of genre on movie ratings. When the mouse hovers over each bar, you can see pop-ups of accurate percentage of each rating level within each genre. Total percentage is 1, representing 100%.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The chart distinguishes the three iris species by drawing each data point with a unique symbol, using the `symbolsFill` scale and the d3 `symbol()` generator to assign different glyph shapes. A legend on the right side, built with `d3.scaleOrdinal`, identifies the species associated with each shape. The plot reads data from a remote CSV file, parsing it with `d3.csvParse` and rendering the visualization using d3's join-based API for efficient updates.

Ppardha1411
95% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with species differentiated by symbol shapes from d3.symbol and d3.scaleOrdinal. A custom shape legend displays each species’ symbol, while d3.axisBottom and d3.axisLeft render labeled axes. The code loads data via d3.csvParse from a GitHub-hosted CSV and uses d3’s join pattern to update SVG elements.

NNukaShravanKumar
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with species distinguished by different symbol shapes. The visualization uses d3.scaleOrdinal with symbolsFill to assign distinct shapes to each species, rendered via d3.symbol and path elements. A custom legend shows the shape-to-species mapping, while axes are generated using d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and fetched from a GitHub repository, with numeric fields coerced before rendering.

Ppardha1411
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

A scatter plot shows sepal length against petal length for the Iris dataset, with each species represented by a distinct symbol shape and a legend mapping species to shapes. The visualization loads CSV data via `fetch` and `csvParse`, then renders marks using D3’s `symbol`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill`. Axes and labels are added through custom ES6 modules (`axes.js`, `scatterPlot.js`) using `axisLeft`, `axisBottom`, and D3 selections.

LLakshmanRangisetti
94% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal width for three iris species—setosa, versicolor, and virginica—using distinct symbols for each species. A custom legend maps species to shapes, generated via d3.symbol and d3.scaleOrdinal. Axes are rendered with d3.axisLeft and d3.axisBottom, while the plot is built as a reusable scatterPlot function called within an SVG container. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Ggeethikal
94% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Each point’s shape encodes the iris species, with a legend mapping the three species to distinct symbols. The visualization uses D3.js and its `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position marks and generate glyph shapes. Data is fetched from a remote CSV file and parsed with `csvParse`. The chart includes labeled axes and a shape legend, both styled via D3’s `axisLeft` and `axisBottom` helpers.

Hharsha
94% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses SVG symbols from d3.symbol and d3.symbolsFill to differentiate species by shape, with a custom legend showing the shape-to-species mapping. The code imports from d3 modules (d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, d3.extent) to build scales, axes, and marks, while asynchronously loading and parsing the iris dataset from a remote CSV via d3.csvParse.

BBhavanaGIrni
94% match
Loading thumbnail…

Scatter Plot with Shape

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization loads CSV data via `fetch`, parses it with `d3.csvParse`, and renders circular, triangular, and other shapes using `d3.symbol` and `symbolsFill`. A custom shape legend, built with `scaleOrdinal`, identifies species, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart updates responsively to the browser window size.

Cchsaisriharsha@gmail.com
94% match