Skip to main content
SimilarExport ZIP
100%

Horizon Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Feb 17, 2017
Created on Feb 17, 2017

This example uses a horizon chart to visualize daily stock-related Wikipedia page views for thirteen companies over a two-month period. The chart displays relative change compared to a baseline, with multiple horizons stacked vertically and rendered to canvas. Built with D3 v3 and the cubism.js library, it uses `d3.time.scale` for its time axis and a fixed time context to handle the data.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/poezn/'>poezn</a>'s block: <a href='http://bl.ocks.org/poezn/8e06c2873a2c41c27888'>Horizon Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Horizon Chart

This example uses a horizon chart to visualize daily stock-related Wikipedia page views for thirteen companies over a two-month period. The chart displays relative change compared to a baseline, with multiple horizons stacked vertically and rendered to canvas. Built with D3 v3 and the cubism.js library, it uses `d3.time.scale` for its time axis and a fixed time context to handle the data.

TThanaporn-sk
100% match
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
77% match
Loading thumbnail…

Horizon 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.

KKams2015
74% 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
74% 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
73% 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
70% 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
69% match
Loading thumbnail…

Homework 7: Horizon Chart

This example visualizes daily average air pollution levels for six pollutants across multiple districts over a selected year. The horizon chart technique uses stacked, color-coded bands to encode value magnitudes, with the number of bands adjustable via a dropdown. It loads data from a CSV file using d3.csv, transforms and aggregates measurements by date and district, and renders SVG axes and paths using d3.scaleTime, d3.scaleLinear, and d3.axisBottom. Users switch between years and band counts through interactive HTML select elements.

YYang Shun Yu
69% match