Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub Q2 vk

✓ Published1🌍 Public
Vvikramkotlo9@gmail.com
Last edited Apr 7, 2024
Created on Apr 6, 2024

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.

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 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.

Vvikramkotlo9@gmail.com
90% 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
88% 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
87% match
Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three flower species, with each species color-coded as skyblue, lightgreen, or orange. The visualization uses D3 v6 to load CSV data, create SVG circles, and generate axes with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code maps the data fields to plot coordinates, with axis labels for petal and sepal measurements, providing a clear comparison of the dataset’s dimensions.

LLakshmiPrasannaValdas@my.unt.edu
87% 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
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Hello VizHub tutorial 3.1

This example displays the Iris dataset through a scatter plot, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load CSV data, apply linear scales with `d3.scaleLinear`, and render circles in an SVG container. It also draws axes via `d3.axisBottom` and `d3.axisLeft`, with labeled axis text, and handles the full window size for the plot area.

LLakshmiPrasannaValdas@my.unt.edu
86% match
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays an area chart of iris sepal lengths against sample ID. The D3.js code uses `d3.csv` with `d3.autoType` to load and parse the data from a gistfile, filters it, and then applies `d3.scaleLinear` for both axes. It renders the visualization as an SVG, using the `d3.area` generator to create the filled path and `d3.axisBottom` and `d3.axisLeft` for the axes with labels.

Ssohith kampalli
85% 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
85% match