K

KoGor

@KoGor·27 public vizzes

Loading thumbnail…

Double Radial Opposing Stacked Bar Chart

Two concentric rings of stacked bar segments show accident counts on a road, with the inner ring representing one day type and the outer ring another. Each segment’s arc length encodes a kilometer marker, while the radial extent shows the count for either the left or right lane, with the two lanes stacked in opposite directions from a central baseline. Built with D3 v4, the chart uses `d3.scaleBand` for angular positions, `d3.stack` with a custom opposing offset, and `d3.arc` for the ring geometry, rendering all elements as SVG. Data comes from a CSV file with columns for kilometer, holiday flag, and lane counts.

Loading thumbnail…

Radial Opposing Stacked Bar Chart II

A radial opposing stacked bar chart displays four data columns from a CSV file, with the circular axis divided into 109 segments representing kilometers of a road. The chart uses opposing bars extending outward and inward from a central ring to compare two categories (nonlethal and lethal accidents) across two lanes. Built with d3.v4, it renders via SVG paths using `d3.arc` and `d3.stack` with a custom offset function. The visualization includes a legend, tick labels, and Russian-language labels for the plotted data.

Loading thumbnail…

Radial Opposing Stacked Bar Chart I

A radial opposing stacked bar chart displays two data columns as arcs extending outward from a shared center, with one category drawn in the opposite direction from the other. The visualization uses d3.stack with a custom stackOffsetOpposing function to align the opposing bars, and d3.arc to render the annular segments. Data comes from a CSV file containing mileage markers and accident counts for two road sides. The chart includes circular gridlines via d3.ticks, rotated labels, and a legend, all rendered as SVG using d3.v4.

Loading thumbnail…

Radial Diverging Stacked Bar Chart

A radial diverging stacked bar chart displays two data columns for each kilometer of the Moscow Ring Road (МКАД), comparing values on the inner and outer sides. The visualization uses a circular layout with diverging stacks extending from a central axis. Built with D3 v4, the example loads data from a CSV file and applies `d3.stack()` with `stackOffsetDiverging` to separate positive and negative values, while `d3.arc()` generates the annular segments and `d3.scaleBand` positions them around the circle. The result shows accident statistics across 109 kilometers, with labeled ticks and a legend.

Loading thumbnail…

Radial Stacked Bar Chart

This example shows a radial stacked bar chart that compares accident counts for the inner and outer lanes across 109 kilometer markers of the Moscow Ring Road. Each wedge’s length represents the combined total for both categories per kilometer, with the two stacked segments colored blue and green and a dashed red circle marking the mean accident value. The visualization is built with D3 v4, using `d3.stack()` to compute the stacked series and `d3.arc()` to generate the annular paths around a circular scale. Tick circles and labels are positioned via the linear radius scale, while kilometer labels are rotated along the outer edge.

Loading thumbnail…

Radial Groupped Bar Chart

This radial grouped bar chart shows accident counts on the inner and outer lanes of the Moscow Ring Road (MKAD) across 109 kilometer markers. The visualization uses D3 v4’s `d3.arc`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG path arcs grouped by kilometer, with a dashed average-value circle and radial tick labels. A legend distinguishes the two lane categories (внутренняя сторона and внешняя сторона). Data comes from the included `simple_stat.csv` file, which the code loads via `d3.csv`.

Loading thumbnail…

Radial Double Bar Chart

This radial double bar chart visualizes two columns of roadway accident data, comparing inner and outer ring values across 109 kilometer markers. D3 v4 draws the data as SVG arcs using `d3.arc` and `d3.scaleBand`, with separate linear scales for each ring and a color ordinal scale distinguishing the two categories. The chart includes concentric grid circles, dashed mean-value lines, and tick labels generated with `d3.ticks`. A legend identifies the inner and outer sides, while axis labels rotate around the ring for readability.

Loading thumbnail…

Radial Column Chart

A radial column chart displays the number of traffic accidents per kilometer along the Moscow Ring Road, with each column's height representing the sum of left-lane and right-lane incidents. The visualization uses d3.scaleBand for angular positioning, d3.scaleLinear for radial values, and d3.arc to draw the column paths. Ticks and a dashed mean-value circle are rendered using SVG circles and text elements, with data loaded from a CSV file via d3.csv.

Loading thumbnail…

Animated marker

A custom SVG marker for a bicycle icon is displayed on a Leaflet map centered on Moscow. The marker is added via `L.icon` with `iconUrl` set to the bike SVG file. The icon itself uses SMIL animations defined in the SVG to create movement. The map uses Stamen toner tiles loaded through Leaflet’s `L.tileLayer` and includes attribution for OpenStreetMap.

Loading thumbnail…

Dynamic tile masking and more

This example demonstrates interactive masking of OpenStreetMap tiles over a stamen.com toner base map, controlled by user-drawn polygons. Using Leaflet’s draw control, users create shapes that act as SVG masks, revealing or hiding the underlying OSM tile layer. The visualization also applies SVG filters, such as grayscale, hue rotation, and sepia, to the map tiles, and offers a selection of hatch patterns for the mask fills. The code integrates D3.js (v3) for projecting GeoJSON geometries into Leaflet’s coordinate system and manipulates the SVG `defs` and mask elements directly.

Loading thumbnail…

Dynamic tile clipping and more

This example demonstrates interactive map manipulation on a Leaflet map centered on Moscow. Users can draw polygons to dynamically clip OpenStreetMap tiles layered over a Stamen toner base map. The code uses D3.js to project drawn GeoJSON geometries via `d3.geo.path` and `d3.geo.transform`, applying the resulting path as an SVG `clipPath` to reveal the OSM overlay only within the drawn shapes. Additional SVG filters and patterns allow real-time effects like grayscale, hue rotation, and hatching on the map layers.

Loading thumbnail…

Dynamic pattern animation

This example demonstrates interactive map-based drawing with dynamically animated SVG patterns. Users draw polygons or rectangles on a Leaflet map, selecting between none, diagonalHatch, or diagonalHash pattern fills via a dropdown control. The D3.js library animates the selected patterns—diagonalHatch drops and diagonalHash spins—while a separate toggle applies a blur filter to reveal hardware acceleration differences across browsers. Rendering uses Leaflet’s SVG overlay pane, with controls built through Leaflet’s L.Control extension API.

Loading thumbnail…

Solar Terminator with layers clipping

This example displays a world map with a day/night terminator boundary that updates in real time, and uses that boundary to clip an overlaid tile layer so the dark side of the Earth appears grayscale while the lit side remains colored. A red star marks the user’s current location. The terminator path is generated by the Leaflet.Terminator plugin, which computes the sun’s position and latitude per longitude; a D3-selected SVG clipPath is updated every 500 milliseconds and applied via CSS `clip-path` to the overlay’s container. The overlay uses Stamen toner tiles, and a luminance-to-alpha SVG filter enables the masking effect.

Loading thumbnail…

SVG path animation

An SVG rocket follows a twisting path in an infinite loop, with its orientation continuously adjusted to match the path's tangent. A checkbox toggles the path's visibility. The animation synchronizes marker movement with path traversal using D3.js v3, the `transition.attrTween` method, and SVG path geometry functions (`getTotalLength`, `getPointAtLength`). Path data comes from an external SVG file, and the rocket is an image element.

Loading thumbnail…

SVG path animation

An animated marker follows a wiggly SVG path while the path itself appears to draw itself in a continuous loop. The example uses D3.js version 3 to load an external SVG file via `d3.xml` and then animates both the path’s `stroke-dasharray` and the marker’s position using `transition.attrTween` and `path.getPointAtLength`. The marker is a red circle repositioned at each animation tick, while the dash array interpolation creates the synchronous drawing effect. The animation runs infinitely via a recursive transition callback.

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

Loading thumbnail…

SVG path animation

A red dot animates along a black, wiggly SVG path, looping infinitely. The path is defined in an external SVG file. Built with D3.js v3, the visualization loads the SVG via `d3.xml`, extracts the path with a `d3.select`, and uses a `transition.attrTween` to move a circle marker based on `getPointAtLength` and `getTotalLength`, replicating Mike Bostock’s point-along-path interpolation example.

Loading thumbnail…

SVG path animation

An SVG rendering of a PlayStation 4 controller uses D3.js to animate each path's stroke-dasharray attribute. The `transition.attrTween` method repeatedly interpolates between `"0,l"` and `"l,l"` (where `l` is the path's total length from `getTotalLength()`), creating a continuous drawing effect. An infinite loop via the `each` event restarts the animation, while CSS styles paths as unfilled black strokes.

Loading thumbnail…

Globe to Map transition

A world map transitions between two geographic projections: an interactive 3D globe and a flat, equirectangular map. Users rotate the globe by dragging, and a single click triggers a smooth 7.5-second animation that interpolates between the orthographic and equirectangular projections, with the map always cut along the antimeridian for an unrolling effect. Double-clicking a country reverses the transition. Built with D3 v3 and TopoJSON, it uses `d3.geo.orthographic()`, `d3.geo.equirectangular()`, `d3.geo.path()`, and `d3.transition()` for tweening the projection, rendering country boundaries from a 110m world dataset in SVG with hover tooltips.

Loading thumbnail…

Globe to Map transition

A world map continuously rotates as a globe on a canvas, and clicking it triggers a smooth animation that interpolates between the orthographic and equirectangular projections, creating an effect of unrolling the globe into a flat map. The transition is implemented using `d3.transition` and `d3.interpolate` to tween between the two projection functions, while `d3.geo.path` renders the land and border geometries from a TopoJSON world dataset. A second click reverses the animation, reeling the map back into a rotating globe.

Loading thumbnail…

Globe to Map transition

A world map transitions between an orthographic globe and an equirectangular projection. The globe rotates via a D3 drag behavior, and clicking a country triggers a path-by-path transition to the flat map, while double-clicking returns to the globe. The visualization uses D3 v3 with `d3.geo.orthographic`, `d3.geo.equirectangular`, and `d3.geo.path` to render TopoJSON country boundaries as SVG paths, with CSS-based tooltips and hover highlighting.

Loading thumbnail…

Earth globe

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

Loading thumbnail…

Earth animation

An orthographic Earth projection rotates continuously over a starfield background rendered on canvas. The animation uses D3 v3 with `d3.geo.orthographic`, `d3.geo.path`, and a `d3.transition` tween to interpolate the projection’s rotation, clearing and redrawing each frame. Landmasses and country borders come from TopoJSON world-110m data, and the background image is loaded via a queue and drawn with Canvas `drawImage`.

Loading thumbnail…

Globe to Map transition

This interactive visualization demonstrates a smooth animated transition between two geographic projections of the same world map. A slowly rotating orthographic globe morphs into a flat equirectangular projection when a country is clicked, with a double-click on any country triggering the reverse transformation. The example highlights the shortest path between these two projection states. The code uses d3.v3, specifically the `d3.geo.orthographic()` and `d3.geo.equirectangular()` projections, along with the `d3.geo.path()` for generating SVG paths. Country boundaries come from a TopoJSON file, and country names are loaded from a TSV file.

Loading thumbnail…

Water quality in Moscow

A choropleth map of Moscow displays tap-water quality measurements by district, with a sidebar table showing values for pH, turbidity, and other indicators when a district is clicked. Hovering highlights the district name, and icons mark water treatment stations. The visualization uses D3.js v3 with `d3.geo.mercator`, `d3.geo.path`, and TopoJSON to render the map, while `queue()` loads CSV data from Mosvodokanal’s 2013 open-data hub, with tooltips implemented via mouse events.

Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth map visualizes road accident deaths across Russian regions for 2012, using a threshold color scale to differentiate mortality rates per region. It shows a hover tooltip displaying the region name and death count, alongside labeled city markers. The visualization is built with D3 v3, using `d3.geo.albers` projection, `d3.geo.path`, and `d3.scale.threshold` for coloring, with SVG rendering and animated transitions for hover effects. Data comes from a CSV file and a TopoJSON map, with city coordinates from a TSV file.

Loading thumbnail…

TopoJSON files for maps.

This example provides TopoJSON map files and associated name-to-code dictionaries for creating geographic visualizations. It includes data for Russian regions and world countries, with each topology containing geometry objects and properties. The files are structured for use with the TopoJSON format, enabling efficient encoding of geographic boundaries. Dictionary files map region names to ISO codes, facilitating data joins for choropleth maps or interactive applications with libraries like D3.