Peter S

Fork of SANKEY Experiment

A directed-flow diagram maps notification counts from a total source through matched and scrap categories into downstream targets. The visualization uses a custom `d3.sankey` layout with SVG rendering, featuring draggable nodes and hoverable links with adjustable stroke opacity. Node heights encode link values, and the layout algorithm iteratively optimizes node positions to reduce collisions. Data comes from a static JSON file, with node labels styled in bold Verdana text and the chart embedded in a React application shell.

Jun 19, 2021

Fork of Knowledge Graph2

This knowledge graph visualizes the relationships between actors, directors, and films, using labeled, arrowed links to show actions like “Acted in” and “Directed.” It loads data from `data.json` and renders an SVG with D3 v6. The layout is computed by `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable via `d3.drag`, and the view supports zooming and panning through `d3.zoom`. Relationship labels are placed along curved paths using `textPath` elements.

Feb 11, 2021

Fork of Knowledge Graph

This interactive network diagram visualizes a knowledge graph of robot components, using colored nodes and directed links with arrowheads to show relationships between 13 components. Node colors encode team assignments through a custom ordinal scale, while SVG markers render the arrowheads on links. The visualization uses d3.forceSimulation to position nodes, with data embedded directly in the script as a JavaScript object containing nodes and links arrays.

Feb 11, 2021

Choropleth worldmap with cities

This interactive choropleth world map uses a categorical color scale to depict each country’s income group, with a clickable legend that filters and highlights matching regions plus dims others in SVG. It supports pan and zoom via d3.zoom. The map also plots major Russian cities with their absolute locations using data from a local TSV file. Built with React and D3 v5, it renders countries from TopoJSON using d3.geoPath with a natural Earth projection, while `d3.scaleOrdinal` maps income groups to a spectral palette.

Aug 9, 2020

Choropleth map

This choropleth map colors countries by their income group using a categorical color scale applied from the `schemeSpectral` range. The visualization renders geographic boundaries from TopoJSON data processed with `topojson.feature` and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. A legend, built with a custom `colorLegend` function, displays the colored circles and labels for each income category. Country names and income groups appear as tooltips via SVG `title` elements, and the map supports zooming through `d3.zoom`.

Jul 4, 2020

Choropleth map with interactive filtering

A choropleth map of world countries colored by income group, with interactive filtering through a color legend. Clicking a legend category highlights matching countries and dims others; clicking again clears the filter. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom controls from `d3.zoom`. It loads TopoJSON country boundaries from the world-atlas dataset, merges names from a TSV file, and renders in SVG with `d3.scaleOrdinal` and `schemeSpectral`.

Jun 30, 2020

Šírenie koronavírusu na Slovensku - mapa

A choropleth map of Slovakia shows the spread of COVID-19 infections by district, with red circles scaled by the number of diagnosed cases as of March 16, 2020. The map uses D3 v5 with `geoMercator` projection, `geoPath` for rendering district boundaries from TopoJSON data, and `scaleLinear` for circle sizes. A size legend and total case count are displayed, and the map supports zoom and pan interactions.

Mar 18, 2020

Choropleth map of Slovakia II

This interactive choropleth map colors Slovakia’s districts by region using an ordinal color scale and a Mercator projection. Clicking a legend item highlights matching districts and dims others, while zooming and panning are enabled via `d3.zoom`. The map is rendered as SVG with `d3.geoPath`, using TopoJSON and TSV data joined by district name, with hover tooltips showing district names and values.

Feb 18, 2020

Wheel of Fortune Bingo

A spinning wheel of 30 labeled slices presents trivia questions about CSS and HTML. Spinning the wheel selects a random slice, which displays a corresponding question in a separate panel. This example demonstrates fundamental D3.js v5 DOM manipulation and animation using SVG elements and transition methods. The code uses `d3.select`, `d3.append`, and `transition.attrTween` to rotate the wheel and update the displayed question based on the selected category.

Nov 30, 2019

Pika 3D Dice

Three.js and D3 render a cube mapped with a hand-drawn Pikachu face on a canvas texture, creating a 3D dice with a checkerboard ground plane and point-light shadowing. The cube rotates automatically via a d3.zoom transform, while the camera can be orbited, panned, and zoomed with THREE.OrbitControls. Users can also move the cube along the x and y axes with WASD keys and reset its position with the spacebar.

Nov 30, 2019

Scatter plot with menus

This example presents a scatter plot of automobile data, where users actively select which numerical columns to display on the x- and y-axes via two interactive dropdown menus. The visualization updates dynamically, smoothly animating the repositioning of data points over a 1.5-second transition with a staggered delay, making comparisons between different attribute pairings intuitive. The implementation leverages D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart, and it uses custom `dropdownMenu` and `scatterPlot` modules to manage the SVG interface. Data is loaded from a remote CSV file using `d3.csv`.

Selecting a Year on Linechart

A line chart displays population growth for world regions from 1950 to 2100, with each region colored via d3.scaleOrdinal and d3.schemeCategory10. Moving the mouse over the chart triggers d3.mouse to invert the x-scale, updating a vertical line marking the selected year. The visualization uses d3.csv to load UN population data, d3.nest to group by region, and d3.line with curveBasis to draw the paths.

Melting Data for Multiple Lines

This example visualizes population trends for countries over time as multiple smoothed lines, using a nested data structure to group values by region. The chart displays yearly population estimates from the UN’s medium variant dataset, covering 1950 to 2100. Built with React and D3 v5, the code employs `d3.nest` for data grouping, `d3.line` with `curveBasis` for path generation, and `d3.scaleOrdinal` with `schemeCategory10` for color mapping. A custom color legend and axes with tick formatting complete the SVG rendering.

Circles on a Map

This interactive visualization displays global population estimates for 2018 as proportional circles centered on each country, overlaid on a natural Earth projection map. The map uses D3 v5’s `geoPath` and `geoNaturalEarth1`, while circle radii are scaled with `scaleSqrt` based on UN population data. A zoom behavior lets viewers pan and scale the map, and a custom size legend with tick labels explains the scaling. Countries without data appear in a distinct color, and hovering reveals country names and population figures via SVG `<title>` elements.

Line Chart with multiple Lines

A line chart displays one week of temperature readings from multiple cities, with each city represented by a separate smoothed line and distinguished by color from the categorical color scale. The chart includes labeled axes for time and temperature, a title, and a color legend listing city names. The visualization is built with React and D3 v5, using d3.line with curveBasis, scaleTime, scaleLinear, scaleOrdinal, and d3.nest to group data. Temperature data comes from the Data Canvas Sense Your City project, rendered as SVG paths with axis components from d3.axis.

Circles on a Map of Slovakia

A choropleth map of Slovakia displays districts colored by municipal boundaries, overlaid with scaled circles indicating the number of apartments in residential buildings per district. The visualization uses D3 v5 with a Mercator projection and `geoPath` to render the TopoJSON geometry, while circle radii are sized via a linear `scaleLinear`. District data from a TSV file is joined with geometric features, and a `sizeLegend` displays the population scale. Pan and zoom interactions are enabled through a D3 zoom behavior.

Oct 2, 2019

Hierarchia filozofických otázok

A hierarchical tree visualization displays a branching structure of philosophical questions in Slovak, rooted at "Je istou pravdou, že ja existujem?" with sub-questions exploring truth, existence, and ethics. The code loads data from `data.json` using `json()`, applies the `tree` layout with `linkHorizontal` for curved paths, and renders SVG text nodes. Zooming is enabled via `zoom()` on the top-level SVG group. The example also imports and uses `getCars`, `formatCar`, and `generateReport` modules, though their output is not integrated into the visualization.

Sep 28, 2019

Philosophy schools

This radial tree visualizes the hierarchical relationships among philosophy schools and associated philosophers, using a dataset from data.json. The layout applies d3.cluster to position nodes in a circular arrangement, with curved paths linking parent and child nodes. Text labels are rotated and glow-enhanced for readability, while d3.zoom enables panning and zooming across the visualization. The implementation uses D3 v4 APIs including d3.hierarchy, d3.cluster, and SVG path elements, with font sizes scaled by node depth.

Sep 28, 2019

Tree of philosophy schools

A hierarchical tree visualizes philosophy schools and their associated philosophers, using a horizontal layout to display the data from `data.json`. D3 v5's `tree` and `hierarchy` layout functions arrange the nodes, while `linkHorizontal` draws the connecting paths. The SVG rendering supports zooming and panning via the `zoom` function, and text labels are positioned and styled based on node depth.

Sep 28, 2019

lets make a face

A cartoon face built from SVG shapes animates its right eyebrow while displaying a filtered car report. Yellow face circle, eyes, and an arc-based mouth are constructed with D3 selections, with transitions driving the eyebrow motion. A hardcoded JSON dataset of used cars loads asynchronously, and a report listing affordable cars is generated and rendered in a `<pre>` element.

Sep 25, 2019

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data set, showing the relative size of each category and subcategory through the angle and radius of its arc segments. Users can click on any segment to zoom in and explore deeper levels of the hierarchy, with smooth animated transitions between views. The visualization is built with D3 v5, using the `d3.partition` layout algorithm and `d3.arc` for generating the arc paths, while `d3.interpolate` and `transition.attrTween` handle the animated zooming. The color scheme is generated from a rainbow interpolation across the root categories.

Sep 23, 2019

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. The code maps a 30×30 grid of points through sine and cosine functions using time-based parameters, causing the positions and sizes of the circles to shift continuously. Each frame applies a semi-transparent black overlay before redrawing, creating fading trails that enhance the motion effect. The rendering uses the Canvas 2D API’s `arc()` and `fillRect()` methods, with colors computed from sine waves tied to the grid position and animation time. The visualization is inspired by a mathematical patterns tutorial and runs as an infinite loop via `requestAnimationFrame`.

Sep 20, 2019

Choropleth map of Slovakia

This choropleth map of Slovakia colors districts by region, using a spectral color scale. The map is rendered with SVG and uses `d3.geoMercator` and `d3.geoPath` to project and draw administrative boundaries from TopoJSON data. A legend allows selection of a region, which highlights the matching districts and dims others. Zoom and pan are enabled via `d3.zoom`.

Sep 18, 2019

Color and size legends

Two reusable D3 v5 legends illustrate color and size encoding side by side in a React-based VizHub example. The color legend maps an ordinal scale with fruit categories to red, yellow, green, and orange circles, while the size legend uses a square-root scale to map numeric ticks to proportional circle radii. Both legends are built with SVG selections, enter/merge/exit patterns, and custom parameters like spacing and text offsets. The page also demonstrates asynchronous data loading with a Promise, filtering car listings to generate a formatted report.

Sep 18, 2019

Temperature in San Francisco Line chart

A line chart displays one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a smooth curve to connect data points. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to render the SVG. Data is loaded from a CSV file hosted on VizHub, and the chart includes labeled axes, a title, and gridlines via tick sizing.

Sep 17, 2019

Cheap tricks for Slovakia

A choropleth map of Slovakia's districts is rendered using SVG, with district boundaries drawn via `d3.geoMercator` projection and `d3.geoPath` from TopoJSON data. The map includes zoom and pan interactions through `d3.zoom`, which transforms the entire map group. Hovering highlights a district by changing its fill color. Below the map, a loading message is replaced with a text report listing cheap cars (under $3,000) generated asynchronously, demonstrating Promise-based data loading and string formatting with ES6 modules.

Cheap tricks for interaction

Zoom and hover interactions animate a world map built from TopoJSON, with countries drawn as SVG paths colored light green and dark blue ocean backing. The page also demonstrates asynchronous data loading and text generation: after a simulated delay, a report of four cars under $3000 appears. D3 v5's `geoNaturalEarth1` projection, `geoPath`, `zoom`, and `select` manage the map, while JavaScript Promises and ES6 modules handle the car data flow.

Map of Slovakia II

A choropleth-style map of Slovakia renders district boundaries as SVG paths, filled in light green with thin black strokes, on a white background. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON data from a local `okresy.json` file into geographic features. An auxiliary feature below the map displays a list of filtered car prices, generated asynchronously from a hardcoded dataset via a promise.

Cheap tricks for interaction

This example demonstrates interactive map rendering with D3.js, displaying world countries with hover effects that change their fill color and tooltips showing country names. The visualization loads geographic data from the world-atlas package, combining TopoJSON with TSV metadata to map country IDs to names. It implements a zoom feature using D3’s zoom event system, which applies transform attributes to the map container. The code also includes a car listing report that filters and formats data asynchronously from JSON, showcasing D3’s promise-based data loading and ES6 module integration.

lets make a Map of Slovakia

This example displays a map of Slovakia using a dark blue spherical backdrop and light green country boundaries. It loads world TopoJSON data, converts it to GeoJSON, and renders the paths with an SVG projection. The code uses `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to position and draw the geometry. It also demonstrates asynchronous data loading via a Promise that simulates fetching car records, then formats and filters them into a text report shown on the page.

lets make a Map

This example demonstrates how to create a geographic map by loading world country boundaries and rendering them as SVG paths. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the countries, while `topojson.feature` converts the TopoJSON data from the world-atlas dataset into GeoJSON. The visualization also includes a basic data-reporting sidebar that filters and formats mock car listings, showing how D3 modules can combine geographic mapping with DOM updates.

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and miles per gallon for car models, with each circle representing a vehicle. The axes are labeled and the chart includes a title. The visualization uses d3.scaleLinear to map data values to screen coordinates, d3.axisBottom and d3.axisLeft for tick marks, and SVG circles with steelblue fill and opacity. Data is loaded asynchronously from a CSV file using d3.csv.

Aug 29, 2019

Bowl of fruit - general update pattern

This example demonstrates the general update pattern in D3 by rendering a bowl of fruit as SVG shapes. Apples and lemons appear as colored circles with labels, positioned within a bowl drawn with rectangles and polylines. A React-less data flow using `d3.select`, `scaleOrdinal`, and a `data()` join shows how enter, update, and exit selections handle dynamic fruit arrays. Over time, setTimeouts modify the fruit list—removing items, changing a fruit type—and re-render to reflect those changes. The code relies on D3 v5 and SVG rendering, with data generated locally via random IDs.

Aug 24, 2019

blank canvas

The example presents an interactive SVG canvas that fills the browser viewport with a rounded rectangle, while asynchronously loading car listings from a local JSON dataset. D3 v5 selections (`select`, `attr`) handle DOM manipulation and styling after a simulated two-second delay. The `getCars` promise resolves sample vehicle data, which `generateReport` filters by price and formats via `formatCar` into readable text. The interface displays a loading message in a `<pre>` element until the data arrives, then renders the result in a message div.

Aug 22, 2019

Bowl of fruit - Hover to select

A bowl of fruit renders as a row of colored circles, each sized by fruit type, with hover highlighting the selected fruit via a black stroke. The example demonstrates data joins and transitions, using D3 v5 scales (scaleOrdinal) and selection methods (enter, merge, exit). Circles animate radius and position over one-second transitions as fruits are added, removed, or changed programmatically, with React-like state management via a setSelectedFruit callback. SVG serves as the rendering target.

Aug 18, 2019

Bowl of fruit - Click to select

A bowl of fruit demonstrates interactive selection with animated SVG transitions in React. Apples render as red circles and lemons as yellow circles, with click-to-select highlighting the chosen fruit with a black outline. The example uses d3.scaleOrdinal for color and radius mapping, while d3 transitions animate circle radius changes when fruits are added or removed. Data updates occur through timed functions that remove, replace, and filter fruit array elements, showcasing enter, update, and exit selections.

Aug 17, 2019

Bowl of fruit

A bowl of fruit demonstrates full life-cycle transitions with D3 data joins, animating fruit entering, updating, and exiting over time. Red apples and yellow lemons are rendered as SVG circles with scaleOrdinal color and radius scales, while selection.merge and transition methods handle position and size changes. The example also showcases asynchronous data loading with getCars, a promise that populates a report using formatCar and generateReport.

Aug 17, 2019

World population

This example displays world population trends over time using an area chart, with the x-axis representing years and the y-axis showing population counts. The visualization renders as an SVG with a maroon, partially transparent filled area and axis labels. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `axisBottom`, `axisLeft`, and `curveBasis` for smoothing, and loads population data from a CSV file. The dataset spans multiple years, with values formatted using `d3.format`.

Temperature in San Francisco Area chart

This example displays a one-week temperature trend for San Francisco as a smooth area chart, using an SVG rendering with D3 v5. The visualization maps timestamps to a time scale on the x-axis and temperature values to a linear scale on the y-axis, with an area generator using a basis curve for smoothing. Axis labels and a title are included, and the chart applies a maroon fill with opacity. The data, loaded from a CSV via `d3.csv`, comes from Gray Area’s "Sense Your City" initiative, while the code also imports utility modules for car data processing.

Temperature in San Francisco Scatter plot

This example visualizes the temperature in San Francisco over time using a scatter plot, with each circle representing a temperature measurement at a specific timestamp. The data originates from the Gray Area “Sense Your City” initiative and is loaded via `d3.csv` from an external dataset. The visualization uses `d3.scaleTime` for the x-axis time scale and `d3.scaleLinear` for the y-axis temperature scale, with `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are drawn as SVG elements with semi-transparent steelblue fill, and the chart includes labeled axes and a title.

Scatter plot

This scatter plot displays the populations of the top 10 most populous countries, using the D3.js library (v5) to render an SVG visualization. The x-axis maps population values (in thousands) with a linear scale and custom tick format, while the y-axis lists country names using a point scale. The code imports specific D3 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, and reads data from a local CSV file.

Customizing axes

This example shows a horizontal bar chart of the ten most populous countries, with a custom formatted x-axis and a styled y-axis. The D3 script (v5) loads data from a local CSV file and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG. It removes default axis lines, customizes tick labels to abbreviate numbers (e.g., "1.43B"), and adds a title and an axis label.

Bar chart population

This bar chart visualization displays population data for ten countries, with horizontal bars representing each nation’s population in thousands. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render axes. Data is loaded asynchronously from a CSV file via `d3.csv` and converted to numbers. The SVG rendering is structured with margins, and bars are appended as `rect` elements with steelblue fill.