Skip to main content
SimilarExport ZIP
100%

Fork of Assignment 6: Line Chart with Color Legend

✓ Published1🌍 Public
NNita
Last edited Mar 4, 2025
Created on Mar 4, 2025

This visualization displays car fuel economy ratings from a small CSV dataset as an animated bar chart, with bars rising from the baseline and value labels fading in. Bar height encodes MPG values, while a sequential blue color scale doubles the encoding, accompanied by a vertical color legend. The chart uses D3 v7 scales and transitions, plus the d3-legend plugin, and includes interactive tooltips on hover.

AI-generated description
MIT Licensed

Similar vizzes

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
97% match
Loading thumbnail…

Assignment #6: Bar Chart with Color Legend

This example shows a bar chart of economy (MPG) values for eight car models, with car names on the x-axis and MPG on the y-axis. The chart is rendered as an SVG using D3 v7, loading data from a CSV file via `d3.csv`. Bars are drawn with `rect` elements, positioned using `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes created via `d3.axisBottom` and `d3.axisLeft`.

Mmhzahdeh@dons.usfca.edu
82% match
Loading thumbnail…

barChartWithLegendD3

This example presents a bar chart visualizing the fuel economy (MPG) of various vehicles, with bars sorted alphabetically by vehicle name and colored using a sequential blue color scale that encodes the MPG value. A color legend is included to map the color gradient to the data range. The chart is built using D3.js (v7) with SVG rendering, reading data from a CSV file and leveraging D3’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, along with the `d3-legend` library for the color legend.

Ccwb314159@gmail.com
82% match
Loading thumbnail…

Divergent Barchart with legend D3

This divergent bar chart visualizes the fuel economy (mpg) of various cars, with each bar diverging from the dataset’s average value. Bars extending right indicate above-average efficiency, while those extending left show below-average performance, with color encoding the magnitude of deviation using a red-blue sequential scale. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, rendering as SVG with axes and bar labels. Data is loaded from a remote CSV file via `d3.csv`, and the visualization is set within a tall 1000×4000 pixel canvas.

Ccwb314159@gmail.com
80% match
Loading thumbnail…

Assignment 6 -- Bar chart with a Sequential color scale

A bar chart displays average engine horsepower for seven car makes, sorted from lowest to highest, with a sequential red color scale encoding the horsepower value. The chart uses D3 v6 with SVG rendering, including axes, a color legend, and a tooltip that shows the exact value on hover. The code reads data from a CSV file, applies a quantized color scale from the ColorBrewer library, and uses the d3-legend API to generate the legend.

Vvishusikka
80% 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
80% match
Loading thumbnail…

Assignment #7 Multiple Line Chart

This example visualizes five automobile performance attributes—economy in miles per gallon, cylinder count, horsepower, weight, and 0-to-60 mph time—as a set of colored polylines plotted against car models from a CSV file. The chart reveals each model’s relative values across these disparate scales on a single axis. The code uses D3 v7 to load the CSV, define point and linear scales, draw the SVG paths with `d3.line`, and render axes with `d3.axisBottom` and `d3.axisLeft`. Each attribute uses a fixed stroke color, and a legend is constructed via `d3.scaleOrdinal`.

Mmhzahdeh@dons.usfca.edu
80% match
Loading thumbnail…

Fork of Assignment 5 - Bubble Chart

This bubble chart visualizes average horsepower versus average torque for various car brands, with bubble size encoding average highway MPG and color distinguishing each make. A black tooltip appears on hover, displaying the car brand. The visualization is built with D3 v7, using SVG circles, linear scales for axes, a power scale for bubble radius, and an ordinal color scale. Data is loaded from a CSV file, and the chart includes legends for bubble size and color categories.

SSumanya4
79% match