ICE 6 BAR + LINE

100%

ICE 6 BAR + LINE

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This example shows a combined bar and line chart of average car sales versus fuel efficiency by year from 2015 to 2024. Blue bars represent average sales in thousands on the left axis, while an orange line with dots tracks average MPG on the right axis. The visualization uses d3.csv to load data, d3.rollups for yearly aggregation, and scales including d3.scaleBand and d3.scaleLinear. It renders via an SVG combo chart with d3.axisBottom, d3.axisLeft, and d3.axisRight, and draws the line with d3.line and curveMonotoneX, refreshing data from a GitHub gist.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line Chart

This chart visualizes the trend of car sales from 2004 to 2022, using a blue line to connect annual data points with the year on the x-axis and sales figures on the y-axis. The D3.js v5 code employs `scaleTime` and `scaleLinear` for axis scaling, with `axisBottom` and `axisLeft` to render tick marks and labels. The line is generated via `line()`, and the data is loaded from a CSV file in a GitHub gist. SVG output is used, with margins and labels styled via an external stylesheet.

Rrakeshkommineni

83% match

Loading thumbnail…

ICE_7_Line Chart

The chart displays car sales by type across three years (2019–2021), using three colored lines to compare yearly trends. It shows the sales values per car type on a band scale, with each line labeled at its endpoint. The visualization is built with D3 v7, using `d3.text` to load comma-separated data from a remote text file, then rendering SVG paths via `d3.line` with a monotone curve. Axes, labels, and a title are added using D3’s `axisBottom` and `axisLeft` methods, while the data source is a GitHub gist.

RRahulbelede97@gmail.com

82% match

Loading thumbnail…

ICE-7 Line Chart

This example shows car company sales from 2000 to 2015 as a single line chart, using d3.line to connect annual data points along a time-based x-axis and a linear y-axis. The SVG rendering includes styled axis ticks, grid lines, and labels for both axes, with the line path drawn in purple. Data is loaded as CSV from a GitHub gist, parsed with d3.csv, and scales are set with scaleTime and scaleLinear. Axis generators d3.axisBottom and d3.axisLeft create the framed plot, while a title and rotated axis label are added manually.

Ppremsaiv

82% match

Loading thumbnail…

ICE-7 LINE CHART

This line chart shows US automobile sales from 2005 to 2022, with year on the x-axis and sales volume on the y-axis. The data is loaded from a CSV file using d3.csv, then parsed with Date and numeric conversions. The visualization uses d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for ticks. A d3.line generator creates the green path, and the SVG rendering includes axis labels and a title. The code also applies margins and uses d3.extent and d3.max for domain calculations.

HHarshinireddyy19

82% match

Loading thumbnail…

ICE-7 LINE GRAPH

This line graph displays total car sales from 2013 to 2021, with the timeline on the x-axis and sales amounts on the y-axis. Using d3.csv to load external data, the visualization parses date strings with d3.timeParse and scales them via d3.scaleTime and d3.scaleLinear. The chart renders as an SVG path generated by d3.line, with axis labels and gridlines created through d3.axisBottom and d3.axisLeft. The line is styled with a red stroke, and axis ticks include padded labels.

Mmosesimmanuelvemana@my.unt.edu

81% match

Loading thumbnail…

Line chart ice 7

This chart displays the average fuel efficiency, measured in miles per gallon, for vehicles across different model years, spanning from 1970 to 1982. The data is aggregated by year, with each point representing the mean MPG for that year, and the line connects these points to show the overall trend. Built using D3 v7, the visualization uses `csv` for data loading, `rollup` and `mean` for aggregation, and `scaleLinear`, `axisBottom`, and `axisLeft` for axes and gridlines. The `line` generator draws the path, while `join` appends circles for each data point. The data comes from a gist CSV file.

SSreedevi Itta

81% match

Loading thumbnail…

ICE 7 Line chart

A line chart displays total car sales per year from 2013 to 2021, sourced from a CSV loaded via `d3.csv`. The SVG rendering uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path generator to draw the trend. Axes are created with `d3.axisBottom` and `d3.axisLeft`, with gridlines and rotated axis labels. The chart highlights sales fluctuations over time in red.

SSreejaBellamkonda

81% match

Loading thumbnail…

ICE - 7 Area Chart

This area chart shows annual car sales trends from 2013 to 2023, with a green filled region beneath a black line to emphasize the overall sales trajectory. The visualization uses D3 v5 to load a CSV dataset from GitHub, parse the dates, and render the chart with a time-scaled x-axis and linear y-axis. It applies `d3.line` and `d3.area` generators with a basis curve, while axes are drawn using `d3.axisBottom` and `d3.axisLeft`. Grid lines are created via tick sizes, and axis labels are manually added with rotation for clarity.

66264kusuma@gmail.com

81% match