Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub Divya Anusha Chandrupatla

✓ Published0🌍 Public
Ddivyaanushachandrupatla@my.unt.edu
Last edited Apr 29, 2024
Created on Apr 29, 2024
Forked from Hello VizHub

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.

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

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
89% 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 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

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis variables to visualize petal and sepal measurements across three species. The visualization uses D3's `scaleLinear` for axes and a custom `scatterPlot` module to manage the chart's geometry. It incorporates a color-coded legend for species, axis labels, and a title, with data loaded via `d3.csv` from a remote URL and rendered as SVG circles. The animation shifts the x-axis among four measurement columns at regular intervals.

Jjasthilavanya2022@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 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
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 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
87% match