Horizon Chart

100%

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Dec 15, 2011

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.

AI-generated description

Horizon charts combine position and color to reduce vertical space. Start with a standard area chart, then mirror negative values (in blue) or offset them vertically. Click the + button above to increase the number of bands, turning the area into a horizon.

Implemented with the d3.horizon plugin.

gpl-3.0 Licensed

Similar vizzes

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

77% match

Loading thumbnail…

Line Chart

This line chart displays the US unemployment rate from 1920 to 1980. It uses D3 v5 with scales from `d3.scaleLinear` and `d3.scaleTime`, and axes from `d3.axisLeft` and `d3.axisBottom`. The line is generated with `d3.line`, and the data is loaded as CSV from a GitHub gist. The SVG rendering includes styled grid lines, axis labels, and a title, with the blue stroke path emphasized via CSS.

JJerlineJJ

76% 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

76% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

75% match

Loading thumbnail…

Less Height is Sometimes Better

This visualization displays the U.S. unemployment rate from 1948 to 2021 as an area chart, using an orange semi-transparent fill over a time-series line. The chart intentionally allocates less vertical height to the plot area, which improves the perception of the data by preventing the spikes from appearing stretched and distorted. Built with D3 v7, the code uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks and labels, and `d3.area()` to generate the SVG path for the area. The data is fetched from a CSV and parsed with `d3.timeParse`.

CCurran Kelleher

75% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays unemployment data across U.S. states for different years, with a dropdown menu to select the year and a checkbox to toggle sorting by total value. The visualization uses D3 v5 to render SVG elements with smooth transitions between states, animating bar positions and heights over 750 milliseconds. Data is loaded from a CSV file, and the chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal to assign category colors. Stacked segments are created using d3.stack, with labels showing each state's total.

Yyc4004

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…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

73% match