Skip to main content
SimilarExport ZIP
100%

DEMO of connect d3 visulization

✓ Published0🌍 Public
Hhxu51@usfca.edu
Last edited Apr 29, 2025
Created on Apr 29, 2025
Forked from DEMO

This interactive dashboard displays GDP annual percentage change and unemployment rate trends for Sweden, Norway, and Denmark from 2020 to 2024. Two side-by-side line charts, rendered as SVG elements using D3.js (v7.8.5), allow comparison across the three countries, with interactive highlighting and faded lines activated by clicking legend items. A hover tooltip reveals exact values. Data is loaded from remote CSV files using `d3.csv`, with axes configured via `d3.scaleOrdinal` and `d3.timeParse`, and the visualization supports animation through D3’s transition mechanisms.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

DEMO

This dashboard compares social and economic indicators across Scandinavian countries, showing GDP annual percentage change and unemployment rate annual change for Sweden, Norway, and Denmark. Two side-by-side line charts display time-series trends from 2020–2024, with interactive legends that fade or highlight country lines on click. Tooltips reveal exact values on hover. The visualization uses D3.js (v7) with SVG rendering and animation, loading data from two CSV sources via `Promise.all` and `d3.csv`, with axes, grid lines, and color encoding managed through D3 scales.

Kkfhujosefsson@dons.usfca.edu
93% match
Loading thumbnail…

GDP AND Unemployment

This dashboard compares GDP annual change and unemployment rates for Sweden, Norway, and Denmark from 2020 to 2024. Two side-by-side line charts show each country’s trends, with interactive legends that fade or highlight series on click and a hover tooltip for precise values. Built with D3.js, the visualization loads CSV data from external gists and uses scales, axes, and SVG line paths to render the time-series.

Kkfhujosefsson@dons.usfca.edu
87% match
Loading thumbnail…

TESTER

This interactive dashboard visualizes social and economic indicators for Scandinavian countries from 2020 to 2024, displaying GDP annual change, unemployment rates, and hospital occupancy for Denmark, Norway, and Sweden. Three separate line charts show each country's hospital occupancy, while a combined chart aggregates the data for comparison. The visualization uses D3.js to create SVG line charts with hover tooltips and interactive legends that highlight or fade individual country lines. Users can click legend items to filter specific countries across the economic indicators, with hover tooltips revealing exact values for each data point.

Kkfhujosefsson@dons.usfca.edu
86% match
Loading thumbnail…

Main

This dashboard visualizes socioeconomic trends across Nordic countries using animated line charts and a mortality-rate slider. It compares Denmark, Norway, and Sweden with interactive legends that highlight or fade each line. The mortality chart uses D3 v7’s data binding and SVG transitions to animate dots and trails over time. Tooltips display exact values, while CSS-styled grids and axes enhance readability. The background image and custom HTML structure frame the charts, with a slider controlling the displayed year.

Kkfhujosefsson@dons.usfca.edu
80% match
Loading thumbnail…

demo

This interactive D3.js visualization displays GDP per capita trends from 1960 to 2023 for multiple countries using a dataset loaded from a GitHub CSV file. It renders grouped bar charts for each country-year combination, with axes, dashed grid lines, and hover tooltips to highlight values. The code uses D3 v7’s `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10` for color encoding, producing an animated SVG view of economic changes over time.

Vvenkatabhaskaratetali@my.unt.edu
77% match
Loading thumbnail…

Fork of Fork of Line Chart - Covid Cases per day in Sweden October 2020

This line chart shows global unemployment rate trends from 1991 to 2023, plotting yearly averages calculated from monthly or quarterly data grouped by year. The visualization uses d3.csv to load data from a Gist URL, d3.group with d3.mean to aggregate values per year, and d3.scaleLinear with d3.line and curveMonotoneX to render a smooth SVG path. Axes are generated with d3.axisBottom and d3.axisLeft, including percentage formatting for the y-axis and rotated tick labels for the x-axis.

Kkfhujosefsson@dons.usfca.edu
75% match
Loading thumbnail…

CovidCases

This visualization shows the cumulative number of COVID-19 cases in Sweden, Denmark, and Norway over time, displayed on a geographic map of Scandinavia. A date slider lets viewers scrub through the timeline, with each country colored according to a sequential orange-red scale that encodes case counts. The implementation uses d3-geo and d3.geoPath with a Mercator projection to render the map, while d3.scaleSequential and d3.interpolateOrRd handle the color mapping. Data comes from a JSON world geometry file and a CSV of daily case totals, grouped by date and country. Hovering over a country reveals a tooltip, though its text is not populated.

Kkfhujosefsson@dons.usfca.edu
75% match
Loading thumbnail…

Fork of Line Chart - Covid Cases per day in Sweden October 2020

This line chart visualizes the global unemployment rate trend from 1991 to 2023, using yearly averages calculated from raw data loaded via `d3.csv` from a Gist URL. The chart displays a smooth monotone curve (`d3.curveMonotoneX`) in steelblue, with an x-axis for years and a y-axis labeled with percentages. The implementation uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.group` with `d3.mean` to aggregate monthly rates by year. The SVG rendering is responsive, with the chart width adapting to the viewport.

Kkfhujosefsson@dons.usfca.edu
75% match