Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited May 7, 2015

Created on Apr 26, 2015

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

AI-generated description

Similar vizzes

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

88% 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

88% 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

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows the evolution of unemployment rates across Spanish regions from 2007 to 2014, highlighting the national total in a darker stroke and individual regions as hoverable lines. It combines an SVG line chart with a static map image, using d3.csv to load regional data, d3.time.scale and d3.svg.line for the axes and paths, and CSS `:hover` interactions to emphasize selected lines. Data comes from Spain’s Economically Active Population Survey (INE).

GGloriaYL

86% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays unemployment trends across education levels in Cluj, Romania, from April 2019 to March 2020, showing monthly counts for categories such as gimnazial, liceal, and universitar. The visualization uses d3.scaleBand for the time axis, d3.scaleLinear for the count axis, and d3.line with curveBasis to generate smooth paths. Multiple lines are colored using d3.scaleOrdinal with schemeCategory10, and a custom colorLegend component renders the legend. Data is loaded as JSON via d3.json from a local API endpoint, and the SVG rendering includes gridlines, axis labels, and a title.

Sstefichim

76% match

Loading thumbnail…

line chart

This line chart visualizes unemployment rates across multiple countries, with each country plotted on the x-axis and its corresponding rate on the y-axis. The chart is rendered on a canvas using Chart.js, which fetches CSV data from a GitHub gist and parses it into labels and numeric values. The code creates a line dataset with a teal border color, includes a legend at the top, and displays axis titles for countries and unemployment rate. The visualization updates responsively based on the canvas dimensions.

Ssaisathyapriya097@gmail.com

76% match

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.

Mmbostock

74% match

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.

深深度碎片

74% match