Fork of ICE-7 Line Chart

100%

Fork of ICE-7 Line Chart

✓ Published0🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

This chart shows the relationship between horsepower and displacement for cars from 2000 to 2013, with a line graph tracing how displacement values change across different horsepower levels. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` to construct the plot. Data is loaded from a CSV file using `d3.csv`, and the code includes custom axis labels, a title, and grid lines styled via tick sizes. Red strokes highlight the line path while margins position the chart within a 960×500 viewport.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 7 Resuable scatter plot Ar

This scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, showing a general trend of lower MPG as engine displacement increases. Each data point is a filled circle colored uniquely per car model from a custom palette. The D3.js v7 code loads data from a CSV file, maps engine size (x-axis) and MPG (y-axis) to linear scales, and renders axes, labels, and hover tooltips via `d3.axisBottom`, `d3.axisLeft`, and `.on('mouseover')`. The chart is drawn in SVG within a styled HTML container.

Ssaisathwikaguntupalli@gmail.com

81% match

Loading thumbnail…

Fork of ICE 7 Line Chart

A line chart displays sales of cars in India from 2009 to 2019, with the x-axis representing the year and the y-axis showing units sold. The visualization uses D3 v5 with an SVG rendering. It loads CSV data from a GitHub gist, parsing the date and numeric units. The chart employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs. Styling is applied through a linked CSS file, with red grid lines, axis labels, and a thick red line path representing the trend.

SSheshidharreddy

81% match

Loading thumbnail…

ICE-7 Harshith Mullapudi

This scatter plot shows the relationship between horsepower and miles per gallon for a small set of six cars, using a reusable chart function built with D3.js v7. The SVG rendering includes linear scales for both axes, axis labels, and semi-transparent steelblue circles. The code demonstrates a custom `scatterPlot()` function that returns a chart closure, handling margins, scales, and axes internally, then applies it via `selection.datum()` and direct function invocation. The dataset is embedded in the script, and the visualization explicitly labels its axes with “Horsepower” and “Miles per Gallon.”

HHarshithmullapudi@my.unt.edu

81% match

Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

CCherukuriMilind

80% match

Loading thumbnail…

ICE7-2b

This visualization shows the relationship between horsepower and fuel efficiency (MPG) for a subset of 50 cars from a CSV dataset. A tomato-colored line, generated with `d3.line()` and smoothed using `curveMonotoneX`, connects data points sorted by horsepower to reveal the overall trend. The chart renders as SVG using D3 v7, with linear scales for both axes and blue circles representing individual car data points. Interactive tooltips appear on mouseover, displaying each car's name, horsepower, and MPG values.

SSainathreddypotu@gmail.com

80% match

Loading thumbnail…

ICE7-3

This area chart visualizes the relationship between horsepower and fuel efficiency (MPG) for a sample of 50 cars from a CSV dataset. It uses D3.js v7 to render an SVG graphic, with a monotone cubic curve (`d3.curveMonotoneX`) forming the filled area and overlaid blue circles for individual data points. Tooltips on hover display the car name, horsepower, and MPG. Axes are labeled for 'Horsepower' and 'Miles per Gallon (MPG)', with the chart title indicating the dataset's scope.

SSainathreddypotu@gmail.com

80% match

Loading thumbnail…

Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between vehicle horsepower and price, using point size to encode sales volume and color to distinguish vehicle type. Built with D3.js v7, the visualization renders data from a bundled Car_sales.csv file as an SVG. The plot includes labeled axes, a hover tooltip for detailed inspection, and separate legends for the color-coded vehicle categories and size-scaled sales figures. The implementation uses D3's selection and scale APIs to map the dataset fields to visual encodings.

Kkhushburajan2015@gmail.com

80% match

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes the sales of cars in India from 2009 to 2019, with the x-axis representing time and the y-axis showing sales volume. The chart uses D3.js v5 with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while a `line` generator draws the trend line. Data is loaded from a CSV file, parsed with `d3.timeParse`, and rendered as an SVG. The dark background and red styling highlight the sales trend over the decade.

JJyothicherukuri

80% match