Fork of Question 4: Multi-Series Chart (Bar + Line)

100%

Fork of Question 4: Multi-Series Chart (Bar + Line)

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

Forked from Question 4: Multi-Series Chart (Bar + Line)

This fork of “Question 4” presents two SVG charts built with D3 v7. The first is a multi-series line chart with circular markers, displaying average sepal and petal measurements for three Iris species. The second is a combined bar-and-line chart that juxtaposes the same aggregated data, using the `d3.scalePoint` and `d3.scaleLinear` APIs for positioning. Gridlines, axes, legends, and a title are generated with D3’s `axisBottom` and `axisLeft` methods, while smooth lines use `d3.curveMonotoneX`. The data consists of precomputed averages from the Iris dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This visualization combines a multi-series line chart and a grouped bar-and-line chart to explore the Iris dataset. The top chart plots sepal length against petal length for each species, using d3.line paths and a d3.scaleOrdinal color legend. The bottom chart displays average sepal and petal widths per species using d3.scaleBand rectangles for bars and a d3.line path with circles for the petal-width trend. All data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and rendered as SVG with axes from d3.axisBottom and d3.axisLeft.

Mmaddulanagasanjana@gmail.com

81% match

Loading thumbnail…

Fork of Question 4: Multi-Series Chart (Bar + Line)

This fork of Question 4 displays a multi-series bar and line chart comparing average car price and horsepower for ten brands. The visualization reads a CSV file containing car attributes and uses D3 v7 scales and axes with dual y-axes: blue bars represent average price in USD, while a red monotone curve with dots shows average horsepower. The chart animates bar growth and line fading through `transition().duration()`, with gridlines, rotated x-axis labels, axis labels, a title, and a legend generated via D3 selections.

Kkovuribalanagavinay@gmail.com

78% match

Loading thumbnail…

Fork of CHPATER 3 PRACTICE 3.4

This fork of Chapter 3 Practice 3.4 renders the classic Iris dataset as a set of eight SVG strip charts, each plotting one numeric attribute or species category along a horizontal axis. The visualization shows distributions for sepal length, sepal width, petal length, petal width, sepal ratio, petal ratio, petal area, and species using circles. Built with d3 v7 and SVG, it uses d3.csv to load the data and d3.scaleLinear for positioning. Each row’s title is added via a custom renderTextLabel function, with species color-coded by category.

BBismark Kofi Owusu Sarfo

77% match

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the classic Iris parallel coordinate plot visualizes four flower measurements—sepal length, sepal width, petal length, and petal width—with colored lines for the three Iris species. Users can drag any axis to reorder the dimensions, which dynamically rearranges the paths and updates the axis positions. The code uses D3 v5 with `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, `d3.line`, and `d3.drag` to render SVG paths and handle interactive reordering with smooth transitions. The data comes from the bundled `iris.csv` dataset, with species distinguished by color.

Eevonne0930.cs11@nycu.edu.tw

76% match

Loading thumbnail…

Assignment 6 - Q3

This visualization of the Iris dataset presents two complementary charts: a multi-series line chart tracks sepal length, sepal width, and petal length across all 150 samples, while a combined bar and line chart displays species counts alongside average petal width. The code uses D3.js v7 with SVG rendering, employing `d3.csv` to load data, `d3.line` for the line paths, and `d3.rollups` to aggregate species statistics. Hover effects on bars and custom color schemes enhance interactivity.

AAKSHAY

76% match

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart visualizes the Iris dataset as a scatterplot, plotting petal length against sepal width as circles with tooltips on hover. The React and D3 v5 code uses `scaleLinear`, `extent`, and `format` from d3 to handle scales and tick labels, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG axes and data points. Data is loaded asynchronously via `csv` from a GitHub gist, with styling applied through Poppins fonts and CSS classes.

Ssb15jr@student.aau.dk

76% match

Loading thumbnail…

Fork of Activity6_Q2.3

This stacked bar chart visualizes the Iris dataset, showing the distribution of four flower measurements (sepal and petal length/width) across three species. The visualization uses the d3.stack generator to create the layered bar segments, with d3.scaleBand and d3.scaleLinear handling the categorical and continuous axes respectively. Each species group displays four colored segments corresponding to the measurement variables, rendered as SVG rectangles within the D3.js v6 framework. The chart is interactive only through standard browser zoom, with axis labels and tick marks formatted using D3's axis functions.

Ssriyaalugupalli@my.unt.edu

76% match

Loading thumbnail…

Fork of Activity-6 t2 Q3

A stacked bar chart displays Iris flower measurements, with each species row divided into segments for sepal length, sepal width, petal length, and petal width. The chart reads data from a CSV file and renders it as an SVG using D3 v7. It employs `d3.stack()`, `d3.scaleLinear()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` to construct the visualization, with a custom tooltip showing exact values on hover.

Aaashrithas2000@gmail.com

76% match