Skip to main content
SimilarExport ZIP
100%

Horizon chart

✓ Published2🌍 Public
KKams2015
Last edited Jul 15, 2020
Created on Jul 13, 2020
Forked from Stylized Bar Chart

This visualization displays traffic data over time using a horizon chart, where each band represents a different location and the area encodes the hourly visitor count. The chart compresses the y-axis by layering positive values into colored bands, making it easy to compare patterns across multiple series. Built with D3 v5, it uses d3.nest to group the CSV data, scaleLinear for the y-axis, and an area generator with curveBasis for smooth lines. The data comes from traffic.csv, and the rendering is done with SVG.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Horizon chart

This horizon chart displays multiple time-series datasets stacked vertically, each showing traffic values over time for different locations. The visualization loads data from a CSV file using d3.csv and processes it with d3.nest to group series by name and parse dates. The implementation uses d3.scaleLinear for the y-axis and prepares an d3.area generator for rendering, though the final SVG output is currently incomplete, showing only placeholder circles instead of the intended area paths.

KKams2015
93% match
Loading thumbnail…

Horizon chart

This example visualizes hourly traffic data for the Von der Heydt street over multiple days using a horizon chart. Each horizontal band represents a separate day, with the area chart showing traffic volume over time, and the color intensity encoding the magnitude of values that extend beyond the chart’s baseline. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.nest()` to group entries by date and name, and `d3.area()` with a curve basis to generate the smooth SVG paths for each series.

Cchingching17
90% match
Loading thumbnail…

Horizon Chart

This example presents a horizon chart of U.S. unemployment rates from 2000–2010, using color and vertical banding to condense a wide value range into a compact area. Users can toggle between “mirror” and “offset” modes and adjust the number of bands. The visualization is built with the `d3.horizon` plugin on top of D3 v3, rendering as SVG with transitions for animated updates. It loads data from `unemployment.json` and uses `d3.scale.linear`, `d3.svg.area`, and `transition` to animate the band count changes.

Mmbostock
77% match
Loading thumbnail…

Horizon Chart

This interactive visualization displays daily average air pollutant concentrations (SO2, NO2, O3, CO, PM10, PM2.5) across multiple monitoring stations. Users select a year and the number of color bands through dropdown menus. Six horizon charts, one per pollutant, show temporal trends using d3.scaleLinear, d3.axisBottom, d3.axisLeft, and the d3.curveLinear path generator. Data comes from Iris.csv, preprocessed by averaging hourly measurements into daily values per station. The horizon chart technique stacks mirrored areas in alternating colors to increase perceptual resolution of small variations.

Hhi4u2qzy@gmail.com
76% match
Loading thumbnail…

Horizon chart

This visualization uses horizon charts to compare six air pollutants (SO2, NO2, CO, O3, PM10, PM2.5) across multiple monitoring stations over time. Each pollutant’s daily median values are rendered as a series of stacked, color-shaded bands, where the number of bands is user-adjustable, revealing amplitude variations. The charts are built with D3.js (v5 and v7), using `d3.rollup`, `d3.area`, and `d3.scaleUtc` to aggregate and lay out the data, with a custom color scheme per pollutant. The interface allows selecting a specific year and band count, updating all six SVG views accordingly.

Sstanley.shen2003@gmail.com
76% match
Loading thumbnail…

hw7

This example shows a horizon chart displaying SO2 measurements over time for multiple monitoring addresses, with each horizontal band representing a different location and the color intensity indicating the measurement magnitude. The visualization uses D3 v6 to build the chart, leveraging d3.area, d3.scalePoint, and custom clipping paths to create the layered horizon effect. Data is loaded from a CSV file and preprocessed in JavaScript before being passed to the chart function. The SVG rendering approach employs reusable clip paths and color bands to show data beyond the base scale.

Kkenny-wq
75% match
Loading thumbnail…

Horizon chart

This visualization presents a multi-series bar chart of personnel hours (JH) by team, task, and degree level, using data from a CSV file with team, degree, task, and JH columns. The view shows three teams (A, B, C) across three tasks (IT, Livraison, RH) and three degree levels (0, 1, 2). The chart encodes each degree value as a scaled circle positioned at the center of its corresponding cell, with radius proportional to the JH value and fill color varying by degree level using a green color scheme. It uses D3.js (v5) to load the CSV, nest data by team and task, and render the SVG with band scales for both x and y axes.

KKams2015
75% match
Loading thumbnail…

Area chart

This area chart visualizes web traffic data over time, using a filled blue region to represent the number of daily visitors. The x-axis displays dates parsed with `d3.timeParse`, while the y-axis scales visitor counts using `d3.scaleLinear`. The code constructs the SVG via `d3.select`, renders axes with `d3.axisBottom` and `d3.axisLeft`, and draws the area path using `d3.area` with data loaded from a remote CSV through `d3.csv`.

Ssannihitha.k23@gmail.com
74% match