Skip to main content
SimilarExport ZIP
100%

Less Height is Sometimes Better

✓ Published0🌍 Public
CCurran Kelleher
Last edited Apr 1, 2025
Created on Apr 1, 2025

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

AI-generated description

A modification of the original

https://vizhub.com/lakshmi629/cf1954e10a3e4813b5d1ff81fbd2f9c0

such that there is less height available for the chart. This is better because too much height makes the spikes appear stretched and difficult to perceive.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ice-7 q4

An orange semi-transparent area chart displays the monthly U.S. unemployment rate from 1948 to 2021. The visualization loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG path using the `d3.area` generator. Time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) position the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled axes and a title, with all styling applied via CSS classes.

Nnagalakshmibadineedi2@gmail.com
80% 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
79% 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
77% match
Loading thumbnail…

Fork of Fork of ice-7 q3

A single line chart shows the monthly U.S. unemployment rate from 1948 to 2021, with the x-axis as a time scale for dates and the y-axis as a linear scale for the percentage rate. The SVG chart, built with d3.v7, uses `d3.csv` to load unemployment data, `d3.timeParse` to convert date strings, and `d3.line` to generate the steel-blue path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels.

Nnagalakshmibadineedi2@gmail.com
76% match
Loading thumbnail…

ICE 7 Area Chart

This example visualizes US unemployment rates from 1920 to 1980 using an area chart rendered in SVG. The chart combines a blue filled area with a black line, using curveBasis smoothing, while both axes display gridlines and labels. Data is loaded from a CSV file and parsed with d3.csv, then scales are created with d3.scaleLinear, axes with d3.axisLeft and d3.axisBottom, and the area and line paths are generated using d3.area and d3.line within a React framework.

JJerlineJJ
75% match
Loading thumbnail…

Processing Fixed-Width Data

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.

Mmbostock
75% match
Loading thumbnail…

U.S. Unemployment in 2017

This example displays the monthly U.S. unemployment rate for 2017 as a horizontal bar chart, with each bar labeled by month and the exact percentage value shown alongside it. The chart reveals a slight decreasing trend in joblessness across the year, as encoded by bar lengths. The visualization is built with D3.js v4, using `d3.select`, `d3.scaleLinear`, and `d3.scaleBand` to map data to SVG rectangles and text elements. Data comes from the Bureau of Labor Statistics, and the layout is adapted from a Curran Kelleher block.

RRobertDelgado
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
75% match