Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
Mmn0658
Last edited Jun 28, 2023
Created on Jun 28, 2023
Forked from Hello VizHub

This scatter plot visualizes data points positioned along linear x and y scales, with categorical shapes encoding a third dimension. The chart includes labeled axes and a custom shape legend displaying the category symbols. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol()` to generate the mark paths, while modular ES6 imports handle axes and legend rendering. The visualization is built in VizHub, leveraging local modules and UNPKG for D3 loading.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Shape

This scatter plot displays data points as geometric shapes on a two-dimensional grid, with labeled axes reading "x" and "y" values. The visualization uses D3 v7’s `select` and `join` APIs to manage SVG elements, while the `axes.js` module leverages `axisLeft` and `axisBottom` from `d3` to render the coordinate system’s ticks and labels. The code defines a reusable `viz` function that receives a container and state, updating the chart whenever the `setState` callback modifies the state object. The example’s data source is not specified, but the rendering relies on D3’s declarative selection and node-joining patterns to construct the scatter plot.

Ssriharshithaanugu5@gmail.com
83% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows a scatter plot of the Iris dataset, displaying sepal length against petal length with points shaped by species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map categorical species data to distinct shapes. The visualization also implements a custom shape legend and axes as local ES6 modules, with data loaded remotely via `csvParse` from a GitHub-hosted CSV file.

NNagateja99
82% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes automobile data from a CSV file, plotting Horsepower against Mileage with points colored by vehicle Make using distinct shapes. The scatter plot uses D3 scales for axes and an ordinal scale mapped to symbol types via `symbolsFill`. A custom shape legend explains the mapping. The code demonstrates D3 v7 modular imports, including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`, while handling data loading asynchronously through `d3.csv` and updating the visualization via a state-based render loop.

Bbogasamudramvamsikrishnareddy
81% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes sales data, showing the relationship between total sales and date, with points shaped according to product type. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to map data values to positions and shapes. A legend explains the product-to-shape mapping. The chart loads CSV data from a GitHub repository and renders with axes and labels for both dimensions.

Kkandulasunny17@gmail.com
81% match
Loading thumbnail…

ACT 6 TASK3.2

This scatter plot example uses D3 v7 to visualize data points with various shapes, mapping an additional categorical dimension through shape encoding. The visualization implements a custom axes module with axis labels, and a shape legend that displays the mapping between categorical values and symbol types. The code demonstrates importing specialized modules from local ES6 files and uses D3's scales, including `scaleLinear` and `scaleOrdinal`, along with `symbol()` from the `d3` namespace to generate the shapes for each data point.

BBhavana Sharma
81% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal lengths along the axes while encoding species with distinct D3 symbol shapes. The visualization includes a shape legend for species identification. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to render marks, along with custom axis and legend modules. Data loads asynchronously via CSV parsing, and the plot updates dynamically through a state management system.

Hharsha
80% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example displays Fisher’s iris dataset as a scatter plot of sepal versus petal length, encoding species with different filled shapes. It builds on D3 v7 APIs—d3.scaleOrdinal, d3.symbolsFill, d3.symbol, and axis functions—to generate custom SVG paths for each mark and a dedicated shape legend. A reusable axes module applies left and bottom scales with labeled axes. Data is loaded as CSV from a GitHub repository and parsed with d3.csvParse before being converted to numeric values.

Pperamranji
80% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example displays Fisher’s iris dataset as a scatter plot of sepal versus petal length, encoding species with different filled shapes. It builds on D3 v7 APIs—d3.scaleOrdinal, d3.symbolsFill, d3.symbol, and axis functions—to generate custom SVG paths for each mark and a dedicated shape legend. A reusable axes module applies left and bottom scales with labeled axes. Data is loaded as CSV from a GitHub repository and parsed with d3.csvParse before being converted to numeric values.

Pperamranji
80% match