Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Assignment 6: Line Chart with Color Legend

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.

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

Fork of Fork of Activity6_Task3.2.6

This visualization displays a scatter plot of vehicle data, showing the relationship between horsepower and highway fuel efficiency (MPG). Each point is shaped according to the car manufacturer, with a shape legend identifying the makes. The plot axes are labeled for both variables. The example uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render the marks and axes, with data loaded from a remote CSV file.

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

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

IILYAS AHMED
79% match
Loading thumbnail…

Fork of Activity6_Task2

This horizontally stacked bar chart displays average horsepower, torque, and highway MPG by car make, using a color-coded segment for each spec. The data is loaded from a CSV file and rendered as SVG rectangles via `d3.stack()`, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. UI text uses custom fonts, and the visualization includes axis labels and a title.

IILYAS AHMED
79% match