TESTER

100%

✓ Published0🌍 Public

Kkfhujosefsson@dons.usfca.edu

Last edited Apr 29, 2025

Created on Apr 29, 2025

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.

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

89% match

Loading thumbnail…

DEMO of connect d3 visulization

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.

Hhxu51@usfca.edu

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

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

82% match

Loading thumbnail…

Hospitality

Three linked line charts track daily hospital occupancy in Denmark, Norway, and Sweden from 2020 to 2022, with a fourth combined chart overlaying all three countries for comparison. Each country’s trend is drawn with a distinct color, and hovering reveals a tooltip with the exact date and value. The visualization loads CSV data via `d3.csv`, parses dates and numeric values, and renders SVG line charts using D3’s scales, axes, and `d3.line` generator, with an animated transition for the combined view.

Kkfhujosefsson@dons.usfca.edu

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

78% match

Loading thumbnail…

Black hat multiline chart

This example displays daily COVID-19 cases for five Scandinavian countries throughout October 2020 on a logarithmic scale. The black-background chart uses colored lines for Sweden, Denmark, Norway, Finland, and Iceland. The visualization loads CSV data via `d3.csv`, builds scales with `scaleLinear` and `scaleLog`, and renders paths with the `d3.line` generator. SVG elements handle axes, labels, a title, and a legend, demonstrating D3 v7's data-joining and axis APIs.

Kkfhujosefsson@dons.usfca.edu

75% match

Loading thumbnail…

Both Charts

This visualization presents two line charts showing COVID-19 case counts in five Scandinavian countries throughout October 2020. One chart uses a linear scale while the other displays the same data on a logarithmic scale, highlighting the different visual patterns each scale produces. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleLog` for the axes, and `d3.line` to generate the SVG paths. Each country’s daily cases are plotted against the day of the month, with axes styled using `d3.axisBottom` and `d3.axisLeft`.

Kkfhujosefsson@dons.usfca.edu

75% match