Multi-Line Voronoi 2015
This interactive multi-line chart displays monthly unemployment rates across U.S. metropolitan areas from 2015, using up-to-date data fetched via the BLS Local Area Unemployment Statistics. The visualization implements a Voronoi overlay for efficient mouse tracking, allowing users to hover over any point in the chart to highlight the nearest city’s line and display its name and value in a focus tooltip. A checkbox toggles the Voronoi cells, which are computed from the date-value positions of all data points. The chart is built with D3 and rendered as SVG within a Vue application, with axes for time and percentage, and a bold label for the y-axis. A Makefile and script process raw fixed-width text data into a TSV file for loading.
The visualization is a faithful reproduction of the original Multi-Line Voronoi example, updated with 2015 unemployment data. It uses D3's SVG rendering and Vue for the application structure. The page includes a disabled checkbox to show the Voronoi overlay, which becomes enabled after data loads. This interactive example lets users hover over the chart to highlight the nearest unemployment line and see details on the data point. The data processing pipeline, driven by a Makefile, converts raw data from the Bureau of Labor Statistics into a tab-separated file for D3 to consume.# Multi-Line Voronoi 2015
## Overview
An interactive multi-series line chart of metropolitan unemployment rates, enhanced with Voronoi overlay for precise mouse interaction.
## Design
This visualization displays monthly unemployment rates across multiple U.S. metropolitan areas. The core innovation is the use of a Voronoi diagram overlay to make each data point's hover target larger and easier to interact with, solving the common problem of overlapping lines making it difficult to select specific data points.
## Key Features
- **Data**: Monthly unemployment rates for major U.S. metropolitan statistical areas (MSAs), sourced from the Bureau of Labor Statistics, updated to 2015
- **Interaction**: Users can hover over data points to see city names and unemployment values; a checkbox toggles the Voronoi regions on/off
- **Encoding**: X-axis shows date (2015), Y-axis shows unemployment rate as percentage; each line represents one metropolitan area's unemployment trend over time
## Technical Highlights
- **Voronoi overlay**: A Voronoi tessellation partitions the chart into cells around each data point, making it easy to hover over small or overlapping lines. The nearest data point is highlighted, and the hovered city's line is brought to the front.
- **SVG rendering**: All elements are rendered as SVG, using D3 v3’s modular classes for scales, axes, and geometry.
- **Data processing**: The original Makefile-based pipeline downloads data from the U.S. Bureau of Labor Statistics and parses the fixed-width file with a Node.js script into TSV format.
This example builds on a classical Voronoi interaction pattern: hovering near a point selects its line, shows a tooltip, and reorders the line for emphasis.
The page uses Vue to render the UI and D3 to bind data and produce SVG output. The accompanying files include a Makefile that shows how to reproduce the data processing step, and a script for parsing fixed-width BLS records into tidy TSV.
The visualization shows the monthly unemployment rate for US metropolitan statistical areas over two years (2014–2015), with interactive mouse tracking. It uses a hidden Voronoi overlay to trigger mouse events on the nearest data point, making it easier to hover over thin lines.
Key features:
- Multi-line chart of unemployment rates over time
- Voronoi overlay for convenient interactive selection
- Hovering a city highlights the corresponding line and displays a tooltip with the city's name and exact unemployment value.
- The "Show Voronoi" checkbox toggles the Voronoi overlay.
- The legend-less design uses a simple, focused visual style.
This description is for the gallery; make it concise and accurate, and use the provided context. Do not include the code. Also, generate three tags that describe the visualization. Return only the description and tags in this format:
Description:
<description goes here>
Tags:
<tag 1>, <tag 2>, <tag 3>Description:
This example adapts Mike Bostock's Multi-Line Voronoi visualization to display metropolitan unemployment rates using 2015 data. The SVG-based chart, built with Vue and D3, shows multiple time-series lines—one per metropolitan area—tracking unemployment over time. A Voronoi overlay partitions the chart into interactive regions, making it easy to hover and highlight the nearest city line. The interface includes a disabled checkbox to toggle the Voronoi cells on and off.
Tags: D3, Vue, SVG, multi-line, Voronoi, interaction, unemployment, time-series
CCurran Kelleher
88% match