Skip to main content
SimilarExport ZIP
100%

Horizon chart

✓ Published0🌍 Public
KKams2015
Last edited Jul 15, 2020
Created on Jul 15, 2020
Forked from 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.

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
76% 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
75% 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
72% 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
72% match
Loading thumbnail…

Bar chart

This bar chart displays work, stop, and idle statuses for four crews, with each crew’s data encoded as a single green bar scaled along a time-based x-axis from November 2016 to February 2017. The visualization uses d3.csv to load data, d3.scaleTime for the horizontal axis, d3.scaleBand for vertical positioning, and d3.scaleOrdinal for potential color mapping, though bars are uniformly styled via CSS. SVG rendering in index.html receives the chart through d3 selections and axes, with the dataset split into three columns per crew.

GGeolffrey S Mena
71% match
Loading thumbnail…

Bar chart

A bar chart displays the relative proportions of work, stop, and idle time for four crews, using horizontal stacked bars. Each crew’s row is composed of three colored segments whose lengths correspond to the numeric values from the CSV data. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to load the data, position the bars, and render axes in SVG. A static color scale assigns distinct hues to the three activity categories.

GGeolffrey S Mena
69% match
Loading thumbnail…

HR

This bar chart visualizes the average monthly income across HR departments, with department names sorted by descending income on the x-axis and a quantitative income scale on the y-axis. Built with the vega-lite-api library and rendered through vega-lite, the chart pulls CSV data from a GitHub gist. Tooltips are enabled via vega-tooltip, and the visualization is customized with a dark color scheme and increased font sizes for readability.

Qqhfzwyx
69% match
Loading thumbnail…

Bar chart

This bar chart shows the distribution of work, stop, and idle time for four different crews, with time plotted on a time-based x-axis and crews on a categorical y-axis. It uses D3.js version 5.11's `scaleTime`, `scaleBand`, and `scaleOrdinal` to map the data, and `axisLeft` and `axisBottom` for rendering the axes. The chart is drawn as an SVG with a green fill for the bars, and the data is loaded from a CSV file via `csv`. The x-axis range is set from November 2016 to February 2017, with a custom tick format function.

GGeolffrey S Mena
69% match