Skip to main content
Log in
L

larsboergo

@larsboergo·20 public vizzes

Loading thumbnail…

Fork of Kvanto - pie v3 -label

A small multiples pie chart displays transaction payment methods and their statuses, with labels and leader lines connecting slices to text. The visualization updates smoothly via `d3.transition` when a payment method label is clicked. Built with D3 v6, it uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.rollup` to group and aggregate data loaded from a remote API. A spectral color scale encodes categories, and SVG renders the animated chart.

Mar 9, 2022
Loading thumbnail…

Fork of Fork of kvanto - transaction v2

This interactive D3.js (v6) visualization displays transaction data from Kvanto as two overlaid time-series line charts: red lines and circles represent transaction amounts in DKK, while blue lines and circles show transaction counts, each with its own y-axis. Users can switch between time periods (1 month, 3 months, 1 year) via clickable text buttons that trigger data refreshes and animated transitions, where old chart elements fade out before new ones appear. The SVG-based rendering uses d3-scaleTime, d3-scaleLinear, d3-axisLeft/Right, and d3-line to build the charts, pulling data from a remote URL via XMLHttpRequest.

May 16, 2021
Loading thumbnail…

Tabel Kvanto

This example displays a summary table of transaction statistics, comparing accepted, declined, and refunded amounts and counts for today, yesterday, and the last month. The code fetches transaction data from a remote API, deduplicates entries by order ID, and aggregates the values into a tabular layout. Users can click on column headers to sort rows, with D3’s `select` and `csv` functions rendering the table and toggling ascending or descending sort order via CSS classes. The visualization uses D3 v6 and relies on a custom HTTP request to retrieve the JSON data.

May 2, 2021
Loading thumbnail…

Fork of kvanto - transaction v1

This visualization displays transactions from the Kvanto API, plotting daily transaction amounts in Danish kroner on the left axis and transaction counts on the right axis over time. It uses d3.scaleTime and d3.scaleLinear for the x and y scales, with d3.line generating the red and blue paths for each metric, while circles represent individual data points. The data is fetched via XMLHttpRequest, filtered by status, and aggregated using d3.rollup with d3.sum.

Apr 23, 2021
Loading thumbnail…

kvanto - transaction

This visualization displays approved transactions from the kvanto.com data source as a line chart with circular markers. The chart plots transaction amounts (in DKK) over time on a Cartesian coordinate system, using red semi-transparent circles to highlight individual data points connected by a red line. The implementation uses D3 version 6 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `curveBasis`, rendering to SVG. Data is fetched via `XMLHttpRequest`, filtered for successful authorizations, and mapped to date and amount values for visual encoding.

Apr 19, 2021
Loading thumbnail…

Kvanto - pie v3

This animated donut chart visualizes payment transaction counts by card method and status, sourced from a live API endpoint at kvanto.com. The chart groups data by order ID, filters to approved and declined statuses, and aggregates counts via `d3.rollup`. Using `d3.pie` and `d3.arc`, it renders colored slices with labels and polylines, applying `d3.scaleOrdinal` with an interpolated spectral palette. Transitions animate updates smoothly through `transition.attrTween` and opacity changes, while `d3.group` structures the hierarchical data before rendering in SVG.

Apr 9, 2021
Loading thumbnail…

Slider test 1

A range slider, built with the d3-simple-slider library, selects an interval on a horizontal axis. The slider’s default value is set between 0.015 and 0.02, and its current selection is displayed as a formatted percentage range in a paragraph. A D3 v6 SVG visualization renders the control, with the slider’s fill color set to blue. The underlying data, drawn from a CSV file, is not used in the interaction.

Apr 6, 2021
Loading thumbnail…

Temperature in San Fransisco line chart

This example displays a line chart of temperature measurements over time in San Francisco, using a red smoothed curve to emphasize trends. The visualization renders as an SVG using D3 v6, with a time-scaled x-axis and linear y-axis. It employs d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with curveBasis to generate the path. Gridlines and labeled axes are added via axisBottom and axisLeft, with data sourced from a VizHub-hosted CSV file.

Apr 6, 2021
Loading thumbnail…

Fork of Kvanto - pie v2

This example shows an interactive pie chart visualizing transaction data grouped by card method (VISA, MASTERCARD, VISAELECTRON) and status, with data loaded from a remote API. The chart renders as SVG paths using `d3.pie` and `d3.arc`, with a donut layout and labels connected via polylines. The code uses `d3.rollup` and `d3.group` to aggregate transaction counts, and transitions animate arc updates and label repositioning via `transition.attr`. A spectral color scale maps categories, and clickable labels are appended for potential interactivity.

Mar 30, 2021
Loading thumbnail…

Bowl of Fruit - general update pattern

Five fruit circles animate through the general update pattern with D3's data join, enter, update, and exit selections. Apples transition from radius 50 to 20 when replaced by lemons, while removed fruits shrink to zero before deletion. The visualization uses `selection.merge`, `selection.transition`, and ordinal scales from d3-scale to map fruit types to sizes and colors in an SVG.

Mar 29, 2021
Loading thumbnail…

Tabel eksempel

This example displays a tabular dataset of fictional characters and their attributes, such as names, job titles, and favorite colors, loaded from a CSV file using D3 v6’s `csv` function. The table renders rows and columns via D3’s data joins, with column headers created from the object keys. Clicking any header sorts the table rows alphabetically by that column, toggling between ascending and descending order using D3’s `sort` method. Responsive CSS in `styles.css` transforms the table into labeled cards on smaller screens, while the header cells display arrow indicators for sort direction.

Mar 9, 2021
Loading thumbnail…

Kvanto - pie

A donut chart displays transaction amounts grouped by payment method from the Kvanto API, filtering only approved transactions. The visualization uses d3.pie and d3.arc to generate and render SVG paths, with d3.scaleOrdinal and an interpolateSpectral color scale. Labels are positioned using arc.centroid, and transitions animate updates when data changes.

Mar 1, 2021
Loading thumbnail…

Temperature in San Fransisco scatterplot

This scatterplot displays temperature readings in San Francisco over time, with each point representing a measurement plotted along a time-scaled x-axis and a linear temperature y-axis. The chart uses D3 v6’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while data is loaded via `csv` from a remote dataset. Circular marks are rendered with SVG, styled in steel blue, and the chart includes labeled axes for clarity.

Feb 14, 2021
Loading thumbnail…

soejle demo

This visualization displays population data for the ten most populous countries as a bar chart. Each bar’s height reflects the population value, with steelblue rectangles drawn using D3’s `scaleBand` and `scaleLinear` for positioning, while `axisLeft` formats tick labels with the `format('.2s')` shorthand. The country names come from a CSV file parsed with `csv`, and the chart uses SVG rendering with a multiply blend mode for the bars.

Feb 11, 2021
Loading thumbnail…

test

This example shows a bar chart of country populations that reorders its bars according to a user-selectable sorting option. The chart initially displays data in descending frequency order, but a dropdown menu allows switching between alphabetical and ascending or descending value sorting. The visualization uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with SVG rectangles for rendering. The data comes from a CSV file loaded into the chart.

Feb 11, 2021
Loading thumbnail…

Auto MPG Summary

This visualization displays the top 10 most populous countries as circles on a horizontal bar chart, with country names on the y-axis and population on the x-axis. The chart uses D3 v6 APIs including `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for ticks. Circle radii are fixed at 10 pixels, and data is sourced from an external CSV file of auto MPG records, which is incorrectly repurposed for population values.

Feb 10, 2021
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with circles positioned along a linear x-axis for population values and a point scale y-axis for country names. The visualization uses D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, rendered as SVG. Data loads from a CSV file via `d3.csv`, with population values converted from thousands. Grid lines, tick formatting, and an axis label enhance readability.

Feb 10, 2021
Loading thumbnail…

customizing axis

This example shows a horizontal bar chart of the world’s top 10 most populous countries, using population data from a CSV file. The chart customizes its axes by removing default domains and tick lines, applying a tick format that abbreviates large numbers (e.g., converting billions to “B”), and adding a styled axis label. Built with D3 v6, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with a custom `tickFormat` for the x-axis.

Feb 10, 2021
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, using the `d3.csv` loader to read the data file and the `d3.scaleLinear` and `d3.scaleBand` functions to map population and country names to the SVG canvas. The code builds the visualization by appending a `g` element, adds axes with `d3.axisLeft` and `d3.axisBottom`, and renders the bars as `rect` elements with a steelblue fill. The chart is a static SVG, with the y-axis labeled by country and the x-axis scaled to the population values.

Feb 10, 2021
Loading thumbnail…

Let's Make a Face

A cheerful cartoon face constructed from basic SVG shapes—a yellow circle, black eyes, and rectangular eyebrows—renders on a neutral background. An eyebrow group animates upward and back down using chained `transition` calls with `duration(2000)`, creating a playful expression. The face’s components are positioned via `d3.arc` for the mouth, while circles and rects are placed with explicit `cx`, `cy`, and `x` attributes. D3 v6 selections and attribute manipulation drive the scene, with a centered `g` transform aligning all features.

Jan 25, 2021