P

Piotr Paszek

@paszo·130 public vizzes

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive visualization combines a geographic globe with animated scatterplot transitions. Users can switch between orthographic, Winkel, and Mercator projections while zooming and rotating the globe through mouse interactions. The visualization uses d3.geo.path with d3.geo.orthographic, d3.geo.winkel3, and d3.geo.mercator projections, along with d3.behavior.zoom for navigation. It displays land masses from TopoJSON world-atlas data with graticules and country boundaries, overlaid with circular marks representing dataset values. The interface includes buttons for projection and dataset selection, with tooltips and a color legend provided by d3.tip and d3-legend.

Loading thumbnail…

Fork of Fork of Bar with round corners right - universal

This example draws a single bar with rounded corners on its right side using a computed SVG path. The code imports `select` from D3 v5 and builds the path string manually with conditional logic for positive and negative bar widths, adjusting corner radii accordingly. It renders the shape as an unfilled, black-stroked path inside an SVG appended to the page’s container. The example also demonstrates local ES6 module imports, though the imported message is not displayed.

Loading thumbnail…

Fork of Bar with round corners top - universal

This example demonstrates how to draw a bar with rounded top corners using an SVG path in D3 v5. The code constructs the path manually with an `M`, `h`, `v`, and `a` command sequence, applying elliptical arc segments to create the rounded corners. It uses `d3.select` to append the path to an SVG container, with corner radius and bar dimensions defined as variables. The path handles both positive and negative bar heights by adjusting the arc sweep flag, while the bar itself is stroked in black with no fill.

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that demonstrates drawing a single arrow using SVG. The page embeds SVG directly in the markup, defining a red arrow marker and applying it to a vertical path via the `marker-end` attribute. Styling is handled with a CSS rule that sets a large font size for a `.message` class, though no text element uses it. The code relies on native SVG elements—`defs`, `marker`, and `path`—rather than JavaScript libraries, showing a static vector graphic without interaction or data binding.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, showing a static SVG icon and text element. The code imports the `select` function from D3 via ES6 modules and uses it to position the text at specified coordinates. The SVG is defined in the HTML with an embedded path for the VizHub logo, while styles are applied through an external CSS file. D3 v5 is loaded from UNPKG, and the visualization renders entirely as SVG without dynamic data or interaction.

Loading thumbnail…

Fork of Fork of Fork of Bar with round bottom corners

This example draws a single SVG path with rounded bottom corners using D3 v5. The code computes corner radii and arc commands manually, handling both positive and negative heights. It loads D3 from UNPKG and uses `d3.select` to append the path to a container. The path is styled with a black stroke and no fill, and the script includes a commented-out local ES6 module import.

Loading thumbnail…

Fork of Fork of Bar with round bottom corners

This example renders a single black-outlined bar with rounded bottom corners in an SVG. A path is constructed manually using D3 v5’s `select` and `append` methods, with coordinates and corner radii defined as variables. The path’s `d` attribute uses arc commands and conditional logic to determine the rounding direction based on height sign. The bar is drawn with no fill, displaying only its stroke. The code also includes examples of ES6 module imports and local CSS styling.

Loading thumbnail…

Fork of Bar with round bottom corners

This example draws a single SVG path shaped like a bar with rounded bottom corners, using D3 v5 to append the path to a container. The code defines the bar’s geometry with explicit variables for width, height, corner radius, and position, then constructs the path string using SVG arc commands for the rounded corners. It imports `select` from D3 but calls `d3.select` globally, and renders the shape with a black stroke and no fill.

Loading thumbnail…

Bar with round top corners

This example demonstrates a single SVG bar with rounded top corners, drawn using a path element that defines the shape with explicit coordinates and arc commands. The code loads D3 v5 via UNPKG and uses the `d3.select` method to append the SVG and path to the page. It also showcases local ES6 module imports through `myMessage.js`, which exports a simple string. The bar’s corner radius is computed conditionally, ensuring the vertical radius does not exceed the height, and the path is rendered with a black outline and no fill.

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualizes genealogical relationships as a collapsible tree diagram. Built with D3.js v3 and jQuery, it uses SVG rendering and smooth animations to expand and collapse hierarchical nodes. Each family member is represented by a colored rectangle, with node types mapped to distinct colors (light green, grey, pink, orange). The layout automatically calculates dimensions via breadth-first traversal, and includes zoom and drag functionality via D3's zoom behavior. Data is loaded from a JSON file, and tooltips show additional information while links display relationship direction markers.

Loading thumbnail…

Scatterplot

This scatterplot displays the population of the top four most populous countries, using a linear scale for the x-axis and a band scale for the y-axis. The graphic renders as horizontal bars, with each country’s bar length proportional to its population. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart within an SVG element. Data is loaded from a CSV file and formatted with D3’s `format` function, with gridlines and axis labels styled via CSS.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar segments population counts by religion, with hover tooltips revealing exact figures per country and religion. Clicking or hovering over the color legend highlights individual religions, fading others via layered SVG rects. Built with D3 v3, the visualization employs d3.layout.stack, d3.svg.axis, d3-tip for tooltips, and d3-legend for the interactive color scale, rendered as animated SVG.

Loading thumbnail…

Rendering data with react

This example shows how React can manage the lifecycle of data loaded asynchronously with D3. The application fetches a CSV file of CSS named colors using `d3.csv` within a `useEffect` hook, storing the result in React state via `useState`. While waiting for the data, it displays a loading message, then renders an SVG canvas with a pie arc path generated by the `d3.arc` function. The arc is drawn with an outer radius equal to the full width, illustrating the integration of D3’s geometry with React’s component-based rendering for SVG.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data from 1980, plotting miles per gallon against horsepower, with each point colored by origin and sized by weight. The visualization is built using the Vega-Lite API (vl) with a custom configuration that removes axis domains and enlarges label and title fonts. Since it is a fork of an API template, it loads data from a CSV file using `d3.csv`, then renders the marks with `vl.markCircle`, encoding position, color, size, and tooltip fields directly in `viz.js`. The view resizes to the window and includes a tooltip handler from Vega Tooltip.

Loading thumbnail…

Loading data with react and d3

This example shows how React and D3 can be combined to load and summarize a CSV dataset. The React component uses the `useState` and `useEffect` hooks to fetch data asynchronously via `d3.csv` from a GitHub-hosted file of CSS named colors. Once loaded, the component displays the file size in kilobytes, row count, and column count using `d3.csvFormat` to calculate the byte length. While the page loads, it shows a "Loading..." message; after loading, the result is rendered as large text within an SVG-ready HTML structure.

Loading thumbnail…

Laodaing and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3 v5’s `d3.csv` method, fetching a remote dataset of named CSS colors from a GitHub gist. The visualization shows computed summary statistics—file size in kilobytes, row count, and column count—displayed in large text within a `<pre>` element. The code relies on `d3.csv` for asynchronous data loading and parsing, `d3.csvFormat` to measure the data’s string length, and `data.columns` to report the number of columns. No chart is drawn; the focus is purely on the parsing pipeline and metadata output.

Loading thumbnail…

Mouse follower

A circle follows the cursor as it moves across an SVG canvas. The example uses React’s `useState` and `useCallback` hooks to track mouse coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. The SVG’s width is fixed at 960 pixels and height at 500, with the initial position centered. The rendering is done entirely through React’s declarative component structure, producing a simple interactive visualization without any external data sources.

Loading thumbnail…

Fork of Dragging HTML Elements 2

This example demonstrates a drag-and-drop interface for organizing items into hierarchical collections, built with custom HTML elements and the HTML5 Drag and Drop API. Users can drag individual items or multiple selected items between containers, with items either moving or cloning depending on the source container. The interface includes collapsible collection groups, delete buttons, and buttons to save and restore connection states. Code uses custom elements (`vc-dragitem`, `vc-dragcontainer`, `vc-dragclosebutton`, `vc-dragdeletebutton`) and embedded SVG graphics inside draggable items.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fetching a CSV file containing CSS named colors and their hexadecimal values from a GitHub Gist, then logging the raw text to the console. The code uses the JavaScript `fetch` API to asynchronously retrieve the remote resource, with a custom `fetchText` helper that extracts the response body as plain text. The visualization does not currently render any graphical output; instead, it serves as a starter template for data acquisition, showing how to load tabular data for future processing or display.

Loading thumbnail…

Fork of React Starter

The example renders a grid of fifteen cartoon faces, each composed of a yellow background circle, two eyes, and an arc-shaped mouth. The faces are generated using React components, with random eye radius values calculated via `Math.random`. D3’s `arc` generator creates the mouth paths, while `range` from D3 produces the array for the five-by-three grid. SVG elements are drawn through a React container that translates each face to a common center.

Loading thumbnail…

Starter HTML version - smiley face

A yellow circle with a black outline forms the face of a smiley, while two smaller black circles serve as eyes on an SVG canvas. The example demonstrates basic SVG shape rendering using native elements like `<circle>` and attributes for fill, stroke, and positioning. The code sets a fixed canvas size and uses inline CSS to hide page margins and overflow. It is a static starter template, showing only the facial features without a mouth, midway toward a complete smiley face.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time for global regions, with a movable vertical line that lets users select a specific year. Hovering over the chart triggers the `setSelectedYear` function, which updates the selected year and redraws the visualization. The chart uses `d3.line` with `curveBasis` for smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by region. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. Population data comes from UN estimates merged with medium variant projections, rendered as SVG.

Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization combines a bar plot, world map, and scatter plot to explore earthquake data. The bar plot shows total deaths by region, the map displays earthquake locations with circle radius representing Richter scale magnitude, and the scatter plot correlates year with Richter magnitude and death counts. The implementation uses D3 v7 with d3.geoPath for map projection, d3.scaleBand and d3.scaleLinear for axes, and includes interactive brushing, tooltips via mouseover events, and a legend. Data comes from a CSV file referenced in the code.

Loading thumbnail…

Fork of Making a barchart

This bar chart displays the population of ten countries, using horizontal bars sorted by population in descending order. The visualization is built with D3 v5 and rendered as SVG elements. It loads data from a CSV file, converts population values to absolute numbers, and uses `d3.scaleLinear` and `d3.scaleBand` to map values to positions. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while bars are drawn as SVG rectangles.

Loading thumbnail…

Cheap tricks for interaction D3 version 5

This example shows an interactive world map where hovering over a country highlights it in red, and zooming and panning the view is supported via mouse or touch gestures. The map is rendered using SVG with the Natural Earth projection, and country boundaries are drawn from TopoJSON data sourced from the world-atlas package. The implementation uses d3.zoom to handle transformations on a group element, d3.geoPath to generate the country paths, and d3.tsv to load country names for tooltips. Interaction is driven by CSS hover rules and the zoom event listener.

Loading thumbnail…

Fork of AreaChart

Two smooth, filled curves compare predicted learning progress for Ivy Tutor versus self-studying over eight time steps, with values ranging from zero to fifty. The chart’s SVG output is generated by D3 version 6, using `area`, `curveBasis`, `scaleLinear`, `axisLeft`, `axisBottom`, and linear gradient definitions for translucent fills. Each series is drawn as an area path with a distinct teal or purple gradient, and grid lines are styled with dashed strokes. The data is hardcoded in the script, not loaded from an external file.

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

Loading thumbnail…

Scatterplot copy

This scatterplot visualizes the relationship between monthly revenue and asking price for online businesses. The data comes from a CSV file with business metrics, using a linear scale for revenue on the x-axis and a log scale for asking price on the y-axis. Built with D3 v6, the SVG chart renders circles with tooltips showing business details and includes axis labels and gridlines. The visualization uses `scaleLinear`, `scaleLog`, `axisBottom`, `axisLeft`, and appends circle elements with title tooltips.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple path morphing animation controlled by user input. Two buttons, "Start Morphing" and "Reset Morphing," trigger transitions that interpolate between two SVG path definitions (`start` and `end`) using d3’s `transition.attrTween` on the `d` attribute. The code relies on D3 v6 for selection and transitions, while rendering to an inline SVG element. A static stroke path serves as the visual subject, with the animation changing its shape over a one-second duration when either button is clicked.

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter demonstrates a minimal D3 version 6 setup, rendering static text that reads “Hello D3 version 6” centered on a blank page. The example uses the `select` method from the d3 module to target the body element and set its text content. The `index.html` file loads the D3 library from the official CDN and includes a script tag for `bundle.js`, which contains the compiled JavaScript. No data source is involved, and the visual output is produced entirely through direct DOM manipulation with D3’s selection API.

Loading thumbnail…

Fork of Tree with rectangular links

This example shows a collapsible tree layout of the Flare dataset, with rectangular right-angle links connecting nodes instead of the typical curved or diagonal paths. The tree uses D3 v6’s `d3.tree` and `d3.hierarchy` for layout, with enter, update, and exit transitions animating node reveals and collapses. Nodes are drawn as white rects sized to label length, with stroke colors distinguishing parent from leaf nodes, and the whole SVG supports zooming via `d3.zoom`. The custom `diagonal` function renders links as horizontal and vertical line segments, and clicking toggles child visibility.

Loading thumbnail…

Tree with rectangular links

This interactive visualization displays a hierarchical tree structure of the Flare data set, using rectangular links with horizontal and vertical segments to connect parent and child nodes. Built with d3.js (v6), the visualization uses the d3.tree() layout algorithm to position nodes in a radial arrangement, where each node is represented by a rectangle and text label. The tree can be expanded or collapsed by clicking on nodes, with smooth transitions (250ms duration) animating the repositioning of nodes and links via d3.transition() and tweening. The layout dynamically adjusts its viewBox to fit the current tree extent, and nodes with children are highlighted with red strokes, while leaf nodes use green.

Loading thumbnail…

Fork of Rectangle tree - demo

This interactive visualization displays a hierarchical tree of the Flare data set, rendered as an indented list of rectangles. Users can click nodes to expand or collapse their children, with smooth animations updating the layout. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute positions and link paths, with d3.transition handling the animated updates, all rendered as SVG elements.

Loading thumbnail…

Rectangle tree with links

This example displays a hierarchical dataset as an interactive rectangle tree, where each node is represented by a labeled box and connected by curved links. Clicking a node expands or collapses its children, with smooth 250ms transitions animating the layout and updating the view. Built with D3 v6, it uses `d3.tree` and `d3.linkHorizontal` for the graph structure, while SVG elements and a zoom behavior handle rendering and navigation. The data comes from the flare-2 JSON file, with node size and spacing defined by the layout.

Loading thumbnail…

Rectangle tree

This example shows a collapsible rectangle tree visualization of the Flare software package hierarchy, where nodes are rendered as small rectangles with labels and colored strokes indicating whether they have children. Clicking a node expands or collapses its subtree with smooth animated transitions. The code uses the D3.js v6 library with `d3.tree()`, `d3.linkHorizontal()`, and `d3.zoom()`, rendering SVG elements with data from the `flare-2.json` file.

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays hierarchical data from the flare-2.json dataset. Users can click on nodes with children to expand or collapse branches, with smooth animations transitioning nodes and links to their new positions. The visualization uses D3.js v6, specifically leveraging `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and the `transition` API to animate the layout changes. Animated zooming and panning through `d3.zoom` enhances navigation of the complex hierarchical structure.

Loading thumbnail…

Fork of Labels

A donut chart with three slices displays hardcoded apple counts, with each slice filled by a distinct image pattern loaded from external URLs via SVG `<pattern>` elements. Labels showing the numeric values are positioned outside the pie's outer radius, and thin black pointer lines with circular markers connect each label to its corresponding slice. The visualization is built with D3 v6, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated color ramp, while the pointer paths are drawn by manually computing angular positions and SVG path commands.

Loading thumbnail…

Fork of Armadillo demo

This visualization displays mobile data prices on a world map, with countries colored green or grey based on whether the Armadillo dataset contains a price for them. Hovering or clicking a country reveals its name and price per MB. The map is rendered as SVG using the d3-geo-projection library’s `geoMiller` projection and `geoPath` for country boundaries. Data is loaded via Promise.all from GeoJSON map features and CSV price data, with styling applied through CSS and interactive zoom capabilities provided by a custom `zoom` directive.

Loading thumbnail…

Armadillo demo

This example visualizes global mobile data prices by coloring countries on a Miller projection map, with green indicating available pricing data and grey for missing values. Hovering a country reveals a tooltip with its name, price in USD per MB, and demo notes for calling and SMS. The visualization uses d3.geoPath with the geoMiller projection from d3-geo-projection, loads geographic features and pricing data via Promise.all, and supports pan/zoom through d3.zoom. Country fill colors are assigned from parsed CSV data, with hover effects increasing opacity and stroke width.

Loading thumbnail…

Hello games

This example displays a world map where countries are colored green or grey based on data from a CSV file of Armadillo game prices, accessed via a gist URL. Using D3 v6, it renders paths with `d3.geoPath` and a Miller projection, then updates fill colors by matching country names against parsed CSV values. The map includes interactive tooltips and hover effects, while the code also demonstrates `d3.json` and `d3.csv` for loading multiple data sources.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the topojson `feature` function. The visualization renders paths with d3.geoPath and d3.geoNaturalEarth1, appending each country as an SVG path element. The code demonstrates a straightforward D3.js v6 workflow for projecting and drawing vector map boundaries.

Loading thumbnail…

Armadillo

This example shows a world map where each country is colored according to its income group, using a spectral color scale. Users can pan and zoom the map, and hovering over a country displays its name and income group in a tooltip. The visualization is rendered with SVG and uses d3.geoNaturalEarth1 for the projection, d3.geoPath for drawing country boundaries, and d3.zoom for interactivity. Data is loaded from TopoJSON and TSV files via the world-atlas package, with income data from a CSV file.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to use VizHub to combine D3.js v5 with local ES6 modules. It renders two predefined SVG shapes and an icon from the `<defs>` section using `<use>` elements, while a D3 `select` call updates the text of a div with 'Hello VizHub!'. The code imports `select` from `d3` directly and a message from a separate local module, showcasing modular code organization. SVG rendering is handled natively in the markup, with styles defined in an external CSS file.

Loading thumbnail…

Untitled

This example demonstrates how D3 v3 renders SVG marker shapes used as line endpoints. It defines four distinct path geometries—circle, square, arrow, and stub—and attaches each as both a marker-start and marker-end to a corresponding element in a group. The code uses `d3.scale.category10` for colors, builds markers via SVG `<defs>`, and positions everything within a fixed margin layout. The visible result is a set of colored, marker-capped paths across the canvas, though the intended connecting lines are commented out.

Loading thumbnail…

Time based moving graph with no labels transparent black

A live-updating multi-line chart scrolls through time-series data for four network partners—Partner, PCL, GOLAN, and DriveU—with no axis labels or legend, using a transparent black background. The SVG animation shifts a moving group via `transition.attr` and `easeLinear`, clipping paths reveal lines as they enter a fixed viewport. Data from a CSV file is parsed and rendered with D3 v6 scales, line generators, and ordinal color mapping.

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

Loading thumbnail…

Time based moving graph with no labels shift

Four parallel time-series lines show network bandwidth data for four services—Partner, PCL, GOLAN, and DriveU—over roughly two minutes. The chart animates by smoothly translating the entire plot area, including axes and lines, to the left, creating a moving-window effect while keeping the labels in place. The code uses D3 v6 with `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes, colors, and legends, plus `line` and `curveBasis` for paths. A `transition` with `easeLinear` drives the animation, and `clipPath` confines the visible region to the viewport.

Loading thumbnail…

Time based moving graph changed colors

A time-based line chart animates four network data series—Partner, PCL, GOLAN, and DriveU—across a moving time window, with each line rendered in a distinct color that remains constant. The chart displays MBPS values against timestamps from a CSV file, using SVG paths and a smooth transition that shifts the x-axis and lines horizontally over time. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `line` with `curveBasis`, while `transition.attr` with an `easeLinear` timing function drives the animation, clipping the viewport to show a sliding window of recent data.

Loading thumbnail…

Time based moving graph

This animated chart tracks four network metrics (Partner, PCL, GOLAN, DriveU) over a two-minute period. It shows a moving time window, with the axis and legend translating leftward to follow the data. The visualization uses D3 v6 'scaleTime' and 'scaleLinear' for axes, 'line' for paths, and 'transition' with 'easeLinear' for animation. Data is sourced from a CSV file containing per-second readings.

Loading thumbnail…

Time based moving graph

A time-based line chart displays four network performance metrics—Partner, PCL, GOLAN, and DriveU—measured in MBPS over a two-minute period. The visualization animates by smoothly translating the x-axis and line paths leftward, creating the effect of a moving time window. Data is loaded from a CSV file and parsed into JavaScript Date objects. The chart uses D3 v6 scales, axes, line generators with basis curves, ordinal color scales, and clip paths to reveal the moving portion, with a linear transition controlling the animation speed.

Loading thumbnail…

Fork of Fork of Seismograph - almost almost almost

Four live network throughput lines animate leftward across a scrolling time axis, tracing megabits per second for Partner, PCL, GOLAN, and DriveU over a two-minute window. Built with d3.v6, the visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom to render SVG paths. A d3.transition with easeLinear shifts the chart horizontally, revealing data parsed from a CSV file.

Loading thumbnail…

Fork of Seismograph - almost almost

This visualization presents a seismograph-style line chart displaying network throughput in megabits per second for four server endpoints (Partner, PCL, GOLAN, DriveU) over a two-minute period. Four colored lines, each representing an endpoint, trace the fluctuating data values across the timeline. The visualization uses a scrolling x-axis, which animates through the time series data to simulate a real-time monitoring view. The implementation uses d3.scaleTime, d3.scaleLinear, and a d3.line generator, with the x-axis positioned within a clipped group to enable the scrolling effect. Data comes from a CSV file containing per-second performance metrics.

Loading thumbnail…

Seismograph - almost

Four high-speed network lines—Partner, PCL, GOLAN, and DriveU—animate as a scrolling seismograph of throughput values in Mbps, moving leftward over a two-minute window. Built with d3.v6, the SVG paths use `line()` generators, a time-scaled x-axis, and a linear y-axis capped at 16, while a `transition` with `easeLinear` translates the clipped chart continuously. Data are parsed from the CSV and colored via an ordinal scale with `schemeCategory10`.

Loading thumbnail…

Seismograph Simple

This chart displays network throughput in megabits per second across four entities—Partner, PCL, GOLAN, and DriveU—over a short time period. Each entity is drawn as a distinct colored line using d3’s `line` generator, with the x-axis representing time via `scaleTime` and the y-axis set to a fixed range of 0 to 16. The data is parsed from a CSV file, and the visualization includes a color legend generated by a custom `colorLegend` function, with axes rendered using `axisLeft` and `axisBottom`. The SVG output is styled with thick, rounded line strokes.

Loading thumbnail…

Seismograph

This visualization displays network throughput data for four providers—Partner, PCL, GOLAN, and DriveU—as overlapping time-series lines with a seismograph aesthetic. The chart uses d3.scaleTime for the time axis and d3.scaleOrdinal with a categorical color scale to distinguish each provider. The data is sourced from a CSV file and processed into numeric values before being plotted. The implementation leverages d3.line with curveBasis, SVG rendering, and custom axes with tick formatting, along with a colorLegend module for the categorical mapping.

Loading thumbnail…

Seismo - line simple

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The smooth curve is rendered using an SVG path generated by d3.line with a curveBasis interpolation. The code employs d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft creating gridlines and tick labels. The chart includes a title, axis labels, and data-driven styling via CSS, with margins and responsive sizing computed from the SVG dimensions.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

Loading thumbnail…

Fork of Seismograph

A live seismograph-style chart streams time-series data from CSV, showing PCL, Partner, and GOLAN metrics plotted against time. The visualization continuously animates incoming data points, with the x-axis scaling time intervals as new slices are appended and old segments scroll off screen. Built with d3.csv for parsing, d3.line with curveBasis for smooth paths, and d3.interval to drive periodic updates. Each transition uses d3.transition with easeLinear to shift the line across the clipped SVG viewport, creating a real-time monitoring effect.

Loading thumbnail…

Seismograph

A real-time scrolling line chart animates a single data series, PCL, from a CSV file with time-stamped network metrics. The visualization shifts a line drawing across the viewport as new data arrives, using `d3.interval` to append path segments that translate horizontally and then remove themselves. The SVG rendering relies on `d3.line` with `curveBasis` smoothing, paired with `scaleTime` and `scaleLinear` for axes, all built with D3 v5. The data is parsed with `d3.csv`.

Loading thumbnail…

Fork of Fork of Real time chart 2

This real-time line chart displays 40 random data points generated by `d3.randomNormal`, continuously appending new values and shifting old ones out in a streaming animation. Built with D3 v5, it uses `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for the smooth path, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG path updates every 50 milliseconds via a transition loop, while a clipped group ensures the line stays within the plotting area. The animation relies on `d3.active` to shift the path leftward with each tick. The chart renders entirely in SVG.

Loading thumbnail…

Fork of Real time chart 2

This example shows a real-time line chart animating a stream of normally distributed random data. A smooth basis curve scrolls continuously from the right as new values are generated and appended; the chart shifts left to make room, creating a live monitoring effect. The visualization is built with D3 v5, using `randomNormal` to supply data, `scaleLinear` for axes, and a line generator with `curveBasis`. Animation relies on chained `transition` calls with `easeLinear`, `active`, and `datum` updates inside a recursive `tick` function, rendered as SVG.

Loading thumbnail…

Real time chart

This example demonstrates a real-time line chart that continuously updates with new data points. The visualization shows a scrolling line graph where new random values are appended and old ones shift out of view every half second. The chart uses D3 v5 to generate data with `d3.randomNormal`, and displays an animated SVG path created with `d3.line`. The updating mechanism relies on D3 transitions with `easeLinear`, using `transition.attrTween` (via the `tick` function) to slide the line horizontally while clipped by a clipPath.

Loading thumbnail…

Fork of Linechart

This linechart displays one week of temperature data in San Francisco, using a smooth curved line to connect readings over time. The visualization relies on D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, rendering to SVG. Data originates from the Data Canvas - Sense Your City project, loaded via `d3.csv` from a GitHub gist, though the temperature values remain as unparsed strings in the current code.

Loading thumbnail…

Circles on a Map

This example displays world country outlines colored by population data from the UN, overlaid with a custom color legend. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to render geographic features, with zoom interaction via d3.zoom. Circles positioned using d3.geoCentroid appear on country centers. The legend demonstrates a reusable d3 module with SVG rendering, while data loads through d3.csv and d3.json with topojson.feature.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot compares car horsepower and weight using data from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles display each vehicle’s values, with axis labels and gridlines for readability. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data to SVG coordinates, with data loaded via `csv()`. Axes and title are appended as SVG text elements, while styling is applied through external CSS.

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays the UCI Auto MPG dataset, showing relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, triggering a staggered 2-second animated transition where circles move to their new positions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `selection.transition().delay()`, rendering as SVG with a custom `dropdownMenu` component for interactive control.

Loading thumbnail…

Fork of Hello VizHub

This interactive scatterplot lets users explore the relationship between any pair of numeric variables from the auto-mpg dataset. Two dropdown menus, built with the custom `dropdownMenu` function, independently select the x and y axes. The chart updates dynamically using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering. The `scatterPlot` module reuses enter/merge patterns to efficiently update circles and axis labels. Data loads via `d3.csv` and appears as semi-transparent red circles.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a basic Hello World visualization using D3.js, rendering the text “description: 照明灯1” centered in a large font. It shows how to load D3 v5 via UNPKG, import the `select` function directly from the D3 module, and import a local ES6 module. The visualization uses D3’s `select` API to set the text content of a div element, with styling controlled by an external CSS file.

Loading thumbnail…

Fork of Globe Zoom - Animate

This visualization presents global nuclear explosion sites as points on a zoomable, animatable globe, transitioning between map projections. The view alternates between an orthographic globe and a Mercator projection using clickable menu buttons. Built with D3 v3 and React, it leverages `d3.geo.orthographic`, `d3.geo.mercator`, and `d3.geo.path` for rendering, while TopoJSON supplies world landmasses and borders. Nuclear test data from a CSV file is plotted as selectable, tooltip-enabled circles.

Loading thumbnail…

Fork of HTML Starter

This example shows a blank SVG canvas with placeholder menus for selecting X and Y axes, though the dropdown menu logic is commented out and the scatter plot is never implemented. The code imports d3.v5 via a script tag and includes a React-ready dropdownMenu module that remains unused. The main.js file only logs “hi” to the console, with the rest of the intended visualization workflow—data loading, column selection, and rendering—present only as commented-out code stubs.

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot lets users explore the relationship between car horsepower and weight from the auto-mpg dataset, with a dropdown menu to select which numerical column drives the x-axis values. The visualization uses D3 v6 to render SVG circles with semi-transparent red fills, scaling axes with d3.scaleLinear and extent. Axes are drawn using d3.axisBottom and d3.axisLeft, and the custom dropdownMenu module populates the select element with all data columns.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to build a basic dropdown menu using D3.js version 6 within an HTML page. It creates a single select element containing options A, B, and C, populated by binding an array of strings to the data. The code uses `d3.selectAll`, `.selectAll()`, `.data()`, `.enter()`, and `.append()` to construct the menu, with each option’s value and text set via `.attr()` and `.text()`. The page also logs the initial options array and selection to the console for inspection.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a natural Earth projection, with a color-coded legend that filters the map when clicked. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render geographic features from TopoJSON world-atlas data, while `scaleOrdinal` and `schemeSpectral` assign colors. Clicking a legend item dims non-matching countries and highlights the selected category; hovering reveals country names and values via SVG `<title>` elements. Pan and zoom are enabled through the `zoom` behavior.

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world countries colored by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking legend items filters the map to highlight countries matching the selected economy type while dimming others, with the sphere and map regions adjusting opacity accordingly. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render topojson data from the world-atlas 50m dataset, and supports pan and zoom interactions through d3.zoom. Tooltips show country names and values via SVG title elements.

Loading thumbnail…

Choropleth Map

This choropleth map displays global income groups using a color scale applied to each country’s territory. The visualization employs d3.geoPath with a natural Earth projection to render the GeoJSON features, while d3.scaleOrdinal and schemeSpectral map income categories to colors. A custom color legend, built with select and merge, appears on the left. The map supports zooming via d3.zoom, and hovering highlights countries in red. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature.

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5, displaying countries as light green shapes on a blue sphere. Users can pan and zoom the map with mouse or touch input. The map loads geographic data from a TopoJSON world-atlas file, then draws it using an SVG path generator with a natural Earth projection. Country names are matched from TSV metadata and shown as tooltips. The implementation uses `d3.zoom`, `d3.geoPath`, and `d3.geoNaturalEarth1`, with hover effects changing country fill color via CSS.

Loading thumbnail…

Fork of Fork of Cheap tricks for interaction D3 version 5

A map of the world renders as SVG paths filled with light green, and hovering over a country turns it red. The visualization uses D3 v6 with the `geoNaturalEarth1` projection and `geoPath` to draw countries, while `d3.zoom` enables pan and zoom interactions. Country names come from a TSV file joined to TopoJSON data from the World Atlas, and tooltips appear via appended `title` elements.

Loading thumbnail…

Color and size legends

This example demonstrates reusable D3 color and size legend components, rendered as SVG within a 960×500 viewport. The color legend uses a `scaleOrdinal` with categorical fruit domains mapped to red, yellow, green, and orange, while the size legend applies a `scaleSqrt` with tick marks generated via `sizeScale.ticks()`. Both legends employ D3’s data join pattern (`selectAll`, `enter`, `merge`) to append circle and text elements per tick, with spacing and text offsets configured through component props. Circles include a semi-transparent fill for the size legend and stroke outlines for both legends.

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, with each country as a leaf node. The view uses a left-to-right layout where nodes are positioned by depth and text size decreases at deeper levels. It is rendered as SVG using D3 v6, with the tree layout generated by `d3.tree()` and `d3.hierarchy()`. Connections are drawn with `d3.linkHorizontal()`, and the chart supports pan and zoom via the `d3.zoom()` behavior applied to the SVG group.

Loading thumbnail…

Blank Canvas!

A blank, rounded rectangle fills the browser window, demonstrating a minimal D3.js setup. The visualization shows an empty SVG canvas, with no data or marks drawn. The code uses the `select` and `arc` functions from D3 v6, though the latter is not invoked. It sizes the SVG to the viewport's client width and height, then appends a single rounded `<rect>` covering the entire space. The document's body is fixed to the viewport edges via CSS, ensuring the canvas fills the screen.

Loading thumbnail…

Fork of Cheap tricks for interaction D3 version 5

This interactive map displays world countries using a Natural Earth projection, with hover highlighting and zoom-and-pan capabilities. The visualization renders SVG paths generated by `d3.geoPath` and `geoNaturalEarth1`, while `d3.zoom` applies transform updates to the map group. Country names come from a TSV file joined to TopoJSON geometry via `d3.json` and `topojson.feature`. Hover states change country fill colors, and the sphere background uses a distinct blue fill.

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit demonstrates enter, update, and exit selections with animated transitions. Hovering over a circle highlights it with a black stroke and triggers a callback to update the selected state. Using d3.v6, the fruitBowl function maps apple and lemon types to radii and colors via scaleOrdinal, while transitions animate radius and position changes over one second.

Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit displays five circles representing apples and lemons, each clickable to select and highlight with a black stroke. The visualization uses D3 v6 with SVG rendering and animation, employing `scaleOrdinal` for color and radius mapping based on fruit type. State changes include eating an apple and replacing one with a lemon, triggering enter, update, and exit transitions that animate radius from zero to full size over one second.

Loading thumbnail…

Transition try of bowl of fruit

A bowl of fruit transitions as apples are eaten and one apple morphs into a lemon. The example uses D3 v6 with `d3.scaleOrdinal` for color and radius, and SVG groups for each fruit. `selection.data` with key functions handles entering, updating, and exiting elements, while `transition` and `attrTween` animate position and circle radius over one-second intervals.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples sit in a bowl rendered as a rounded rectangle. Using the General Update Pattern, the visualization animates data-driven changes with D3's enter, update, and exit selections. `d3.scaleOrdinal` maps fruit types to colors and radii, while `selection.merge` handles state transitions. Over timed intervals, apples are removed and one is replaced with a lemon, which updates the SVG circles and text labels accordingly. The bowl's shape is a fixed SVG `rect` with large corner radii, and all rendering uses D3 v6 with SVG elements.

Loading thumbnail…

General Update Pattern with animation

Five fruits sit in a bowl as circles with colored fills and text labels. Every second, an apple is eaten or replaced with a lemon, triggering an animated transition that smoothly slides all remaining fruits into new positions over one second via `selection.merge().transition()`. The example demonstrates the general update pattern, using a key function on fruit IDs to track enter, update, and exit selections. Rendering relies on SVG elements built with D3 v6, applying ordinal color and radius scales from `d3.scaleOrdinal`.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

Fruits appear in a bowl and update over time demonstrating the general update pattern. Initially, five apples are drawn. After one second, an apple is removed. Then an apple changes into a lemon, and finally another apple is removed. The example uses D3’s `selectAll`, `enter`, `merge`, and `exit` methods to handle state changes. Each fruit is rendered as an SVG circle with a label, and the bowl is a rounded rectangle.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five fruit circles enter an SVG bowl and animate to their positions. This example demonstrates the D3 general update pattern by eating apples, replacing one with a lemon, and removing another, all with smooth transitions. The code uses d3.select, d3.range, scaleOrdinal for color and radius, and transition().duration() for animation. Each fruit has an id for keyed data joins, and exit selections shrink to zero radius before removal.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time using D3 v6, with the data sourced from a CSV file of population by year through 2015. The SVG rendering employs D3's `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` to create the filled smooth area, and `axisLeft`/`axisBottom` for gridlines and tick formatting. Population values are abbreviated (e.g., "B" for billions) on the y-axis, with axis labels and a title included.

Loading thumbnail…

AreaChart

This area chart shows one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with a curve basis. Data is loaded from a CSV file via `d3.csv` and parsed into temperature and timestamp values. The visualization includes labeled axes, a title, and grid lines created through custom tick sizes.

Loading thumbnail…

Linechart

This linechart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v6 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a line generator with `curveBasis` for smoothing. Data is loaded from a CSV file via `d3.csv` and parsed into `Date` and numeric values. The chart includes labeled axes and a title, with gridlines styled through tick size settings.

Loading thumbnail…

Temperature

This scatter plot visualizes one week of temperature data in San Francisco, using D3 v6 to position circles on SVG canvas based on timestamp and temperature measurements. The chart includes labeled axes for time and temperature, with a title "A week in San Francisco" and uses grid lines and tick marks for readability. The data is loaded from an external CSV via D3's `csv` function, then mapped through `scaleTime` and `scaleLinear` scales, with axes generated using `axisBottom` and `axisLeft`.

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Red, semi-transparent circles represent individual cars, with each point positioned using d3.scaleLinear for both axes. The chart includes labeled axes and a title, rendered as SVG elements. The code uses d3.csv to load data, converts numeric fields, and appends circles via data binding with d3-selection’s enter method.

Loading thumbnail…

Fork of Scatterplot

This fork of a scatterplot displays the population of four countries, with circles sized uniformly and positioned along a point scale for country names and a linear scale for population values. The code uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom and d3.axisLeft for axes with tick formatting. Rendering occurs via SVG, with grid lines and labels styled through CSS. The chart title and axis labels are appended directly within the SVG group.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the four most populous countries, with the United States incorrectly plotted as 326,767,000. The chart uses D3 v6 scales and axes, including `scaleLinear` for the population axis and `scaleBand` for the country categories. Custom tick formatting converts large numbers using `d3.format` to abbreviations like “B” for billions. The axes are heavily styled, with grid lines via `tickSize`, and the left axis removes its domain and tick lines entirely.

Loading thumbnail…

Auto MPG Summary

This visualization presents a summary of the auto-mpg dataset from the UCI Machine Learning Repository. Upon loading, the page displays three key statistics: the total row count, column count, and file size in kilobytes. Following this overview, the first ten rows of the dataset are rendered as formatted JSON text directly in the browser. The implementation uses d3.v6’s `csv` and `csvFormat` functions to fetch and process the data, while the `select` function appends results to the page body.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL. It displays the file size in kilobytes, the number of rows, and the number of columns in the dataset. The visualization uses `d3.csv` to fetch and parse the data, then calls `d3.csvFormat` to calculate the data size. The data source is the CSS Named Colors CSV file hosted on GitHub.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A horizontal bar chart displays population estimates for the most populous countries, using data from the 2017 United Nations World Population Prospects. The chart encodes population with a linear scale and country names with a band scale to position bars. Rendered as SVG, the visualization uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. The bars are styled with steelblue fill, and the chart includes labeled axes with margins applied.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle becomes a cartoon face as D3.js draws two eyes, animated eyebrows, and an arc-based mouth inside an SVG. The code uses D3 v6 selections and transitions, with `transition.attr` to move the eyebrows up and down over two seconds. Eye positions and sizes come from hardcoded variables, while the mouth uses `d3.arc` with inner and outer radii. The face is centered via a group transform, and the eyebrows are rectangles that animate vertically, demonstrating simple SVG animation with D3’s transition API.

Loading thumbnail…

Fork of Fork of Phasor2 v3 with boxex

This visualization shows a hierarchical tree with nodes displayed as red-bordered white boxes connected by green curved links, using sample data with a root node "MV" and children like "G1," "G2," and "G3." The code employs d3.v5's `tree` layout and `hierarchy` to position nodes, while `linkVertical` generates the paths between parent and child nodes. Each node renders as a `rect` and `text` element in SVG, with the viewport fixed to 900 by 300 pixels. Though zoom functionality is defined via `d3.zoom`, it remains commented out in the current example.

Loading thumbnail…

Fork of Phasor2 without zoom

This example displays a static dendrogram visualization of a hierarchical JSON dataset, with nodes labeled by identifiers such as “MV,” “G1,” and “G101.” The tree layout, generated using `d3.tree` and `d3.hierarchy`, places parent-child relationships along vertical link paths drawn with `d3.linkVertical`. The code loads data via `d3.json` and renders text labels directly onto an SVG canvas. While the original version includes zoom functionality, this fork deliberately omits the `d3.zoom` interaction, leaving the diagram fixed at a predetermined width and height with margins.

Loading thumbnail…

Phasor2

Phasor2 renders a hierarchical dataset as a vertical tree, with nodes labeled by IDs from a nested JSON structure and connected by curved paths. The visualization applies D3’s `tree` layout and `linkVertical` generator to position elements, while a zoom behavior enables interactive panning and scaling of the SVG. Node labels are styled with a serif font and white text shadows for readability.

Loading thumbnail…

Fork of World Countries Tree

This example presents a hierarchical tree visualization of countries organized by continent and subregion, with the world at the root. The tree uses horizontal links and text labels whose font size decreases with depth, displaying all country names in a readable layout. The visualization supports pan and zoom via the d3.zoom interaction, applying the transform to a group element. The code builds the layout with d3.tree and d3.hierarchy, renders links using d3.linkHorizontal, and loads the hierarchical data from a JSON file.

Loading thumbnail…

Fork of D3 Starter

A demonstration of a minimal D3 version 6 starter template, this example displays the text "Hello D3 version 6" on a blank page. The code also loads a CSV dataset containing historical brand valuations via `d3.csv` and `d3.autoType`, though no visualization is rendered from that data. The example uses the D3 `select` API to update the body text and relies on a local `category-brands.csv` file and an external raw dataset from GitHub. The page is styled with a large 13em font size for the greeting.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map with a linked time-series histogram to explore migrant deaths and missing persons. The map displays circles sized by the total dead and missing per location, while the histogram shows monthly totals, with a brushable selection filtering the map in real time. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering and `brushX` for interactive filtering. Data comes from the Missing Migrants Global dataset, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Fork of Labels

A donut chart displays three apple values with labels positioned outside the chart’s outer radius. The visualization uses only D3.js v6 with SVG rendering, calculating arc paths via `d3.arc` and slice angles via `d3.pie`. Labels are placed using trigonometry and each label’s bounding box (`getBBox`) to compute adjusted coordinates, though the commented-out pointer lines and markers remain inactive. The chart applies a color scale derived from an HSL interpolation and notable padding and corner radius for the arcs.

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with cities over 50,000 population represented by semi-transparent circles, whose radii encode population via a square-root scale. Country boundaries, graticules, and the sphere outline are drawn using `d3.geoNaturalEarth1` and `d3.geoPath` in SVG. React manages the component state, fetching city data from a CSV via `d3.csv` and country topology from the World Atlas TopoJSON using `d3.json` and `topojson.feature`. The squared-sized points highlight population distribution across the globe.

Loading thumbnail…

Fork of Polished World Map

This example presents a polished world map using a Natural Earth projection, displaying country boundaries and graticules. It visualizes geographic data from the World Atlas TopoJSON dataset, with land masses filled in teal and country borders drawn as interior mesh lines. The visualization uses React for component structure and d3-geo APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and render the map. The topojson library converts the TopoJSON topology into GeoJSON features and computes the interior boundaries between countries, with all elements rendered as SVG paths.

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each of the three iris species represented by a distinct color. The visualization uses React components to render SVG circles, with d3.scaleLinear mapping the quantitative axes and d3.scaleOrdinal assigning categorical colors. Axes are generated through custom React components that leverage d3’s tick generation, while the useData hook fetches and parses the CSV data using d3.csv. Hovering over a circle displays its exact petal length value via an SVG title element.

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset by mapping petal length and sepal width for individual flowers. Each circle is colored by species using a D3 ordinal scale. The React-based code uses `d3.scaleLinear` and `d3.scaleOrdinal` to position and color the marks, rendered as SVG `circle` elements, with `d3.csv` loading the data for display.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with ReactDropdown, dynamically control which attributes appear on the x- and y-axes, with axes and labels updating accordingly. The visualization uses React for component structure, D3 v5 scales and CSV loading via `d3.csv`, and renders circles as SVG marks with tooltips. Styling uses Poppins font and a clean, minimal aesthetic.

Loading thumbnail…

Working with time

This example visualizes temperature readings over time as a smooth, curved line chart, showing how temperature fluctuates across the days of a week. The data comes from the Data Canvas Sense of Your City dataset, specifically week temperature measurements for San Francisco. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `d3.line()` with `curveNatural` to generate the smooth path, and `timeFormat('%a')` to display weekday labels. The SVG rendering includes custom axis components and a styled mark path with rounded line joins.

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries from the 2019 United Nations World Population Prospects dataset, using horizontal bars colored teal against a light gray grid. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis categories and `scaleLinear` for the population values, rendered as SVG rectangles. The chart includes axis labels, tick marks, and tooltips that format population numbers using `format('.2s')` to abbreviate values like "1.2B". The data is fetched via `csv` from a remote gist, with the top 10 rows extracted for display.

Loading thumbnail…

Fork of Labels

This example shows a donut chart of five apple-related values with labeled slices. Each label is positioned outside the arc and connected to its corresponding slice via a thin pointer line ending in a circular marker. The implementation uses D3 v6’s `d3.pie` and `d3.arc` to compute slice geometry, with labels placed using trigonometric calculations based on each slice’s mid-angle. SVG markers are defined for both a triangle arrowhead (demonstrated in the README) and the circle used on the pointers, while `d3.scaleOrdinal` with a red-to-blue interpolator colors the slices.

Loading thumbnail…

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

This interactive visualization displays population data for various countries as a horizontal bar chart rendered in SVG. The React component uses hooks like `useState` and `useEffect` to asynchronously load CSV data from a remote gist via `d3.csv`, then maps each country to a `rect` element. The chart employs `d3.scaleBand` for the y-axis and `d3.scaleLinear` with `d3.max` for the x-axis scaling. ReactDOM renders the dynamic SVG directly into the page, updating after the data fetch completes.

Loading thumbnail…

Rendering Data with React & D3

This example demonstrates loading CSS named colors data from a GitHub Gist and rendering it with React, using D3 utilities for data parsing and arc geometry. The code uses `d3.csv` to fetch and parse the dataset, then passes it to React state via `useState` and `useEffect` hooks. A D3 arc generator creates pie slices with an inner radius of zero and outer radius equal to the viewport width. The application displays a loading message before the data arrives.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the 148 named CSS colors as a radial burst, with each color occupying an equal angular slice in a pie chart. It loads the color data from a CSV file using D3’s `csv` utility, then employs React to render the SVG paths. The chart is constructed with D3’s `pie` and `arc` functions, while React manages the component state and rendering lifecycle.

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

This example shows a donut-style pie chart rendered as an SVG in React, with four slices colored along an interpolated gradient from orange to deep red using `d3.interpolateRgb`. The chart is built with `d3.pie()` to compute slice angles and `d3.arc()` to generate the path shapes, while the React components `Slice` and `SimplePieChart` manage the SVG structure. Although the `Check` component defines a horizontal strip of rectangles using `d3.interpolateRgb`, it is commented out and not displayed.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a bubble chart of religious affiliation by country, with data sourced from the UCI Machine Learning Repository. Circles are positioned by country and religion, while population values determine circle size, and tooltips display exact population counts on hover. The code integrates vega-lite-api, Vega, Vega-Lite, D3’s CSV loader, and vega-tooltip, applying a custom dark-axis style via a config object. The chart auto-sizes to fit the browser window and uses SVG rendering.

Loading thumbnail…

Loading data with React & D3

This example demonstrates how React manages asynchronous data loading for D3 visualizations. The app uses React’s `useState` and `useEffect` hooks to fetch a remote CSV file via D3’s `csv` method, displaying a loading message until the data arrives. Once loaded, a custom `message` function computes and renders the file size in kilobytes, row count, and column count using `d3.csvFormat` and the data’s `columns` property. The result is shown as plain text in a `<pre>` element, highlighting the integration of D3’s data parsing with React’s component lifecycle.

Loading thumbnail…

fetch exrecise

This example demonstrates the Fetch API and D3’s CSV parsing by displaying a short statistical summary of a remote dataset. It fetches a raw CSV file from a GitHub gist using `fetch`, then parses it with `d3.csv`. The resulting text reports the file size in kilobytes, the number of rows, and the number of columns, shown in large monospaced text. The visualization is entirely textual, with no charts or graphics, focusing on the mechanics of asynchronous data loading and basic dataset inspection.

Loading thumbnail…

React Mouse follower

A React SVG circle follows the mouse cursor across the full browser window, updating its position in real time. The app uses React’s `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, storing them in a state object. The `onMouseMove` event handler on the `<svg>` element triggers a state update, and the circle’s `cx` and `cy` attributes re-render with the new position. The example demonstrates declarative interaction between React state and SVG rendering without external data or animation libraries.

Loading thumbnail…

Smiley faces react

A grid of randomly generated smiley faces demonstrates the flexibility of React components for modular SVG visualization. Each face is composed of separate, reusable components—BackgroundCircle, Eyes, and Mouth—which are parameterized with random values for eye position and size, mouth curvature, and stroke width. The faces are rendered as SVG paths, with the mouth generated using d3's arc function. The example uses React and D3 v5 to create a dynamic, varied set of facial expressions.

Loading thumbnail…

Hello react

A bare-bones React example renders a single gray circle on an SVG canvas sized at 960 by 500 pixels. The circle, with a radius of 200, is defined directly in the `index.html` markup using the SVG `<circle>` element. The associated `index.js` file merely logs "hi" to the console, and the page’s styling consists of a CSS rule that sets the body margin to zero and hides overflow. The project serves as a minimal starting point for integrating React with SVG-based data visualizations.

Loading thumbnail…

Labels

This example shows a donut chart with value labels placed outside the arcs, connected by thin pointer lines with circular endpoints. The code uses d3.pie and d3.arc to compute arc geometry and render SVG paths, while label positions are calculated from each slice’s mid-angle. d3.scaleOrdinal with d3.interpolateHslLong assigns colors, and text elements are positioned using bounding-box measurements to place pointers correctly. The dataset is a static array of five numbers (apples), rendered entirely with SVG in d3 v6.

Loading thumbnail…

Hello HTML

This example demonstrates a minimal web page that renders a single SVG circle on a gray background. It uses plain HTML with inline CSS to set the page margins and overflow, while an SVG element with width and height attributes contains a circle with a radius of 200 pixels. The page also includes a reference to an external JavaScript file that logs a message to the console, though no dynamic behavior is applied to the graphic itself. The rendering relies solely on the browser’s native SVG support and basic CSS styling, with no additional libraries or data sources involved.