Fork of Reusable scatterplot

100%

Fork of Reusable scatterplot

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This example visualizes the classic Iris dataset, showing the relationship between petal length and petal width. Each flower is drawn as a distinct SVG path symbol, with different symbol types corresponding to the three Iris species, and color encoding species using the viridis scale. The code imports from D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for symbol and color mapping, and the `symbol` generator to create shapes. It loads data from a CSV file hosted on GitHub and renders within a full-screen SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and using distinct symbols for each species. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` to render SVG paths, with axes generated via `axisLeft` and `axisBottom`. The chart is built through a reusable `scatterPlot` function configured with margin, size, and accessor methods. Data is loaded as CSV from a GitHub gist and parsed into numeric values.

Vvamshisoletii

93% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This visualization displays the classic Iris dataset, mapping petal width against sepal length across three flower species. Built with D3 v6, it renders as an SVG scatter plot using distinct geometric symbols from `d3.symbol` and `d3.symbols` to differentiate species. The code employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` for symbol mapping, and D3 selections with the `.join()` pattern to bind data to paths. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with axes generated through `d3.axisLeft` and `d3.axisBottom`.

Mmboinapally17

92% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the classic Iris dataset as a scatter plot, 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 visualization is rendered as an SVG using D3 v6, leveraging a reusable `scatterPlot` module that employs `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to position marks and axes. Data is loaded asynchronously from a CSV URL, and the plot fills the browser window, with axes labeled via D3's tick rendering.

NNeeharikaGali

92% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three species. The plot encodes species identity through distinct D3 symbols, including a custom square symbol, and uses D3’s `scaleLinear` for axes and `scaleOrdinal` for symbol mapping. Data is loaded via `d3.csv` and rendered as SVG paths, with axes generated using `axisLeft` and `axisBottom`.

Pprachow

92% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from D3’s `symbol` and `symbols` APIs, with positions scaled using `scaleLinear` and axes drawn via `axisLeft` and `axisBottom`. The chart is built with a reusable `scatterPlot` function in D3 v6, rendering SVG shapes whose paths are generated by `symbolGenerator`, and loaded asynchronously from a CSV URL.

Ggeethanjalikotaru

92% match

Loading thumbnail…

Fork of Reusable scatter plot for different styles

This example demonstrates a reusable scatter plot visualizing the Iris dataset, with species distinguished by different D3 symbol shapes (circles, crosses, and diamonds). It maps petal width and sepal length to x/y positions using `d3.scaleLinear`, and uses `d3.scaleOrdinal` to assign symbols to species. The code employs `d3.axisLeft` and `d3.axisBottom` for axes, and renders the marks as SVG paths generated by `d3.symbol`. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

Ssnehareddygurram

92% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal length and sepal width to the x and y axes while encoding species with distinct symbols. It uses a reusable D3 module pattern, with the `scatterPlot` function configuring scales, axes, and symbol generation. The code leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisBottom`/`axisLeft` to render SVG paths for each data point, sized at 100 pixels. The plot fills the window and fetches data from a GitHub Gist URL using `d3.csv`.

SSANEEM MOHAMMAD

92% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from the `d3.symbols` collection, using the `scaleOrdinal` scale. The visualization uses `scaleLinear` for axes, `axisLeft`, and `axisBottom` for ticks, and renders as an SVG. The code creates a reusable `scatterPlot` function that accepts data, value accessors, and margin settings, with data loaded from a CSV file.

DDonald Bagwell

92% match