Processing Fixed-Width Data — VizHub

SimilarExport ZIP

100%

Processing Fixed-Width Data

✓ Published0🌍 Public

Last edited Dec 31, 2019

Created on Dec 18, 2013

A line chart displays seasonally-adjusted unemployment rates for 380 U.S. metropolitan areas from 2000 to 2013. The visualization renders each city as a thin gray path, using d3.svg.line and d3.time.scale to plot rates over time. The example focuses on preprocessing: a Node.js script with d3.nest reads fixed-width text from the Bureau of Labor Statistics, extracts and reshapes the data into a compact TSV file via d3.tsv.formatRows, reducing a 9.9 MB source to 258 KB. The final chart is drawn with SVG.

AI-generated description

This example demonstrates how to convert awkward fixed-width text data, such as that released by the U.S. Bureau of Labor Statistics, into tab-separated values.

The source data file for this chart of seasonally-adjusted unemployment rates for 380 metropolitan areas is a whopping 9.9 MB. However, by pulling out only the data needed for this chart and by converting to a more efficient representation that eliminates redundant information, we can reduce it to a svelte 258 KB (44 KB gzipped). This is a savings of 98%! The resulting file is small enough to download and display quickly, despite having more than 63,000 data points.

The Makefile is responsible for downloading the source file from the BLS. Then, the process-data script converts and reduces the source data to TSV. The resulting tabular file is very wide, containing a row for each metropolitan area and a column for each month. You can run this example locally by cloning this gist, and then running the following commands:

npm install
make

When the BLS releases new data, you can update the chart by running make clean all.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Multi-Line Voronoi

This example shows a multi-line chart of unemployment rates across various U.S. metropolitan areas from 2000 to 2013. An invisible Voronoi tessellation handles mouseover detection, highlighting the nearest line and displaying its value at the cursor position; a checkbox toggles red Voronoi cell borders for inspection. The SVG chart uses d3.line, d3.voronoi, and d3.axisBottom/Left, with data processed from Bureau of Labor Statistics text files into a TSV format.

Loading thumbnail…

31.Multi-Line Voronoi

This multi-line chart displays monthly unemployment rates for several metropolitan areas over time, with each city represented as a gray line. Hovering over the chart highlights the nearest point on the closest line and shows the corresponding city name and value. The example uses an invisible Voronoi tessellation, created with `d3.voronoi`, to map mouse position to the nearest data point across all lines, making interaction efficient. A checkbox toggles the visibility of this Voronoi overlay, which is rendered in red for inspection. The visualization is built with D3 v4 and SVG, loading data from an external TSV file.

深深度碎片

Loading thumbnail…

Multi-Line Voronoi with colors

This multi-line chart visualizes monthly unemployment rates across multiple U.S. metropolitan areas over time, with each line colored using a categorical scale. The chart uses an invisible Voronoi tessellation to enable precise mouseover interactions—the closest point on any line to the cursor is highlighted, and a tooltip displays the city name and value. A checkbox toggles the Voronoi overlay, which draws red cell boundaries when enabled. The data is sourced from the Bureau of Labor Statistics.

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.

Loading thumbnail…

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

Loading thumbnail…

Metropolitan Unemployment

This visualization shows the distribution of unemployment rates across 380 U.S. metropolitan areas from January 2000 to December 2012. Using a time-series heatmap, it displays monthly unemployment rate bins as colored rectangles, with darker purple indicating higher numbers of areas within a given rate range. The code uses D3 v3’s `d3.time.scale`, `d3.svg.axis`, and `d3.interpolateLab` for color interpolation. Data from the Bureau of Labor Statistics is loaded via `d3.json` and rendered as SVG rectangles.

Loading thumbnail…

Multi-Line Voronoi using Voronoi.find()

A multi-line chart of unemployment rates across U.S. metropolitan areas from 2000 to 2013 uses a Voronoi tessellation to handle mouseover interactions. The chart, rendered with D3 v4 and SVG, highlights the data point and city name nearest to the cursor on any line. Unlike earlier versions, the code uses `voronoi.find()` with a search radius to locate the closest site directly, eliminating the need for a hidden SVG overlay for interaction. The Voronoi diagram can optionally be displayed via a checkbox, and the data derives from the U.S. Bureau of Labor Statistics.

PPhilippe Rivière

Loading thumbnail…

Metis Simple Stacked Bar Chart with Labels

This example displays 2017 U.S. unemployment rates as a simple horizontal bar chart, with states sorted descending by rate and each bar labeled with its numeric value using SVG text. D3 v4 selects elements, binds CSV data, and uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The code also demonstrates grouping with `d3.nest()` and computes average rates per region and subregion using `rollup()`. The chart is rendered as an SVG element within a 960x500 canvas.