Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published2🌍 Public
Vvikramkotlo9@gmail.com
Last edited Apr 6, 2024
Created on Apr 6, 2024
Forked from Hello VizHub

This example shows the distribution of sepal lengths across Iris species using an interactive SVG pie chart. The chart displays the percentage of each species in tooltips and includes a legend. It loads the Iris dataset from a CSV URL using D3's `csv` function, then renders the visualization with `pie` and `arc` generators from the D3 6.7.0 library. The code also demonstrates importing D3 via UNPKG and using the `select` and `append` DOM methods to build the SVG.

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…

Fork of Fork of Hello VizHub Q2 vk

This example displays a pie chart from the Iris dataset, showing the distribution of petal lengths by species. Built with D3.js (version 6.7.0), it loads data from a GitHub Gist via the `d3.csv` function, transforms it, and renders an SVG. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.stack` and `d3.area` to create the chart, and `d3.axisBottom` and `d3.axisLeft` for tick marks. A title labeled "Petal Length Distribution" is added above the plot.

Vvikramkotlo9@gmail.com
90% match
Loading thumbnail…

Fork of Hello VizHub

This pie chart displays the distribution of three Iris species in the classic dataset, with each slice labeled by species and a color-coded legend below. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute slice paths, while `d3.rollup` aggregates row counts from a CSV loaded via `d3.csv`. SVG paths and text elements are rendered inside a centered group, with a separate HTML legend built from `d3.scaleOrdinal` color mapping.

Ssohith kampalli
90% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, virginica). The code loads CSV data from a remote URL using d3.csv, applies linear scales with d3.scaleLinear, and renders SVG circles positioned via d3.selectAll and .join. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart dimensions adapt to the window size.

Ssaivaishnogaruda@gmail.com
88% match
Loading thumbnail…

Fork of Hello VizHub

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol. The example uses the D3.js library, specifically its `scaleLinear` for axes, `scaleOrdinal` for the shape scale, and `symbol` to generate the marks. A custom shape legend, built via a separate module, identifies the species. The data is loaded asynchronously from a CSV file hosted on GitHub, and the visualization fills the browser window.

Ssaivaishnogaruda@gmail.com
88% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the axes while using distinct symbols to represent the three iris species. The visualization loads the CSV data asynchronously via `fetch` and `csvParse`, then renders it with `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` generators. Axis labels and a shape legend are added through modular helper functions. The plot uses d3.v7’s data join pattern, showing how shape encoding distinguishes categorical values in a quantitative scatter plot.

Hhkodiripaka15@gmail.com
88% match
Loading thumbnail…

Fork of Hello VizHub

This example shows a scatter plot of iris flower measurements, using sepal length and petal length as axes and distinct symbol shapes to encode the three species categories. The visualization includes a shape legend labeled “Species” to identify the species associated with each symbol. The code uses D3 v7 APIs such as `d3.csvParse`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.symbolsFill` to render the marks, while an axes module builds the chart scaffolding with `d3.axisLeft` and `d3.axisBottom`. Data is fetched from a GitHub-hosted CSV of the classic Iris dataset.

Ssusarlasruthi2000@gmail.com
88% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica). The visualization uses D3 v6 via UNPKG, loading data with `d3.csv`, scaling with `d3.scaleLinear`, and rendering axes with `d3.axisLeft` and `d3.axisBottom`. Circles are appended to an SVG, with fill colors assigned per species and petal dimensions determining x- and y-positions. The chart includes labeled axes and a fixed radius for all points, sourced from a remote CSV hosted on GitHub.

Ssusarlasruthi2000@gmail.com
87% match
Loading thumbnail…

Fork of Hello VizHub Divya Anusha Chandrupatla

This example displays a scatterplot of the Iris dataset, plotting sepal length against sepal width as steelblue circles. It uses D3.js v6 to load data via CSV, compute linear scales with `d3.scaleLinear` and `d3.extent`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output includes axis labels using SVG text elements. The visualization also exemplifies VizHub's ES6 module import through a message component and a separate `script.js` file that fetches the dataset from a GitHub gist.

Ddivyaanushachandrupatla@my.unt.edu
87% match