Untitled

100%

✓ Published0🌍 Public

Last edited Jun 4, 2022

Created on Jun 4, 2022

A multi-line chart shows projected US media ad spending from 2016 to 2022 across six categories, including Digital, TV, Print, Radio, Out-of-home, and Directories. Digital spending rises sharply while most others decline or hold steady. Built with D3 v4, the visualization groups data with `d3.nest()`, draws smoothed paths using `d3.line()` with `curveCardinal`, and adds circles for each data point. Axes, labels, a legend, and a title are appended as SVG elements. The data comes from eMarketer, March 2018.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A7 -D3 Multi Line Chart

This example displays a multi-line chart tracking Valentine's Day spending trends in the United States from 2010 to 2022 across six categories: candy, flowers, jewelry, greeting cards, evening out, and clothing. It uses D3.js v6 with an SVG rendering to visualize the historical spending data loaded from a CSV file via `d3.csv`. The code employs `d3.scaleLinear` and `d3.axisBottom` for the axes, `d3.line` to generate each category’s path, and `d3.scaleOrdinal` to assign distinct colors to the lines, with a legend built using SVG rectangles and text.

Rragregory@dons.usfca.edu

70% match

Loading thumbnail…

Untitled

This example shows personal spending over time as a bar chart titled “My Spendings Over The Years,” with each bar colored by a quantized scale from light to dark blue to indicate dollar amounts. The visualization uses D3 v7 to load CSV data, create a band scale for years and a linear scale for dollar values, and render SVG rectangles for bars. An axis with dollar-formatted tick labels, a year label, and a d3-legend color legend are added, with the y-axis domain hard-coded to 2125 for consistent scaling.

Rrykay

70% match

Loading thumbnail…

Untitled

This visualization shows a directed force-directed graph where nodes representing digital advertising and analytics technologies connect to related services, with links flowing between categories like ad exchanges, ad analytics, and testing platforms. The code builds the visualization using d3.forceSimulation to position nodes and animate the layout, with SVG circles and lines for rendering. The graph uses d3.v3, as indicated by the script import, and applies a dark theme with semi-transparent nodes and links, where text labels identify each technology node.

SStefan Apostol

69% match

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

69% match

Loading thumbnail…

Bar charts with D3

This example shows a horizontal bar chart of total ad spend, sorted by management entity. It uses a linear scale for the x-axis and a band scale for the y-axis, with bars rendered in SVG using D3 v5. The chart loads data from a CSV file, parses ad spend as numbers, and uses `axisLeft` and `axisBottom` for axis generation.

YYiming Gao

69% match

Loading thumbnail…

activity 6_ task 6

This example visualizes advertising data from a CSV file, plotting TV spending against Radio spending using a scatter plot with colored circles that also encode Newspaper and Sales values through their radii. The visualization is rendered as an SVG using D3 v6, with scales created via `d3.scaleLinear` and axes generated through `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously using `d3.csv`, with each row parsed to numeric values before mapping to screen coordinates.

Ppravallikachowdary16518@gmail.com

69% match

Loading thumbnail…

Untitled

This stacked bar chart displays categorical spending data from a CSV file, grouping values by year and showing the breakdown of components such as "Função" and "Subfunção" with amounts for "Empenhado" and "Pago". The visualization uses D3 v4’s `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to render a 460-by-400 pixel SVG, with axes, color-coded segments, and a filter button in the accompanying HTML page.

WWilliam Niemiec

68% match

Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Mmab3105

68% match