Skip to main content
100%

Average Price Histories

✓ Published0🌍 Public
ZZJONSSON
Last edited Oct 15, 2012
Created on Oct 15, 2012

This line chart visualizes average consumer prices from Bureau of Labor Statistics data, showing price histories across multiple product categories from 1984 to 2007. The visualization uses D3's multi-series CSV format, with each category rendered as a distinct colored line using a perceptual color space (d3.hcl) for optimal discrimination. The chart employs conventional margins and D3's time scale for the x-axis and linear scale for the y-axis, with axes displayed using D3's SVG axis component. Data is loaded and parsed with d3.csv and d3.time.format, while d3.extent, d3.min, and d3.max compute the domains. Each series line is generated with d3.svg.line, and Underscore.js utilities (_pluck, _each, _map) help manipulate the data arrays. The visualization clearly shows historical price trends for various consumer goods across multiple decades.

AI-generated description

This line chart is constructed from a CSV in the "Multi-Series Format" from Bureau of Labor Statistics Consumer Price Index data. The chart employs conventional margins and a number of D3 features:

The chart also uses a couple functions from Underscore.js:

Similar vizzes

Loading thumbnail…

ICE-7-3 Line Chart

This line chart visualizes the monthly Consumer Price Index (CPI) from the U.S. Bureau of Labor Statistics, showing percentage changes over time on a red line plotted against a time-scaled x-axis and linear y-axis. The code uses d3.csv to load the data, then applies d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path. Gridlines are drawn via d3.axisBottom and d3.axisLeft, with tick sizing and labels configured. The chart displays a title and axis labels, rendered in an SVG canvas with dimensions defined in the HTML.

Hhossaphul
73% match
Loading thumbnail…

vehicles Line Chart

This line chart shows the average price of vehicles across different years, highlighting overall price trends over time. The visualization uses a blue monotone curve with circular markers for each year's data point, and hovering over a point reveals the exact year and average price in a tooltip. Built with D3.js (v7.8.5), it loads CSV data from a GitHub gist, groups and aggregates entries by year using `d3.rollup` and `d3.mean`, and renders the result as an SVG with axes using `d3.axisBottom` and `d3.axisLeft`. Grid lines and formatted y-axis labels (in thousands) help contextualize the price values.

Ssaisathwikaguntupalli@gmail.com
71% match
Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013, using a dataset loaded from a CSV file that pairs each year with a numeric cost value. The SVG chart, built with D3 v7, uses `d3.scaleBand` for the yearly x-axis and `d3.scaleLinear` for the cost y-axis. A single light-green path stroke is drawn via the `d3.line()` generator, with axis labels and ticks styled in red, showing a simple trend of fluctuating costs across the period.

Vvineelaramulapalli32
70% match
Loading thumbnail…

Line Chart ICE 7

A line chart depicts the Consumer Price Index (CPI) trend over time, plotting annual values from a CSV dataset. D3.js scales map years to the x-axis and CPI values to the y-axis, with a `d3.line()` generator constructing the path. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with rotated axis labels. Data loading uses `d3.csv` with row parsing to convert strings to numbers, while the chart fills the viewport and applies the Share Tech font.

Ddiwashhumagain@my.unt.edu
70% match
Loading thumbnail…

ICE-06: Multi-line Series Chart

This multi-line series chart visualizes average grocery spending across four categories—produce, dairy, snacks, and beverages—over ten time segments. Each colored line represents a category, with a legend identifying them. The chart uses d3.csv to load remote spending data, then groups it into ten segments and applies d3.mean for aggregation. D3’s line generator builds the SVG paths, while d3.scaleLinear and d3.axisBottom/axisLeft handle scales and axes. The rendering is SVG-based with React managing the component structure.

LLaasyaJ256
70% match
Loading thumbnail…

Line Chart with Two Lines

This line chart displays annual average U.S. prices for regular gasoline and diesel from 1995 to 2014, with the two series overlaid to compare their trends. It shows that both fuels follow a similar upward trajectory with peaks around 2012–2013 before a slight decline, and that diesel prices generally exceed regular gas prices. The visualization uses D3.js v3 with SVG rendering, employing d3.svg.line and d3.time.scale for the x-axis, while loading the two CSV datasets and merging them to set scale domains. The data comes from the U.S. Energy Information Administration.

CCindyJonesHulfachor
70% match
Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013, using data from a CSV file with yearly cost values. The chart renders as an SVG, with a light green line connecting data points. The visualization is built with D3 v7, utilizing `d3.csv` for data loading and parsing, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis, with the line drawn using `d3.line`.

Lleftymadi
69% match
Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with yearly values plotted as a thick light-green line. The chart uses an SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the cost axis. Data is loaded from a local CSV file via `d3.csv`, and the line path is generated with the `d3.line` API, with red axis labels and tick styling defined in embedded CSS.

Aanith462@gmail.com
69% match