Skip to main content
SimilarExport ZIP
100%

task 9 and 10 Hello VizHub

✓ Published1🌍 Public
Ssruthimreddy6@gmail.com
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This example displays a scatter plot of the Iris dataset, encoding petal length and width for each flower, with points colored by species. It uses D3 v6’s `scaleLinear`, `extent`, `csv`, `axisLeft`, and `axisBottom` APIs to load data from a GitHub Gist and render the plot as SVG circles. The visualization also includes custom axis labels and a legend for the three iris species.

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…

Task 9 & 10 Tutorial

This animated tutorial demonstrates the capabilities of VizHub by cycling through different iris flower measurements on a scatter plot. The visualization uses D3.js v6 via UNPKG, loading data from a CSV file containing sepal and petal dimensions for three iris species. The code imports local ES6 modules, including a reusable scatterPlot component that handles axis scaling and rendering. Every few seconds, the plot switches which measurement appears on the x-axis, while points remain colored by species. The example also shows how to build custom legends, labels, and titles using SVG elements.

Mmrowanh21@gmail.com
88% match
Loading thumbnail…

Task-8

This example visualizes the Iris dataset with a scatter plot, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to load data, position circles, and render axes as SVG, with data sourced from a GitHub-hosted CSV. Colors are assigned via a switch statement, and axis labels are added as SVG text elements.

Ppraneeth7222@gmail.com
85% match
Loading thumbnail…

Fork for Task 9 & 10 Tutorial

This interactive scatter plot visualizes the Iris dataset, cycling through different petal and sepal measurements on the x-axis every few seconds. It uses D3.js to render colored circles representing three species, with a legend and axis labels updating dynamically. The visualization employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, while a `setInterval` timer animates the transitions between dimensions. Data is loaded via `d3.csv` from a remote GitHub gist, and the SVG rendering includes custom styling for titles and annotations.

Ssamithareddy9@gmail.com
84% match
Loading thumbnail…

task 9 and 10

This animated scatter plot displays the Iris dataset, cycling through four flower measurements on the x-axis while maintaining sepal length on the y-axis. Using D3.js, the visualization updates every few seconds via `setInterval`, re-rendering axes and circles with `scaleLinear`, `axisLeft`, and `axisBottom`. Each species is color-coded, with SVG shapes drawn from CSV data loaded via `d3.csv`. The reusable `scatterPlot` function handles the dynamic updates, while custom text elements provide labels, a legend, and a title.

Sskykarthik97@gmail.com
84% match
Loading thumbnail…

Task 8 tutorial 3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes, with points colored by species (setosa, versicolor, and virginica). The chart uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data from a GitHub-hosted CSV and render the SVG. In addition to the petal measurements, the code accesses sepal length and width values, though these are not plotted in the visible marks. The visualization includes custom-styled axis labels and colored circles with a fixed radius.

YYeshwanth963@gmail.com
84% match
Loading thumbnail…

Activity8_Task-3

This D3.js (v6) scatterplot visualizes the Iris dataset, plotting petal length against petal width on the x- and y-axes while encoding species with colored circles (skyblue, lightgreen, and orange). The chart displays labeled axes and a title, with points rendered as SVG circles and scaled using linear scales derived from the data extent. It loads the CSV from a GitHub Gist, parses numeric fields, and uses D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The visualization includes a rotated y-axis label and a bottom axis label, though the code references undefined `innerHeight`/`innerWidth` variables.

HHarika Metta
84% 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
84% match
Loading thumbnail…

Task-8(Q3)

This example displays a scatter plot of the Iris dataset, visualizing petal length against petal width with points colored by species (setosa, versicolor, virginica). The visualization uses D3 v6 to load CSV data, map values through `scaleLinear` and `extent`, and render SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with labels rotated via `transform`, and the chart fills the browser window using `window.innerWidth` and `innerHeight`.

Ttallurisaiteja96@gmail.com
84% match