K

Kirsten Lund

@lululand·27 public vizzes

Loading thumbnail…

Sol Lewitt in SVG

The example generates a minimalist geometric composition inspired by Sol Lewitt, using a series of uniformly spaced vertical silver rectangles that stretch the full height of the browser window. It shows a systematic grid of 100 thin bars created entirely with dynamic SVG elements. The code builds the visualization by appending SVG `rect` nodes to the document, setting each bar’s x-coordinate incrementally at intervals of 20 pixels with a fixed width of 10. It relies on the raw Document Object Model API, including `document.createElementNS` and `setAttribute`, to construct the scene in plain JavaScript without external libraries.

Loading thumbnail…

SVG - Faux Data Viz

This example mimics a stream graph using an SVG exported from Figma, composed of layered, hand-drawn path shapes with custom fill colors. The visualization is rendered with React and SVG, with each path and rectangle hardcoded in the markup rather than generated from data. CSS styles the text with the Share Tech font and centers the layout, while the SVG itself sets specific dimensions and fills. The faux data viz demonstrates how static vector graphics can simulate the look of a dynamic, data-driven chart.

Loading thumbnail…

SVG shapes and animation sandbox

A playful sandbox demonstrates how SVG shapes and animation can compose a simple landscape. The viewport is filled with a sequence of horizontal `<rect>` elements using a palette of blue CSS color names to create a stylized sky. A pink flower is constructed from positioned `<circle>` and `<path>` elements, while two groups of cloud shapes (one light, one dark) are defined as reusable `<g>` elements. The clouds are set in motion using the SVG `<animateMotion>` element, which moves them along a defined cubic Bézier path with different durations and repeat counts, creating a gentle, looping drift.

Loading thumbnail…

Fork of Flowers

The visualization shows a dark green gradient field filled with 501 randomly positioned elliptical flowers, each composed of two crossed ellipses and a central circle. The flowers scatter outward from the center as they scale in size and shift through red, orange, and yellow color palettes. Built with React and rendered as SVG, the code generates each flower from the Ellipse component, using a shadow filter, random x/y coordinates, and a rotation angle. Color values derive from an index-based progress variable mapped to RGB strings.

Loading thumbnail…

Fork of Tree Fractal

An interactive tree fractal rendered on Canvas, where the branching pattern changes in response to mouse movement. The visualization draws a recursive, branching structure from a central trunk, with horizontal mouse position controlling branch length ratio and vertical position controlling the angle between branches. It uses the Canvas 2D API with recursive `drawTree` calls, and accommodates high pixel density displays by scaling the canvas using `devicePixelRatio` and CSS dimensions. The code adapts an example from HTML5Examples.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG path drawing with a large, centered page title. It uses raw SVG elements with path commands for quadratic Bézier curves (Q and T), cubic Bézier curves (C), and arcs (A), along with a green fill with opacity. The code includes commented-out examples exploring viewBox scaling and coordinate systems, plus a console log statement. The rendering relies entirely on native SVG within an HTML document, with no external libraries.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a stylized scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each data point is rendered as a teal circle with a tooltip displaying its x-value. The visualization uses React components to build the SVG, with D3 v5 providing the linear scales (`scaleLinear`), axis generation via `AxisBottom` and `AxisLeft`, and CSV data loading through `useData`. The Poppins font and custom axis colors give the chart a modern, polished aesthetic.

Loading thumbnail…

Film nerd data with Vega-Lite API

This visualization displays one person’s film-watching records from a CSV file, plotting watch dates on the x-axis and countries on the y-axis. Each circle represents a film, with color encoding the user’s grade and tooltips revealing the title. The example uses the Vega-Lite API’s `markCircle` and `encode` methods, with D3’s `csv` loader to fetch data. Styling is customized via a config object, while the chart is rendered as SVG inside a full-window layout.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segmented by religion. Hovering over a bar reveals a tooltip with the exact population count; hovering over the legend highlights that religion’s segments across all bars using a semi-transparent overlay. The visualization relies on D3’s layout and stack APIs, SVG axes, and the d3-legend and d3-tip libraries, with data sourced from the Pew Research Global Religious Landscape.

Loading thumbnail…

Fork of Total Number of Rockets Throughout The Years

This bar chart shows the total number of rocket launches per year, with each bar segmented by company name to reveal the distribution of launches across organizations over time. The visualization uses a stacked bar layout where the y-axis encodes the count of launches and color distinguishes between companies. Built with Vega-Lite and rendered through the vega-lite-api, the chart groups and aggregates the data using `vl.groupby` and `vl.count`. It loads CSV data from a GitHub-hosted global space launches dataset via `d3.csv`, and includes a custom tooltip displaying both the launch count and company name.

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Using React and D3 v5, the visualization encodes population counts as horizontal bars via SVG `<rect>` elements, with axes rendered by custom `AxisBottom` and `AxisLeft` components. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear`, formats tick labels with `d3.format`, and provides tooltips through SVG `<title>` tags. The chart’s distinct styling includes the Poppins font and a teal color scheme.

Loading thumbnail…

Bar chart - world population data

This example visualizes world population data as a bar chart, comparing values across countries or regions through bar heights. Built with React and D3 v6, the chart uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with d3.axisBottom and d3.axisLeft rendering the axes. The code loads population data and renders bars as SVG rects, with labels for each category. Bars are colored distinctly, and the chart updates dynamically within a React component that manages the D3 lifecycle. The data source is embedded in the example, and the visualization emphasizes readability through generous spacing and clear typography.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the Grade values for the top 10 countries in a film-related dataset. The chart uses React to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded via D3’s `csv` function from a GitHub gist, and each bar includes a native SVG `<title>` element for tooltips. The visualization applies a custom Poppins font and teal styling to the marks.

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

This fork of a line chart visualizes cumulative coronavirus deaths by country over time, using a log-scaled y-axis to accommodate wide variation in death tolls. Hovering over any point triggers a Voronoi overlay, powered by `d3.Delaunay`, to highlight the nearest data point, illuminate the corresponding country’s line, and display a tooltip with the date, country, and death count. The chart is built with React and D3 v5, rendering SVG paths from the Johns Hopkins COVID-19 dataset, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Choropleth Map

A world map displays countries colored by their economy category using an ordinal color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, then renders each country as an SVG path using `d3.geoPath` with a natural Earth projection. Users can zoom and pan via the `zoom` event transform, while a color legend created with custom SVG shapes shows the category-to-color mapping. Hovering over any country highlights it in red and reveals its name and economy class in a tooltip.

Loading thumbnail…

Refactored Bar chart

This bar chart displays the population of ten countries from a United Nations 2019 dataset, using horizontal bars to compare values. The visualization is built with React and D3 v6, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles render the marks, while custom React components encapsulate the axes and data mapping. Population values are parsed from CSV and sorted by the top ten entries.

Loading thumbnail…

Styled Bar chart with Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2020 UN population data, loaded via `d3.csv`. The chart renders custom axes with `scaleBand` for countries and `scaleLinear` for population values, drawing tick marks and labels directly. Built with React and D3 v6, it uses SVG elements like `rect` and `text` inside a transformed group to position bars and labels, with margins applied for layout.

Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel types including solids, liquids, gas, cement production, and gas flaring. The chart uses d3.stack with stackOrderAscending and d3.area with curveBasis to render the layered paths, while d3-area-label positions text labels within each segment. Data comes from a CSV file loaded via d3.csv, with emissions converted from raw values to gigatons. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for color encoding, and responds to window resize events for responsive rendering.

Loading thumbnail…

Fork of Total Number of Rockets Throughout The Years

This bar chart shows the total number of rockets launched each year, with bars colored by the company’s country of origin. Built with Vega-Lite and D3, it uses the `groupby` transform to aggregate yearly counts by country and encodes the result with `vl.markBar()`, `vl.x().fieldN('Year')`, `vl.y().fieldQ('Count')`, and a color field for origin. The tooltip displays the count and country. Data comes from a Kaggle CSV loaded via D3’s `csv` function, rendered as an SVG with a custom dark theme.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization shows migrant deaths and missing persons on a world map, with a linked time-series histogram below. Brushing a time range in the histogram filters the map’s bubble radii, which encode total dead and missing counts per location. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and spheres from TopoJSON data, while React’s `useMemo` and `useEffect` manage efficient rendering. The histogram is built with `d3.bin`, `d3.scaleTime`, and `d3.brushX` for interactive filtering.

Loading thumbnail…

Fork of POI Category Tree

This example visualizes the hierarchy of ArcGIS-supported point-of-interest categories, with roughly 300 child categories grouped under 10 major parent categories. The tree is laid out horizontally using `d3.tree()` and `d3.hierarchy()`, with nodes positioned by size and links drawn via `d3.linkHorizontal()`. The SVG rendering is zoomable and pannable through `d3.zoom()`, and labels are angled at each leaf for readability. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Vega-Lite API Template 2

This example visualizes one person’s film-watching records, plotting each movie as a circle positioned by its watch date on the x-axis and its grade on the y-axis, with color encoding the grade value. The circles are semi-transparent and tooltips reveal the film title. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and data is loaded asynchronously from a CSV file via d3.csv. The code customizes axis and label styling through a config object, and the final SVG view is rendered full-screen, fitted to the window dimensions.

Loading thumbnail…

Rendering Data with React & D3 - CSS colors

This example renders the full set of CSS named colors as a circular pie chart, with each color occupying an equal slice. The visualization loads a CSV file from a GitHub Gist using D3’s `csv` utility, then employs D3’s `pie` layout and `arc` path generator to compute the slice geometry. React handles the SVG rendering, mapping each data row to a `<path>` element whose `fill` attribute is set from the `RGB hex value` column. The code demonstrates a clean integration of D3’s data-processing and layout functions with React’s component-based UI.

Loading thumbnail…

Mouse follow

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates real-time interaction tracking, with the circle's position updating instantly on every mouse movement. Built with React, the app uses the `useState` hook to store cursor coordinates and the `useCallback` hook to handle the `onMouseMove` event, then renders the circle as an SVG `<circle>` element with dynamically updated `cx` and `cy` attributes.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize CSS named colors data within a React application using D3 utilities. It displays a text summary showing the dataset size in kilobytes, row count, and column count, with a "Loading..." placeholder before the data arrives. The code uses React’s `useState` and `useEffect` hooks to manage async state, and D3’s `csv` function to fetch the remote CSV file, while `d3.csvFormat` computes the summary metrics.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v6, displaying summary statistics about the dataset in a large text format. It fetches a remote CSV file containing named CSS colors from a GitHub gist using `d3.csv()`, then calculates and shows the file size in kilobytes, the number of data rows, and the column count. The code also includes commented-out alternatives using the Fetch API with `async/await` and `d3.csvParse()`, highlighting different parsing approaches within the same visualization.

Loading thumbnail…

Fork of Waseem's Rank on HackerRank

Fork of Waseem's Rank on HackerRank displays the author's global rank progression on HackerRank as a step chart, with date on the x-axis and rank on a logarithmic y-axis. Built with React and D3 v6, it uses SVG for rendering, with a tooltip that snaps to data points on mouse movement, showing the date and rank. The data comes from a hardcoded JavaScript array of 48 date-rank pairs from November 2020 to January 2021, plotted using d3.scaleTime and d3.scaleLog scales, with d3.line generating the path.