NPashaP

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

Leaflet - geoJSON - Polygons

This example creates an interactive web map using the Leaflet library, displaying a custom GeoJSON MultiPolygon feature as a shaded area over OpenStreetMap tiles. The map is initialized with a center point and zoom level, then a tile layer provides the base map. A GeoJSON object defines two polygon shapes—one with a hole—which are added directly to the map via Leaflet’s `L.geoJSON` API. The map uses the VizJS library for tile configuration and fills the entire viewport.

Leaflet - marker

A map of the United States displays a single marker at coordinates [37, -96]. The example uses the Leaflet library to create a full-screen map, add an OpenStreetMap tile layer from the viz.leaflet.tiles API, and then place a default marker icon at the specified location using L.marker(). The map is initialized with a center point and zoom level, and the tile layer is added with proper attribution.

Viz - biPartite - barSize

Viz - biPartite - default

Viz - biPartite - edgeMode

Viz - biPartite - edgeOpacity

Viz - biPartite - fill

Viz - biPartite - keyPrimary keySecondary value

Viz - biPartite - label

Viz - biPartite - min

Viz - biPartite - multiple

Viz - biPartite - pad

Viz - biPartite - redraw

Viz - biPartite - sortPrimary

Viz - biPartite - sortSecondary

Viz - biPartite - update

Viz - Bar - stacked - legend - hover

Viz - Area - stacked - legend - mouse

Viz - Point - Brushend

This example demonstrates a scatterplot of 1,000 randomly generated points, rendered as SVG circles. Users can drag a rectangular brush over the plot to select points, which then turn blue and gain black outlines. The visualization uses the `viz.point()` charting API to generate the plot, while a `d3.brush()` instance handles the selection interaction. On brush end, `point.filterRect()` identifies points within the selection rectangle and updates their CSS class accordingly.

Viz - Point - drawPoints

This example renders 200 randomly generated data points as circles on an SVG canvas. Each point is colored either steelblue or red based on the parity of its key value, with a semi-transparent fill and matching stroke. The visualization is built using the `viz.point()` API, which is configured with a custom `drawPoints` function that appends circle elements to the SVG group. The code relies on D3 v4's `d3.range` and `d3.select` for data generation and DOM selection, while the rendering itself uses standard SVG `circle` elements positioned by the x and y coordinates provided by the point layout system.

Viz - Point - Transition

This example displays 200 points that are randomly repositioned on a two-dimensional plane every two seconds. Each point shifts to a new location based on freshly generated random x and y coordinates, demonstrating a transition between data states. The visualization uses the `viz.point()` API from the Viz.js library, building on D3 v4, to render the points as SVG shapes with a steelblue fill and stroke. The `point.transition()` method animates the movement of each point to its updated position, while the code explicitly resets the key and value scales before each update to recompute the coordinate mappings.

Viz - Point - Default

This example displays a basic scatterplot of 20 random points, each represented by a steelblue circle without an outline. The visualization is generated by calling `viz.point()` on a selected SVG group element, with data supplied by a custom `randomData()` function that maps each index to a random value. The chart renders as an SVG using D3 v4 and the Viz.js library, where the point layer’s styling is defined via CSS targeting the `.point circle` selector. The code demonstrates a minimal setup for creating a point chart with dynamic, arbitrary data.

Viz - Point - Brush

This example shows a scatterplot of 1,000 random points, where users can drag a rectangular brush to select points and highlight them in blue. It uses the viz.js `viz.point()` function to render the SVG circles and `d3.brush()` to handle the brushing interaction. On brushing, the code calls `point.filterRect()` to identify which points fall within the selection and applies a CSS class to style selected circles with a blue fill and black stroke.

Viz - pie3d - height

This example shows a three-dimensional pie chart with extruded height, where each slice represents a numeric value from a hardcoded array. The chart is rendered as an SVG element using the `vizjs.org` library’s `viz.pie3d()` method, which takes the data array and a `height` parameter to create the 3D effect. The D3.js v4 library is used to select the SVG group element and apply the visualization via the `d3.select("g").call(pie3d)` pattern, using projection and geometric transformations to simulate depth.

Viz - pie3d - eccentricity

This example shows a 3D pie chart whose six slices are rendered with a pronounced eccentricity, giving the disk a tilted, elliptical appearance. The chart uses the `viz.pie3d` API from the Viz.js library, configured with a data array and an eccentricity value of 0.5, then bound to an SVG `g` element via `d3.select("g").call(pie3d)`. The visualization relies on d3.v4 for selection and SVG rendering, with the Viz.js library generating the 3D geometry and shading internally.

Viz - pie3d - default

This example presents a three-dimensional pie chart built with D3.js v4 and the Viz.js library, using SVG rendering. The chart displays six data values as extruded, angled sectors, giving a sense of depth and perspective. The visualization is constructed by calling `viz.pie3d()` and binding it to an SVG group element via `d3.select("g").call(pie3d)`. The data array `[6.24, 14.2, 22.71, 4.56, 2.93, 1.36]` is passed directly to the pie3d function. The code relies on the viz.js API to generate the 3D effect within the SVG output.

Viz - pie3d - custom

A 3D donut chart displays the market share of six web browsers, with each slice labeled by name and colored according to its category. The chart is rendered using the d3.js v4 library alongside the viz.js extension, specifically invoking the `viz.pie3d()` function. The visualization applies a vertical height to the pie to create a three-dimensional effect, and it uses an inner and outer radius to form the donut shape. The data is embedded directly in the page via the `getData()` function, which supplies browser names, percentage values, and hex color codes.

Viz - Line - orient - left

Viz - Line - orient - right

Viz - Line - orient - top

Viz - pie - startAngle

A pie chart visualizes six numeric values with a custom starting angle of 90 degrees, shifting the first slice to the top of the circle. The chart renders as an SVG using the d3.v4 library’s selection and call mechanism, pulling the viz.pie API from Viz.js to compute the arc layout. The code defines the pie with a data array and specifies startAngle(Math.PI/2), then attaches it to a <g> element translated within a 960×500 SVG canvas.

Viz - pie - sort

This example presents a pie chart of browser market share percentages, with wedges explicitly ordered by a custom sort sequence rather than by value. The visualization uses the Viz.js library’s `viz.pie()` API to generate the chart, while a custom sort function relies on `d3.ascending` and an array of browser names. Data is hardcoded in the script, and the SVG is rendered at 960 by 500 pixels with the pie group translated to the center.

Viz - pie - padAngle

A pie chart with padded slices displays six numeric values as proportional segments of a circle. The single SVG group is transformed to position the chart at the center of the viewport. The example uses the `viz.pie()` function from the Viz.js library to generate the layout, configuring a `padAngle` of 0.02 to separate adjacent arcs. The resulting pie is rendered as SVG elements via a D3 v4 selection that invokes the pie generator on the designated `<g>` element.

Viz - pie - outerRadius

A pie chart displays six categorical values as wedges around a center point, with an outer radius of 180 pixels. Built with D3 v4 and the viz.js extension, the chart uses the `viz.pie()` API to generate SVG sectors from hardcoded data in the script. The visualization renders to an SVG element with a translated `<g>` container, positioning the pie at coordinates (200, 250) within a 960-by-500 canvas.

Viz - pie - label

This example shows a pie chart of browser market share percentages, with each slice labeled by its numeric value in white text. The chart is rendered as an SVG using D3 v4 and the vizjs library, where the `viz.pie()` API configures the data mapping, value accessor, and label function. The data is hardcoded in the script and the chart is drawn into a pre-existing `<g>` element via a D3 selection.

Viz - pie - innerRadius

This example shows a donut chart rendered from six hard-coded numeric values, using an inner radius of 130 pixels to create the hole in the center. The visualization is generated with the `viz.pie()` API from the Viz.js library, which is called on a pre-selected SVG group element using `d3.select("g").call(pie)`. The chart relies on D3 v4 for SVG manipulation and layout, while Viz.js handles the pie geometry and arc generation, producing the final static SVG output.

Viz - pie - fold unfold

A data-driven pie chart displays six numeric values as proportional wedges, which fold inward to collapse the visualization and then unfold to restore its original form. Built with d3.v4 and the viz.js library, the example uses the `viz.pie()` API to generate the chart and calls its `.fold()` and `.unfold()` methods after timed delays. The SVG rendering is initialized within an HTML page, with transitions occurring over a 1.5-second duration per animation.

Viz - pie - fill

A pie chart displays the market share of six web browsers, with each slice sized by percentage and colored via a custom fill function. The chart uses the Viz.js library's `viz.pie` API, which is called on an SVG group element with data provided as an array of name, value, and color tuples. It renders through SVG in a static 960x500 viewport, relying on d3.v4 for selection and the Viz.js v1.3.0 library for the pie layout and rendering.

Viz - pie - endAngle

This example shows a semi-circular pie chart that spans from -90 to 90 degrees, creating a half-donut shape from six data values. The visualization uses the viz.pie API from vizjs.org, configured with explicit startAngle and endAngle values, and renders as an SVG via d3.js v4. The pie is drawn inside a translated `<g>` element, with the data passed directly to the pie generator rather than bound to DOM elements. The empty `<style>` block indicates default styling is used.

Viz - pie - ease

This example demonstrates a pie chart that animates between states using custom easing. The chart initially renders with six data values, then performs a folding animation where the slices collapse, followed by an unfolding animation that restores them. Built with D3 v4 and the viz.js extension, the visualization uses the `viz.pie()` API to generate SVG pie slices and applies a bounce easing effect via `d3.easeBounceOut` over a 1.5-second duration. The pie chart is drawn entirely as SVG within a 960x500 viewport.

Viz - pie - createFolded

A folded pie chart displays six data values as adjacent sectors that initially compress into an accordion-like stack. After a one-second delay, the chart unfolds into a full circular pie. Built with D3 v4 and the Viz.js library, the example uses the `viz.pie()` factory method, configures its data array, and applies the `createFolded()` transform. The SVG rendering is contained in a `<g>` element, which is selected and populated via `d3.select("g").call(pie)`, with the `pie.unfold()` animation triggered by a JavaScript timeout.

Viz - pie - cornerRadius

A pie chart displays six numeric values with rounded corners on each slice, creating a segmented donut-like appearance. The visualization is rendered as an SVG element using the D3 v4 library, with the pie layout generated by the `viz.pie()` API from Viz.js. The chart applies a `cornerRadius` of 10 pixels to the slices, and the data values are hardcoded in the script rather than loaded from an external file. The SVG grouping element is selected and passed to the pie generator to produce the final graphic.

Viz - Line - valueScale

A simple line chart maps four data points from an array of key-value pairs, with a logarithmic scale controlling the vertical axis. The line is drawn as an SVG path using the `viz.line()` API from the Viz.js library, while `d3.scaleLog()` maps values between 2 and 1000 to pixel coordinates. The example demonstrates how to combine Viz’s line generator with D3 v4 scales, rendering the result inside an SVG `<g>` element with a steelblue stroke.

Viz - Line - unfold

The visualization demonstrates how a line chart can animate from a flat baseline into its final form, revealing underlying data patterns through an unfolding motion. Random data points, some intentionally null (10%), are encoded along the x-axis and drawn as a steelblue path once their values are introduced. The process uses the `viz.line` library with a custom `defined` function to filter nulls, and `transition()` to animate the y-scale from an initial constant value. Rendered as SVG with D3.v4 and viz.js, it highlights how dynamic value updates create a temporal narrative for static data.

Viz - Line - Transition

A line chart continually updates every two seconds, displaying ten points with random values connected by a steelblue line. The visualization first shows a single transition of the line and its points, then repeatedly re-draws the chart with new data. Built with D3 v4 and the viz.js extension, the example calls `viz.line()`, sets a 1000-millisecond duration, and uses `line.transition()` to animate the changes. The SVG render uses a `g` element, and the `randomData` function generates the varied point positions.

Viz - Line - Redraw

This example demonstrates a dynamic line chart where data points are randomly regenerated every two seconds, causing the line to redraw with a new path. The visualization uses the viz.js library’s `viz.line()` API, with data bound to an SVG `<g>` element via D3 v4’s `selection.call()`. Each update resets the `valueScale` to recompute the y-axis domain, while the line’s stroke is styled as a steel-blue path. The animation is driven by `setInterval()`, which maps the original keys to new random values, showcasing live re-rendering of an SVG line in response to changing data.

Viz - Line - keyScale

Viz - Line - key value

Viz - Line - height width

Viz - Line - ease

Viz - Line - defined

Viz - Line - Default

Viz - Line - curve

Viz - Line - Axis

Viz - Line - axis ticks

Viz - Legend - width

Viz - Legend - size

Viz - Legend - rows

Viz - Legend - paddingLabel

Viz - Legend - paddingInner

Viz - Legend - onMouserOver onMouseOut

Viz - Legend - fill

Viz - Legend - draw

Viz - Legend - default

Viz - chord - update

Viz - chord - startAngle

Viz - chord - source target value

Viz - chord - sort

Viz - chord - redraw

Viz - chord - padAngle

Viz - chord - outerRadius

Viz - chord - labelPadding

Viz - chord - label

Viz - chord - innerRadius

Viz - chord - fill

Viz - chord - duration

Viz - chord - default

Viz - chord - chordOpacity

Viz - biPartite - orient

Viz - biPartite - height width

Viz - Bar - waterfall

Viz - Bar - valueScale

Viz - Bar - Value Label

Viz - Bar - transition

Viz - Bar - shadow

Viz - Bar - redraw

Viz - Bar - paddingOuter

Viz - Bar - paddingInner

Viz - Bar - orient - top

Viz - Bar - orient - right

Viz - Bar - orient - left

Viz - Bar - negative

Viz - Bar - keyScale

Viz - Bar - key value

Viz - Bar - height width

Viz - Bar - fold unfold

Viz - Bar - ease duration

Viz - Bar - default

Viz - Bar - axis

Viz - Bar - align

Viz - Area - Default

Viz - Area - value0 value1

Viz - Area - transition

Viz - Area - Stacked

Viz - Area - line

Viz - Area - orient top

Viz - Area - orient right

Viz - Area - orient left

Viz - Area - Line - Point

Viz - Area - Line - Point - Transition

Viz - Area - line - axis

Viz - Area - key value1

Viz - Area - ease

Viz - Area - curve

Viz - Area - defined

Graceful Tree Conjecture

US County Map - Joining Data

2010 Demographic Profile of US Counties

US County Map - Basic

test

US Counties

Internet Browser Market Share

lg - draw- line

lg - draw - custom shape

lg - draw - circle

lg - fill

lg - paddingLabel

lg - width, rows

lg - size

lg - paddingInner

lg - height

lg - Basic Example

India State Grid

US State Grid

bar - Custom Example

bar - paddingInner, paddingOuter

bar - value

bar - keyPrimary

bar - keySecondary

bar - sortPrimary

bar - sortSecondary

bar - valueSecondary

bar - valuePrimary

bar - Removing value labels

bar - Showing primary value labels at start

bar- fill by Primary key

bar - fill by secondary key

Add Value axis

bar - valueDomain

bar - width, height

bar - dock

bar - Basic example

bar - fill by value

Adding Key Axis

DashBoard

3D Donut

US State Map

Comparison to d3.chord

Chord - 2015-16 English Premier League Goals

biPartite - update

biPartite Example I

biPartite - Linking Multiple biPartites

biPartite - Adding labels

bP Example - Double Vertical bP with labels

biPartite - Horizontal Example

biPartite - Basic

biPartite - orient

biPartite - fill

biPartite -keyPrimary, keySecondary, value

biPartite - sortPrimary, sortSecondary

biPartite - width, height

biPartite - barSize

biPartite - min

biPartite - pad

biPartite - duration

biPartite - edgeOpacity

biPartite - edgeMode

Chord I

Chord - ChordOpacity

Chord - innerRadius, outerRadius

Chord - source, target, value

Chord - padding

Chord - labelPadding

Chord - sort

Chord - startAngle

Chord - valueFormat

Gauge III

Gauge II

Gauge I

Linear Model

Conway's Game of Life

Nails And Strings

Sum of First n Numbers

Page Title

Stacked Density and Quantile Graphs

Gradient Pie