K

kfhujosefsson@dons.usfca.edu

@karldif01·37 public vizzes

Loading thumbnail…

Fork of CovidCases

This example shows a choropleth map of COVID-19 total cases across Sweden, Denmark, and Norway over time, with a slider to scrub through the available dates. The map uses SVG paths rendered with `d3.geoPath` and a Mercator projection fitted to geographic data from a world GeoJSON file. Each region’s fill color is driven by a `d3.scaleSequential` with `d3.interpolatePlasma`, mapping case counts from a CSV dataset. A tooltip is attached to the paths via mouse events, though it is referenced but not fully instantiated in the provided code, and the slider updates the displayed date label.

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.

Loading thumbnail…

TreeMap Mortality COVID

A treemap visualizes total COVID deaths per 10 million people across Sweden, Denmark, and Norway, using each country's latest recorded value from a CSV dataset. The treemap layout, sized at 800×500 pixels, is generated with `d3.treemap()` on a `d3.hierarchy` object. Each country appears as a colored rectangle, filled via `d3.countryColors`, with labels and hover tooltips. The example uses D3 v7 with SVG rendering, sorting records by date to select the most recent death rate per country.

Loading thumbnail…

Fork of Mortality Scatterplot

This scatterplot tracks daily COVID-19 deaths per 10 million people across Denmark, Norway, and Sweden over time. Animated circles with trailing paths show each country’s mortality trajectory, while a draggable slider and play button scrub through dates. Built with d3.v7, it uses d3.csv for loading, d3.timeParse for date formatting, d3.group for data organization, and SVG rendering with CSS transitions for tooltips.

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.

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.

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.

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.

Loading thumbnail…

Mortality Scatterplot

This scatterplot visualizes COVID-19 deaths per 10 million people across Denmark, Norway, and Sweden over time, with each country color-coded and a slider allowing users to scrub through dates. The chart draws trailing paths behind each data point to show temporal progression, and hovering reveals a tooltip with details. Built with D3 v7, it uses `d3.csv` to load data, `d3.group` to organize by country, and `d3.scaleTime`/`d3.scaleLinear` for axes, with SVG circles for points and an HTML range input for animation.

Loading thumbnail…

Lockdown Timeline

This visualization displays a timeline of three pandemic lockdown events, using a horizontal axis to mark dates in March and December 2020. It encodes each event as a point on the timeline, with annotations providing the location and nature of the lockdown. The SVG is constructed with D3.js v7, using `d3.scaleTime` for the time axis, `d3.axisBottom` with custom tick values and formatting, and `d3.timeParse` to convert date strings. Annotations appear via appended SVG groups at calculated positions.

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.

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

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.

Loading thumbnail…

White hat multiline chart

The chart displays daily COVID-19 case counts for five Scandinavian countries across October 2020, plotted as multiple colored lines over a shared day axis. It uses d3.csv to load the data, d3.line and d3.scaleLinear to generate the paths and coordinates, and SVG elements with CSS classes for styling. The y-axis shows case numbers, the x-axis shows days, and a legend identifies each country’s line color.

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.

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.

Loading thumbnail…

Titanic passenger class distribution

This example shows the distribution of Titanic passengers across first, second, and third class, with percentage labels overlaid on each slice. A simple SVG pie chart is generated using D3 v7’s `d3.pie` and `d3.arc` layouts, with each slice filled by a hard-coded color and separated by white strokes. The dataset is hard-coded as three objects containing class name, count, and color. Labels are positioned via the arc `centroid` method and rendered as multi-line text elements showing both class and percentage.

Loading thumbnail…

Proportional Symbols Map in D3

A proportional symbols map visualizes transportation cost indices across U.S. states using D3.js and the topojson library. Each state is rendered as a gray polygon with a circular symbol whose size corresponds to its cost value. The visualization employs an Albers equal-area projection via `d3.geoAlbersUsa` and `d3.geoPath`, with state centroids hardcoded to position the proportional circles. Interactive tooltips appear on hover, while symbols animate on load. The map is drawn in SVG with data fetched from a CSV hosted on GitHub.

Loading thumbnail…

World Map in D3

This example shows a choropleth world map displaying each country’s total GDP in current US dollars for 2015, colored from light to dark to indicate relative economic output. Countries without data appear in gray. The visualization uses D3 v7 and TopoJSON to load geographic boundaries, with d3.geoPath rendering the SVG country shapes. A hover tooltip reveals the exact GDP value per country, while a legend explains the color scale. The GDP data itself is embedded directly in the page as CSV text.

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2023 US unemployment rates by state, coloring each state with a sequential scale from the minimum to maximum unemployment values. Hovering over a state reveals a tooltip with its name and unemployment figure. Built with D3.js, it loads unemployment CSV data and US state TopoJSON boundaries, then projects the states using `d3.geoAlbersUsa` and renders them as SVG paths via `d3.geoPath`. The map joins the CSV data to the geometry using a state name-to-FIPS code mapping.

Loading thumbnail…

Multiline chart

This interactive multiline chart visualizes the GDP of 19 European countries from 2006 to 2023, using D3.js (v7.8.5) to render SVG line paths and an animated legend. Users toggle country visibility via checkboxes, with a tooltip displaying formatted GDP values. The data is fetched from a GitHub gist and parsed as CSV using `d3.csvParse`. A color scale from `d3.schemeCategory10` assigns distinct hues, and the chart includes dashed gridlines and an SVG-based legend for clarity.

Loading thumbnail…

Fork of Multiline chart

This interactive multiline chart visualizes GDP trends for ten North and Central American countries from 2006 to 2023. Users can toggle individual country lines via checkboxes, with a tooltip displaying precise GDP values on hover. The visualization, built with D3.js, uses a CSV dataset fetched from a GitHub gist and renders smooth SVG paths with animated transitions. A legend with a color scale distinguishes each nation, while a dynamically sized viewport and dashed grid lines enhance readability. The code employs D3's `scaleOrdinal`, `csvParse`, and SVG path generation for the interactive line chart.

Loading thumbnail…

Covid Casualties in Sweden Jan-Oct 2020

A bar chart displays COVID-19 casualties in Sweden from January to October 2020. The p5.js sketch loads a CSV file from a GitHub gist and aggregates deaths by month. Using the Canvas API, it draws axes, gridlines, and rectangular bars, with labels for each month and the number of casualties. Plotly is loaded but not used in the visualization.

Loading thumbnail…

Fork of Fork of Heatmap in D3

This visualization shows the social connections among dolphins as an adjacency matrix, where blue cells indicate a link between two individuals and white cells indicate no link. The data comes from a GitHub Gist and is processed by d3.text to parse the CSV-like input. Using D3 v7, the code builds a symmetric matrix for the undirected graph, then renders it as SVG rectangles with d3.selectAll and data joins. A tooltip is included but not actively bound to any user interaction in the visible code.

Loading thumbnail…

Force Directed Node-Link Diagram

This force-directed node-link diagram visualizes a dolphin social network, showing relationships between individual dolphins as nodes connected by links. The graph uses D3's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` functions to position nodes based on network structure. Nodes appear as blue circles with hover tooltips displaying dolphin IDs, and users can drag nodes through D3's drag interaction. The data is loaded as CSV text from a GitHub gist, parsed into nodes and links, and rendered as SVG elements updated on each simulation tick.

Loading thumbnail…

Heatmap in D3

This heatmap visualizes monthly COVID-19 cases across Scandinavian countries for 2020, using a blue sequential color scale to encode case counts per country-month combination. The SVG chart, built with D3 v7, reads CSV data from a GitHub gist and renders axes, labels, and tooltips. It uses `d3.scaleBand` for positioning, `d3.scaleSequential` with `d3.interpolateBlues` for coloring, and the d3-legend plugin for the color legend.

Loading thumbnail…

Fork of Multiline chart

This fork of a multiline chart visualizes COVID-19 cases in five Scandinavian countries during October 2020. Each country gets its own small SVG chart displaying daily case counts as a line, with a shared color-coded legend and tooltip. The code uses d3.csv for data loading, d3.group to organize data by country, and d3.line with d3.scaleLinear for axes and paths. A d3-legend library creates the custom legend, and the tooltip appears on hover.

Loading thumbnail…

Line Chart - Covid Cases per day in Sweden October 2020

This line chart shows the number of daily COVID-19 cases in Sweden for October 2020, with the day of the month on the x-axis and case count on the y-axis. The chart is rendered as an SVG using D3.js v7, loading data from a CSV file. The code creates linear scales for both axes, draws the axes with gridlines, and generates a steelblue line path via `d3.line()`. Axes and chart titles are added as SVG text elements, and the visualization automatically sizes to the browser window.

Loading thumbnail…

Diverging Bar Chart: Swedish Repo Rent 2010-2024

This diverging bar chart visualizes Sweden’s repo rate from 2010 to 2024, with positive rates in blue and negative rates in red, centered around a zero baseline. Using D3 v7, it loads CSV data via `d3.csv`, maps years to a band scale and percentages to a linear scale, and renders SVG rectangles with a color scale. The chart includes axes, labels, and a legend built with `d3.legendColor`. The data comes from a Gist, and the design effectively highlights periods of negative interest rates.

Loading thumbnail…

Bar Chart with color Legend: Chrysler cars HP

This bar chart displays the horsepower ratings of various Chrysler car models, with each bar’s blue color intensity mapped to its power output and a separate HTML legend showing the color scale. Data is loaded from a CSV file using `d3.csv`, and the chart is rendered as SVG with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color encoding. The `d3-legend` plugin generates the color legend, while axis labels and data labels are added manually.

Loading thumbnail…

Bubble chart - Engine Displacement vs. Fuel Economy - Bubble size = weigth, Color = Num Cylinders

A bubble chart displays engine displacement against fuel economy for a dataset of cars loaded via `d3.csv`. Circle radius encodes vehicle weight using `d3.scaleSqrt`, while color, mapped through `d3.scaleOrdinal` with `d3.schemeCategory10`, distinguishes cylinder counts. Axes and labels are generated with `d3.axisBottom` and `d3.axisLeft`, and the SVG rendering includes a hover effect that increases opacity. A legend lists cylinder categories with colored swatches. The chart uses D3 v7 to bind data and render circles within an SVG container sized to the window.

Loading thumbnail…

Scatterplot: Horsepower and MPG in D3

This scatterplot shows the relationship between horsepower and miles per gallon (MPG) for a set of cars. It displays each car as a circle, with MPG on the x-axis and horsepower on the y-axis. Using d3.csv, it loads car data from a remote GitHub gist, converts the string values to numbers, and maps them to linear scales via d3.scaleLinear. The visualization renders circles as SVG elements, styled with CSS hover effects, and includes labeled axes and a title generated with d3-axis and SVG text.

Loading thumbnail…

Covid Cases in Sweden Jan-Oct 2020

A box plot visualization shows the distribution of daily COVID-19 cases in Sweden from January through October 2020. Each month displays a box-and-whisker plot with median, quartiles, whiskers, and outliers, while a frame and gridlines provide context. The p5.js sketch loads CSV data from a GitHub gist, calculates quartile statistics, and renders the plots on a canvas. It uses p5.js functions like `loadTable`, `map`, and `rect` to draw the visualization dynamically.

Loading thumbnail…

Covid Casualties Distribution in Sweden Jan-Oct 2020

This p5.js visualization displays COVID-19 casualties in Sweden from January to October 2020, showing daily death counts distributed across each month on a scatter plot. Each blue dot represents a single day's reported deaths, with its vertical position corresponding to the daily casualty count and horizontal position mapping to the month. The sketch loads data from a CSV file hosted on GitHub via the `loadTable` function, then uses the Canvas coordinate system with `map` to position points. Axis labels, tick marks, and a title are drawn using p5.js drawing functions, with Plotly loaded but unused in the rendering.

Loading thumbnail…

Covid cases per month for European Countries in 2020

This heatmap visualizes monthly COVID-19 cases across seven European countries in 2020, using color intensity to show case counts from January to November. It loads CSV data via p5.js’s `loadTable`, aggregates cases by country and month, and renders the grid with p5.js `rect` and `map` functions. Hovering reveals exact values through a tooltip, while a color scale bar displays the range. The visualization includes months and country labels, axes, and employs Plotly indirectly via an included script tag, though the heatmap itself is custom-drawn on a p5.js canvas.

Loading thumbnail…

Cylinders relation to Horsepower

This example displays the relationship between engine cylinders and horsepower as a scatter plot, with horsepower on the x-axis and cylinder count on the y-axis. Each data point represents a car from a CSV file loaded via p5.js’s `loadTable` function, sourced from a gist by karldif01. The visualization is rendered using Plotly’s JavaScript API, specifically `Plotly.newPlot`, within a p5.js sketch, with axes labeled "Power (hp)" and "Cylinders" and a title "Cylinders vs Horsepower."

Loading thumbnail…

Chrystler Models Horsepower

This example visualizes the horsepower of Chrysler car models using a bar chart rendered with p5.js. It loads a CSV file from a GitHub Gist into a table object, filters rows for Chrysler models, and maps their horsepower values to vertical bars. The chart includes grid lines, axis labels, and titles, with bar heights scaled proportionally to the maximum horsepower value. The sketch uses p5.js’s `loadTable` and `createCanvas` APIs to build the interactive visualization.