Assignment #7 Multiple Line Chart

Last edited Mar 10, 2025

Created on Mar 10, 2025

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

AI-generated description

MIT Licensed

Similar vizzes

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

82% match

Assignment #5 Bubble Chart

This bubble chart compares fuel economy (mpg) against the number of cylinders for eight car models from a CSV file, with each car positioned along the x-axis and its economy value plotted on the y-axis. The visualization uses D3 v7's `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` to render axes. Instead of traditional bars, it draws a line path using `d3.line`, mapping car names to x-coordinates and economy values to y-coordinates, with the y-axis explicitly sized to cylinder counts via a second linear scale. The SVG output is styled with steelblue strokes, and the chart title is displayed above the plotting area.

81% match

Vvineelaviswanadham07@gmail.com

DV A6 T3

This visualization shows a parallel coordinates plot for six numeric car attributes—miles per gallon, cylinders, displacement, horsepower, weight, and acceleration—with lines colored by the vehicle’s origin (USA, Japan, Europe) using a small embedded CSV dataset. Using D3 v7, the code constructs vertical linear scales for each dimension via `d3.scaleLinear` and `d3.extent`, positions axes with `d3.scalePoint` and `d3.axisLeft`, and draws the polylines with `d3.line()`. The SVG rendering applies hover effects that increase stroke width and opacity, making individual car records easier to trace.

81% match

Assignment #2 Visualizing Amounts with P5

This example visualizes fuel economy (mpg) for eight car models using a static bar chart, with the title "Economy mpg by Car Type" and a CSV data source. The chart renders bars in steelblue, with axis labels and tick marks styled via CSS classes. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.axisBottom and d3.axisLeft to draw the axes. The SVG output is created within a fixed 1500x500 container with margins, and bars are drawn as rect elements with heights proportional to the mpg values.

Assignment 5 - Line Chart

This line chart visualizes the average kilometers driven for used cars by model year, using a blue line over a time-scaled x-axis and linear y-axis. The visualization is built with D3 v7, loading data from a CSV file and rendering an SVG chart. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to draw the path, and `d3.timeParse` to convert year strings into dates. The chart includes labeled axes and a title, with no interactive elements beyond the static SVG output.

Vvishusikka

Assignment 6

This scatter plot shows the relationship between horsepower and miles per gallon for a dataset of automobiles, with each car represented as a blue semi-transparent dot. The visualization uses D3 v7 to load the CSV file, parse numeric values, and scale the data linearly along both axes. Points are rendered as SVG circles, with axes and labels generated using `d3.axisBottom`, `d3.axisLeft`, and appended text elements. The chart includes a title and axis labels for horsepower and MPG, with missing values filtered out before plotting.

BBhargav Reddy

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