M

Mauradion

@Mauradion·24 public vizzes

Loading thumbnail…

World countries tree

This example visualizes hierarchical survey data as a radial tree, with each leaf node represented by a colored horizontal bar showing a percentage value and its associated words array listed underneath. Built with D3 v5 and SVG, the code uses `d3.hierarchy`, `d3.cluster`, and `d3.scaleLinear` to compute the layout and encode numeric values as bar heights. Labels and bars are positioned along the circular hierarchy, and the visualization loads data from a JSON file containing nested topic clusters with word lists, as well as support for panning and zooming via `d3.zoom`.

Loading thumbnail…

Untitled

This visualization demonstrates the hierarchical clustering of a Facebook group's member data using an interactive zoomable sunburst diagram. The circular layout partitions data by tree depth, with colored arcs representing hierarchical levels and leaf nodes sized proportionally to cluster values. The visualization uses D3 v3’s `d3.layout.partition` and `d3.svg.arc` to compute geometry, with animated transitions (via `transition.attrTween`) enabling zooming between hierarchy levels when clicking arcs or the central circle. Data is loaded from a JSON file containing the dendrogram structure.

Loading thumbnail…

Selecting a year on a line chart

This visualization shows world population trends over time across regions, with a vertical line marking a selected year. Users can move their mouse across the chart to update the selected year, which highlights the corresponding point in time. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom to render the SVG line chart, while d3.mouse captures interactive hover events. Population data comes from UN estimates (1950-2014) and medium variant projections (2015-2100), processed via d3.csv and d3.nest.

Loading thumbnail…

Melting and munging data

The chart visualizes global population trends from 1950 to 2100 across major regions, using colored lines with a legend to differentiate them. It highlights long-term demographic shifts, with the data sourced from UN population estimates and medium-variant projections. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while data is processed by melting the wide CSV format into a tidy structure for line generation.

Loading thumbnail…

Line chart with multiple lines

A line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses d3.nest to group data by city, d3.line with curveBasis for smooth paths, and d3.scaleOrdinal with schemeCategory10 for color mapping. Data comes from a CSV file loaded via d3.csv, rendered as SVG with axes from d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Circles on a map

This map visualizes global population estimates for 2018 using proportional circles overlaid on a geographic projection of the world. The visualization layers semi-transparent teal circles at each country’s centroid, with circle radius scaled by the square root of population via a legend. It employs D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` for map geometry, alongside `scaleSqrt` for sizing and `scaleOrdinal` for color. Data combines UN population CSV estimates with TopoJSON country boundaries, processed through local modules `loadAndProcessData` and `sizeLegend`.

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with interactive zooming and panning, where each country is rendered as a light green path that turns red on hover. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` for map geometry, with country shapes loaded as TopoJSON data from the world-atlas package and names joined via TSV metadata. The visualization demonstrates modular ES6 imports, including `topojson.feature` for converting TopoJSON to GeoJSON, and an SVG-based rendering approach with `d3.zoom` for user interaction.

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the relationship between pairs of attributes from the auto-mpg dataset. Two dropdown menus let users select which columns to plot on the x- and y-axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes, while circles transition to their new positions with a delay using d3.transition. The SVG updates dynamically as menu selections change, with the dropdownMenu component handling the user interaction.

Loading thumbnail…

interactive_choropleth_map

An interactive choropleth map colors world countries by economic classification using d3.geoNaturalEarth1 and d3.geoPath, with a clickable ordinal color legend to filter highlighted regions. Built with D3 v5 and TopoJSON world-atlas data, it supports zooming via d3.zoom and renders as SVG. Hovering dims non-selected countries while selected ones gain emphasis.

Loading thumbnail…

Choropleth

This choropleth visualizes countries colored by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders a Natural Earth projection with d3.geoNaturalEarth1 and d3.geoPath, loading world geometry via TopoJSON from the world-atlas package, with country names and economic data matched from a TSV table. A custom color legend, built with D3 selections, displays the sorted categories, and d3.zoom enables panning and zooming of the map.

Loading thumbnail…

Color and size Legends

Two reusable legend components display color and size scales side by side. The color legend maps fruit names to hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` with five ticks to show proportional radii. Both legends are implemented as ES6 modules that append SVG groups, circles, and text via data joins. The example demonstrates local module imports alongside D3 loaded from UNPKG, with styling applied through external CSS classes.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for building a data visualization with D3 version 6, displaying a blank page with a large text size. The code loads the D3 library from a CDN and executes a JavaScript script that attempts to read data from an HTML element with the ID `getData`, logging its content to the console. The visualization relies on a separate `bundle.js` file, while the data is referenced from a `datacatalog.html` template, though the visible output remains empty in the browser.

Loading thumbnail…

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

Loading thumbnail…

Barplot

This example shows a horizontal bar plot ranking the ten most populous countries, with population values read from a local CSV file and displayed on a linear scale. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart. Population numbers are formatted using `format('.3s')` with a custom replace for billions, and the chart includes a title and axis label styled via CSS, with grid lines drawn from the x-axis ticks.

Loading thumbnail…

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

This map visualizes the countries of the world using a natural Earth projection, with hover interactions highlighting individual nations in red. The code loads geographic data from the world-atlas package via D3’s `tsv` and `json` loaders, then joins country names to geometries. It uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render SVG paths, and `d3.zoom` for pan/zoom interactions, while the topojson library converts TopoJSON features for display.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern for handling data changes in D3. Circles representing apples and lemons enter, update, and exit with animated transitions, while hovering highlights the selected fruit. The code imports `scaleOrdinal` from d3, uses `selection.data`, `.enter()`, `.merge()`, and `.exit()`, and renders SVG circles with `transition().duration()`. Data is defined in `index.js`, with timed operations removing items and changing an apple to a lemon.

Loading thumbnail…

World Population : Area chart

This area chart visualizes world population growth from historical data, using a smooth curved line filled in maroon to show changes over time. The chart displays population values on the y-axis and time on the x-axis, with gridlines and labeled axes for clarity. Built with D3 v5, the visualization uses `d3.area` with `curveBasis` for the smooth path, `d3.scaleTime` and `d3.scaleLinear` for scaling, and `d3.axisLeft` and `d3.axisBottom` for the axes, rendering to SVG. Data is loaded from a CSV file on VizHub.

Loading thumbnail…

Temperature in San Francisco: Line chart

This example visualizes a week of temperature readings in San Francisco using a line chart, encoding time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG, with axes, grid lines, and a smooth curve generated by D3’s `line` generator with `curveBasis`. Data is loaded from a CSV file using `d3.csv`, and scales are created with `scaleTime` and `scaleLinear`. Axis labels and a title are added, while axis domains are removed to declutter the visual.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to map the quantitative variables and render axes with gridlines. Red semi-transparent circles are positioned using `xScale` and `yScale` based on the data's extent, while SVG text elements label the axes and title. The code loads data via `csv` from a remote URL and applies `nice()` to round the scale domains.

Loading thumbnail…

Let's make a face with D3.js

This example draws a yellow cartoon face in SVG, centered within a 960x500 viewport, using D3’s `select` and `arc` functions. The face features black circular eyes, rectangular eyebrows, and a mouth generated from an arc path. An animation demonstrates D3's `transition` method, which moves the eyebrows upward and back down over two two-second intervals. All shapes are built with D3 selections, and the SVG elements are positioned via translation and attribute assignments.

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page with a large, centered “Hello HTML” message and a console log of “Hello JavaScript!”. It demonstrates the basic structure of an HTML document, using a CSS style block to set the body’s text alignment and font size, and an inline JavaScript script tag to output a message. The page relies solely on native HTML, CSS, and JavaScript APIs, with no external libraries or data sources.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

Loading thumbnail…

Cars Report

This example displays a report of cars priced under $2000, listing them by year, make, model, and price. It also shows a "Loading ..." message before the data appears. The code uses JavaScript objects, arrays, and modules, employing `Promise`, `setTimeout`, and `JSON.parse` to simulate an asynchronous data fetch. The report is generated via the `generateReport` function, which filters and maps car data, and is then displayed in a `<pre>` element.

Loading thumbnail…

Cars Report

This example shows a simple web page that displays the make of the first car in a static dataset. It loads a local ES6 module containing an array of car objects, parses it from JSON, and writes the value `"Honda"` to a `<pre>` element using the DOM API `textContent`. The visualization relies on D3 only for module loading via UNPKG, while the data itself originates from a hardcoded JavaScript string in the `cars.js` file. No chart or graphical rendering is involved.