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

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car brands, sorted from lowest to highest, with each bar colored according to a sequential red color scale that encodes the horsepower value. The visualization loads data from a CSV file using d3.csv, binds it to SVG rectangles, and uses d3.scaleBand, d3.scaleLinear, and d3.scaleQuantize for positioning and color mapping. Interactive tooltips appear on mouseover, while d3.legendColor adds a legend, and axes are rendered with d3.axisBottom and d3.axisLeft.

SShishiraRudrabhatla

83% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale New

This bar chart displays the average horsepower for seven car brands, sorted in ascending order and colored with a sequential red scale that maps horsepower values to color intensity. Built with D3 v6, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` to position and color the bars, while a tooltip appears on mouseover. The rendering is SVG-based, with axes, a color legend, and animation effects, drawing data from a CSV file named `barchart.csv`.

Pprateek

83% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

A sequential bar chart displays average horsepower for seven automobile brands, sorted from lowest to highest, with color intensity increasing alongside value. The visualization uses D3 v6 to construct SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, while a `d3.scaleQuantize` maps horsepower values to a seven-step reds palette from colorbrewer. Hovering reveals a tooltip with the exact value, and an interactive legend and axes are generated using `d3.legendColor` and axis components. Data comes from a CSV file provided in the accompanying `barchart.csv`.

JJim Luo

82% match

Loading thumbnail…

Fork of Fork of Fork of A7: Line Chart

This multi-line chart displays average horsepower trends from 2010 onward for four car brands—Audi, BMW, Toyota, and Ford—using data from a CSV file. The visualization uses D3 v6 with an SVG rendering approach, applying `d3.rollup` to compute yearly averages per make and `d3.line` to draw the paths. It incorporates a categorical color scale via `d3.scaleOrdinal` and a legend generated by the d3-legend plugin. Axes are built with `d3.axisBottom` and `d3.axisLeft`, and missing data values are handled using the line generator’s `.defined` method.

Yyunxiaqian@gatech.edu

81% match

Loading thumbnail…

Fork of question_3

This example shows a scatter plot of car data, mapping horsepower on the x-axis and highway MPG on the y-axis. Each circle is colored by the car’s make, with a legend listing the makes. The visualization loads CSV data via `d3.csv` from a GitHub repository, scales axes with `d3.scaleLinear`, and assigns colors using `d3.scaleOrdinal` with `schemeTableau10`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, and the SVG is created with D3 v6 selections.

JJaswanthkota@my.unt.edu

81% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower of car makes, sorted from lowest to highest, with a sequential color scale from light to dark red indicating increasing values. It uses D3 v6 with SVG rendering and includes interactive tooltips on hover, as well as axis labels and a legend. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleQuantize` with `colorbrewer.Reds[7]` for the color mapping. Data is loaded from a CSV file and filtered to seven specific makes.

Lliu yang

81% match

Loading thumbnail…

Fork of Fork of Bar chart with a Sequential color scale

A horizontal bar chart displays the average horsepower of seven car brands, from Volkswagen to Mercedes-AMG, sorted in ascending order. Bars use a sequential color scale from the ColorBrewer Reds palette, rendered as SVGs via D3 v6, with a hover tooltip showing exact values. The code loads data from a CSV, applies `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize`, and uses the d3-legend library to generate a color legend.

Mmavercikalvin

80% match

Loading thumbnail…

Fork of Fork of Assignment 6: Line Chart with Color Legend

This visualization displays car fuel economy data as a horizontal bar chart, with each bar colored on a blue sequential scale according to its miles-per-gallon value. The visualization loads data from a CSV file and renders animated bars that grow from zero width, using d3.scaleBand and d3.scaleLinear for positioning and a d3.scaleSequential with d3.interpolateBlues for color encoding. It includes a color legend built with d3-legend and a linear gradient, plus interactive tooltips and value labels shown via d3 transitions.

NNita

80% match