Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Nov 7, 2024
Created on Oct 23, 2024

This visualization displays unemployment rates for California, Texas, and New York over time, using a multi-line chart where each state is a separate line. The data comes from the `@oabouhas/unemployment` dataset. The code uses d3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render axes and paths, with `d3.groups` to separate lines by state. The chart includes a light gray background, axis labels, and semi-transparent lines for readability.

AI-generated description

A visualization of Daily Surface Air Temperature, colored by year, with 2024 highlighted in red. Made in collaboration with EJ Fox, leveraging data prepared by Matthias Stahl.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines Unemployment Rates Comparison

This visualization compares unemployment rates across ten US states over time using a multi-line chart. Each colored line represents a state, with a legend on the right identifying the color mapping. Hovering over a line highlights it by increasing stroke width and displays the state name near the final data point. The chart uses D3's `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `line` APIs, with responsive axes from `@curran/responsive-axes`. Unemployment rate data originates from the `@oabouhas/unemployment` package.

Oomniaabouhassan@gmail.com
87% match
Loading thumbnail…

Line Chart with Multiple Lines

The visualization presents unemployment trends across Spanish regions from 2007 to 2014, with a supplementary bar chart detailing 2014 rates by region. It uses D3.js v3 to render SVG elements, including animated line paths that traverse the time series for each region, allowing hover highlighting to emphasize individual trends. The data is loaded from CSV files containing yearly unemployment percentages, with axes and scales built using d3.svg.axis and d3.time.scale.

GGloriaYL
75% match
Loading thumbnail…

Line Chart with Multiple Lines

This example uses a multi-line chart to track unemployment rates across Catalan comarques (counties) from 1999 to 2014. The SVG visualization, built with D3 v3, plots each county’s unemployment rate over time as a separate gray line, with Catalonia overall highlighted in red. Data is loaded from a CSV file and restructured into per-county series. Hovering over a line displays the county name via a built-in title tooltip. The chart includes axes with formatted year labels and a legend-free design intended for quick comparison of regional trends. The source is the Catalan statistics institute (Idescat, 2015).

CContrastat
75% match
Loading thumbnail…

Line chart

A multi-line chart displays tourist visitor counts for five US states—California, Texas, Florida, New York, and Illinois—from 2011 to 2021. Data is loaded via `d3.text` from a gist and parsed into per-state value arrays. The visualization uses D3 v7 to construct SVG paths with `d3.line`, linear scales, axis generators, and a drawn legend, with each state colored using `d3.scaleOrdinal` and `d3.schemeCategory10`.

Ssridhardubala106@gmail.com
75% match
Loading thumbnail…

Fork of bubble chart

This interactive bubble chart compares unemployment rates over time across ten selected U.S. states. Each circle’s position encodes the year and unemployment percentage, while its size and color map to the rate and state, respectively, using d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10. The visualization includes a legend and interactive tooltips, rendering SVG elements with axis functions d3.axisBottom and d3.axisLeft. Data comes from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
75% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization examines unemployment across Spanish regions with two interactive SVG charts. The first chart displays 2014 unemployment rates as a horizontal bar chart, while the second tracks the evolution of these rates from 2007 to 2014 using a multi-line chart. The line chart uses d3.time.scale and d3.svg.axis to render annual data points, with hover effects that highlight individual paths. Regional CSV data is loaded and sorted via d3.csv, with the darkest bar representing the national total.

GGloriaYL
75% match
Loading thumbnail…

Fork of Pseudo Line Chart

This example shows two line charts comparing unemployment rate over time, with a pink line and a blue line plotted from hardcoded data arrays. The rendering relies on D3’s `line` generator to convert data points into SVG path strings, which are then drawn as `path` elements with `fill`, `stroke`, and `stroke-width` attributes. Axis labels for "Unemployment Rate" and "Year" are added as SVG text elements, rotated for the vertical axis. The code deliberately omits scales, using raw coordinates and fixed margins instead of an axis scale or ticks.

Nnitinramagiri1@gmail.com
74% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays the evolution of unemployment rates across Spanish regions from 2007 to 2014, with the national average highlighted in a darker gray. Each region appears as a separate line, and hovering over any path highlights it in red. The chart uses D3.js v3 with SVG rendering, utilizing `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to map yearly data loaded from a CSV file. Data originates from Spain’s Economically Active Population Survey (INE).

GGloriaYL
73% match