X

xsg13

@xsg13·26 public vizzes

Loading thumbnail…

Network Test

This example visualizes a directed network of stations labeled A through Z, with links representing connections between them. The graph is rendered as an SVG using D3.js version 3, with force-directed layout controlled by `d3.layout.force` and nodes positioned based on a seeded rank value. The data originates from a TSV file specifying station names, next stations, and ranks. Node labels are overlaid on circles, and the view supports zooming and panning via `d3.behavior.zoom`. The layout pins three nodes—the first, middle, and last—to their initial seed positions during ticks.

Loading thumbnail…

Untitled

This interactive network diagram visualizes a graph of interconnected entities, displaying nodes as either circles or squares with sizes and colors that map to a numerical score. The graph reveals a clustered structure where a central node connects to all others. The visualization uses D3.js v3 with an SVG rendering and a force-directed layout (`d3.layout.force`). Node appearances and link colors encode the score values, while mouse interactions highlight connected nodes and allow dragging.

Loading thumbnail…

Event handler

A row of five gray SVG circles responds to mouseover events by turning orange, demonstrating D3.js event handling with a simple hover interaction. The example renders static circles via SVG and uses d3.selectAll('circle') with the .on('mouseover') method to attach listeners, logging the event target to the console while changing the fill style. Mouse clicks remain unimplemented, as only the hover state is wired up, and the status text below the visualization is not updated programmatically.

Loading thumbnail…

D3 v4 - force layout

This example demonstrates a force-directed network layout of 100 nodes and 100 links, rendered as animated SVG circles and lines. The visualization uses d3.forceSimulation with forces for link attraction, collision detection, many-body repulsion, centering, and x/y positioning. Users can drag nodes within the 900×500 pixel graph area, with the simulation’s alpha target adjusting during interaction. The layout updates every tick, repositioning nodes and links based on the simulation state.

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

Loading thumbnail…

Knowledge Graph Test

A force-directed knowledge graph maps relationships between actors, directors, and films, with edges representing actions like "Acted in" or "Directed" and node colors indicating entity type. Built with d3.forceSimulation, the visualization applies charge, collision, and centering forces, while links include arrowhead markers and curved path labels showing relationship types. Nodes are draggable, and the entire graph supports zooming and panning via d3.zoom. The SVG rendering pulls data from a local JSON file containing nodes and links with metadata such as relationship value and source/target types.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications using color-coded countries on a natural Earth projection. Users can click legend items to filter and highlight specific categories while dimming others. The visualization uses d3.geoPath to render country shapes from TopoJSON data and d3.scaleOrdinal with a spectral color scheme. Interactive zooming is implemented with d3.zoom, while legend clicks trigger re-rendering with adjusted opacity values.

Loading thumbnail…

Chloropeth Map

This choropleth map colors countries by income group using an ordinal color scale derived from d3.scaleOrdinal and the d3.schemeSpectral palette. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, with hover highlighting via CSS. The visualization includes an interactive color legend built with custom SVG code, and supports zooming through d3.zoom. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package, and country names and income values appear in tooltips via SVG title elements.

Loading thumbnail…

Color and Size Legends.js

Two reusable legend components render D3 scales as SVG groups. A color legend maps ordinal fruit categories to circle fills using `scaleOrdinal`, while a size legend uses `scaleSqrt` with `ticks()` to generate circle radii. Both employ the enter-merge-exit pattern and rely on `selection.call()` to attach legends to the SVG. Text labels and circles are styled via CSS.

Loading thumbnail…

Tree Visualization of World Countries.js

A hierarchical tree visualization displays countries grouped by continent and subregion, with the world as the root and individual nations as leaf nodes. The layout uses D3's `tree` and `hierarchy` functions to position nodes, while `linkHorizontal` generates curved paths connecting them. The SVG rendering applies zoom functionality from D3's `zoom` event, and text labels scale in font size based on node depth. Styled with a Playfair Display font and text shadows, the visualization reads hierarchical country data from a local JSON file.

Loading thumbnail…

Blank Canvas.js

This blank Canvas.js example uses D3 v6 to create a full-window, rounded-rectangle canvas. It selects the SVG element, sets its dimensions to the browser viewport, and appends a single rectangle covering the entire area. The code relies on D3’s `select` and `attr` APIs, with the rectangle’s corner radius set via the `rx` attribute. No data or interaction is present; the visualization merely demonstrates a minimal setup for a fixed, frameless plotting surface using the body’s CSS to fill the screen.

Loading thumbnail…

Cheap Tricks for Interaction.js

This visualization displays a world map using an equirectangular Natural Earth projection, with countries rendered as SVG paths that highlight in red on hover and include tooltips via SVG title elements. It uses D3 v5 and TopoJSON, employing d3.geoNaturalEarth1, d3.geoPath, d3.zoom, and d3.event to enable pan and zoom interactions. Country names are loaded from a TSV file, while geographic boundaries come from the World Atlas TopoJSON dataset at 50m resolution.

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON, applying the natural Earth projection via `d3.geoNaturalEarth1` and drawing country boundaries with `d3.geoPath`. The SVG shows a blue sphere outline and light green countries with subtle black strokes. It loads country geometries from the world-atlas 110m TopoJSON dataset and converts them to GeoJSON using TopoJSON’s `feature` function. The code appends paths for the sphere and each country, demonstrating a straightforward choropleth-free geographic visualization.

Loading thumbnail…

Bowl of Fruit - Click to Select.js

Five apples are displayed in a row within an SVG bowl, and hovering over a fruit selects it with a black stroke. D3’s data join uses `selection.data` with a key function, and `merge` handles updates while `exit` transitions shrink removed fruits. Interactions trigger `setSelectedFruit` on mouseover and mouseout, and timed callbacks mutate the data array to remove apples or replace one with a lemon. The code relies on `scaleOrdinal` for color and radius, with `transition` animating position and size over one second.

Loading thumbnail…

Bowl of Fruit - General Update Pattern.js

This example demonstrates how the general update pattern in D3 can handle dynamic changes to a dataset representing fruit in a bowl. An initial set of apples is rendered as colored circles with labels inside a rounded rectangle, and updates occur over time as apples are removed or replaced with lemons. The code uses `selectAll`, `enter`, `merge`, and `exit` to manage SVG groups, with `scaleOrdinal` mapping fruit types to colors and radii. Timed `setTimeout` calls trigger re-rendering of the bowl via the custom `fruitBowl` function.

Loading thumbnail…

Bowl of Fruit - General Update Pattern.js

This example demonstrates the D3 general update pattern with a bowl of fruit represented as colored circles. Apples appear and disappear, and one apple transforms into a lemon, while all changes animate smoothly over one second. The code uses d3.select, d3.range, scaleOrdinal for color and radius mappings, and transition().duration() with .attr() and .remove() to handle enter, update, and exit selections. Data consists of objects with type and id properties, rendered as SVG circles.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, using a smooth curve to emphasize the accelerating trend upward. The visualization is built with D3 v6, leveraging `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and axis generators to render an SVG. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and populations as numbers. The chart includes labeled axes and gridlines, presenting the data with a maroon filled area beneath the population curve.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This area chart displays one week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth, curved area fill in maroon beneath the line, while axis labels and a title are positioned around the plot. Built with D3 v6, the visualization leverages `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `csv` to load the external dataset. Rendered as SVG, it includes axis grids generated by `axisBottom` and `axisLeft`, with data sourced from a VizHub-hosted CSV file.

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart visualizes one week of temperature measurements in San Francisco, using time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v6, with scales from `d3.scaleTime` and `d3.scaleLinear`. The line path is generated with `d3.line` and a `curveBasis` smoothing curve. Axis labels and grid lines are added via `d3.axisBottom` and `d3.axisLeft`, and data is loaded from a CSV using `d3.csv`. The visualization highlights temperature trends over the week with a maroon line against a clean, grid-lined background.

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Using D3 v6, the code loads CSV data, parses timestamps and numbers, and renders circles via SVG. It employs `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for ticks, while custom labels and a title are drawn as SVG text elements.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository. Using D3 v6 with an SVG rendering approach, the visualization encodes data points as red semi-transparent circles positioned by linear scales. The axes include grid lines, tick labels, and descriptive axis titles, while a prominent title identifies the comparison. The code demonstrates D3 utilities including `scaleLinear`, `axisBottom`, `axisLeft`, `extent`, and `csv` for data loading.

Loading thumbnail…

Auto MPG Summary

This visualization displays a text-based summary of the Auto MPG dataset from the UCI Machine Learning Repository. It reports the total row count, column count, and data size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses `d3.csv` to load the external CSV file, `csvFormat` to calculate the data size, and D3 selections to append `<pre>` elements displaying the information. The black background with green monospace text evokes a terminal aesthetic.

Loading thumbnail…

Scatter Plot

This chart displays the population of the top 21 most populous countries as circles on a scatter plot, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for the population axis, and d3.scalePoint for the categorical country axis. Axes are rendered with d3.axisLeft and d3.axisBottom, with tick labels formatted using d3.format to abbreviate large numbers, such as converting billions to "B." The SVG rendering is handled entirely through D3 selections and appended elements.

Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the world’s most populous countries, with China leading and the United Kingdom at the bottom. The code uses D3 v6 with SVG rendering, reading population data from a CSV file. It customizes both axes by removing domain lines and tick marks, applying a tick format that converts large numbers to abbreviations like “1.44B”, and adding an axis label. The bars are colored steelblue, with a title and sans-serif text styling from the included stylesheet.

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks countries by population, using D3 v6 to load data from a CSV and render SVG rectangles. The code scales population with `scaleLinear` and country names with `scaleBand`, then draws axes via `axisLeft` and `axisBottom`. Bars are appended as `rect` elements, with the data source parsed from the `data.csv` file.

Loading thumbnail…

HTML Cars Report

This example shows a static HTML report listing car manufacturers (Nissan, Ford, Chevrolet) with basic CSS styling and JavaScript. The page uses a plain `<ul>` list with one highlighted item, styled via a CSS class that sets text color to red. The body uses monospace font at a large size. No JavaScript libraries are used; the code demonstrates vanilla HTML and CSS only, with no interactive or data-driven rendering.