Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Sstefichim
Last edited May 22, 2020
Created on May 22, 2020

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.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

make bar char

This example shows the number of unemployed individuals with high school education (liceal) in Cluj, Romania across various months from 2019 to 2020, using a horizontal bar chart. The visualization loads data from a local JSON file and renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, with axes generated via d3.axisLeft and d3.axisBottom. Each bar represents a single month, with its length proportional to the liceal unemployment count. The chart includes axis labels, a title, and gridlines created by tick marks extending across the plot area.

Sstefichim
82% match
Loading thumbnail…

make bar char

A bar chart displays the number of unemployed individuals with "liceal" (high school) education in Cluj, Romania, across various months from 2019 to 2020. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles. Data is loaded from a local JSON file, and axis labels are formatted using the `format` function.

Sstefichim
80% match
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays unemployment rates by educational level, specifically the number of individuals with gimnazial education, across several months in Cluj, Romania, using data from educatie.json. The chart employs D3 v5’s scaleBand, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render an SVG representation. A maroon line path connects the data points, with labels for the time axis and a temperature-like y-axis title, though it visualizes education stats. The code loads data via d3.json and appends axes with tick lines and a title.

Sstefichim
77% 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
76% 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 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
74% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between the percentage of high school graduates and total unemployment across Romanian counties, using data from an API filtered by education. The visualization encodes each county as a red semi-transparent circle, with position determined by linear scales for both axes, and includes labeled axes and a title. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to map data values to SVG coordinates, while loading JSON data via `json()`. The plot is rendered as an SVG with custom tick and label styling.

Sstefichim
73% 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