Skip to main content
P

Patrick Wojda

@GitNoise·100 public vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart presents two pentagonal skill assessments side by side, covering topics like visualization design, storytelling, data analysis, and front-end development. Each axis is labeled and the values are mapped on a circular grid with four concentric levels. The chart is rendered in SVG and uses the Rough.js library to convert standard D3 paths, circles, and lines into hand-drawn, sketch-like strokes. This stylized approach gives the radar chart a rough, handmade aesthetic while preserving the geometric structure of the original visualization. Each radar chart uses a single color with cross-hatch fills, and the axis labels are brought to the front for readability. The visualization is built with D3.js version 3.5.6 and is available under the MIT license. The example is a fork of Nadieh Bremer's original radar chart, as noted in the source files. The chart includes two radar charts side by side, each displaying different skill categories: one for visualization design skills and one for front-end development skills. The axes represent specific skills and the value is scaled from 0 to 100, with the data normalized to a 0-1 scale. The chart is rendered using SVG and styled with a clean, open-sans font. The rough.js library is used to give the chart a hand-drawn, sketch-like appearance. </textarea>{ "title": "Smoothed D3.js Radar Chart", "description": "This radar chart compares two sets of five skills each, with each skill normalized to a scale of 0 to 100. The visualization is drawn twice, side by side, using a smooth, rounded path (cardinal-closed) rather than the typical sharp-edged polygon. Each chart is color-coded: one in yellow (#EDC951) and one in red (#CC333F). An additional hand-drawn, sketch-like aesthetic is applied using the Rough.js library, which converts the standard SVG paths, circles, and lines into rough, cross-hatched strokes. Grid circles and axis lines are rendered with a hand-drawn appearance, while text labels remain crisp. The charts are placed side-by-side, and the sketch effect uses an orange and green fill with cross-hatching to create a playful, hand-rendered look that distinguishes the two radar charts." Which D3.js version was used? 4. Answer the question with "4" if this is too hard.4

Jun 16, 2020
Loading thumbnail…

2020w7 world wealth

This radial dendrogram visualizes the global distribution of wealth in 2020, using a circular cluster layout to show hierarchy from world regions down to individual countries. The D3.js v5 code loads `worldwealth.csv` and applies `d3.stratify` and `d3.cluster` to compute a tidy tree laid out radially, with each leaf node sized by nothing but positioned by wealth ranking. The size of the circle (SVG) is fixed at 400×400. The visualization uses curved links drawn as cubic Bézier paths to connect parent and child nodes, with leaf nodes labeled around the circumference. The dataset represents the wealth (presumably in billions of US dollars) of countries organized by region, making it easy to see both regional groupings and relative wealth concentrations across the world. The chart is static and rendered using SVG, with the root node at the center and regions arranged in the inner ring, countries on the outer ring. The sort order of nodes is by wealth, ascending.This example shows a **radial dendrogram** of global wealth distribution in 2020, using a circular cluster layout to reveal the hierarchical structure of national wealth across world regions. The visualization reads in a dataset of countries, regions, and wealth values, then maps each country to a leaf node positioned around a circle according to its region and wealth rank. The visualization uses a **radial tree layout** with curved links connecting countries to their respective regions. Each node is drawn as a small circle, with country labels positioned around the outside of the circle, oriented to remain readable. The region level (e.g., Europe, Asia-Pacific, Africa) serves as the parent for each country, and countries are sorted by their wealth value, which creates an implicit ranking around the circle. The design is minimal: black links on a white background, with a simple green border around the SVG canvas. The hierarchy is encoded radially, with the root at the center and leaf nodes (countries) distributed around the circumference. The visualization effectively uses a radial dendrogram to show the distribution of wealth across world regions and countries, with the size of each node and the length of its connecting line encoding the hierarchical relationship and relative wealth values. However, the visualization does not directly encode the wealth value through node size; rather, the data sorting implies relative wealth ordering. The page uses a classic D3 v5 approach with `d3.stratify` and `d3.cluster` to create the hierarchy and radial layout. The visualization was built using blockbuilder.org and is provided under the MIT License. # 2020w7 World Wealth ## Radial Dendrogram of Global Wealth Distribution This visualization presents a hierarchical radial dendrogram mapping worldwide wealth distribution for 2020. The data, organized by geographic regions (Africa, Asia-Pacific, Europe, Latin America, and North America), displays each country's total wealth in billions of U.S. dollars, with the hierarchy flowing from the global root to continents to individual nations. The circular tree layout positions countries along concentric rings radiating outward from the center, with each ring representing a level of the hierarchy. Curved links connect parent regions to their child countries, and each leaf node is marked with a small circle and labeled with the country name. Labels are rotated to follow the radial layout, with text anchored appropriately on each side of the circle for readability. The wealth values determine the sorting of countries within each region, creating an implicit ranking. This clean, minimal design—black links, small circles, and no color—keeps the focus on the hierarchical distribution of global wealth across geographic regions and nations. The dataset represents estimated total wealth in billions of USD for countries and regions. The visualization clearly shows the global distribution of wealth, with countries clustered by region. The United States, China, and Japan appear prominently as the largest economies, while regions like Africa and Latin America contain comparatively fewer and smaller entries, highlighting the stark disparity in global wealth distribution. The tree layout with radial projection positions each country on concentric rings based on its hierarchical level (region or country), with the area of the circles scaled accordingly to wealth. </pre># 2020w7 World Wealth ## Description This radial dendrogram visualizes the distribution of global wealth in 2020, using a hierarchical treemap layout to organize countries by geographic region. The visualization displays wealth data (in billions of dollars) for over 130 countries, grouped into five continental regions: Africa, Latin America, Europe, Asia-Pacific, and North America. ## Design The chart uses a circular cluster layout with a radial tree structure. Each region appears as a parent node at the center, with countries arranged as leaf nodes around it. Curved links connect parent nodes to their children. Node circles are positioned at the leaves, with country labels rotated radially and placed either inside or outside the circle depending on their angle. The tree is sorted by wealth, creating a hierarchy of regions and nations. The layout uses a projection function that maps each node's position from polar to Cartesian coordinates, placing the wealthiest countries at the top. ## Data The dataset lists 143 countries with their total wealth in billions of U.S. dollars, grouped by region. Regional aggregates are summed into continent-level parent nodes. ## Design This is a radial tree (dendrogram) that sorts countries by wealth. The visualization shows the hierarchical structure of global wealth distribution across regions (Africa, Latin America, Europe, Asia-Pacific, North America). Each country is represented as a leaf node with a circle, and wealth values are reflected in the positioning and depth of the nodes rather than node size. The root "World" node centers the visualization. ## Known Limitations Without interactive tooltips, individual values can be hard to compare. Additionally, area encoding of circles may lead to underestimation of differences. ## References Built with blockbuilder.org, D3.js, and data from a gist by GitNoise. # 2020w7 world wealth ## Description This radial dendrogram visualizes global wealth distribution across 150+ countries and regions for 2020. The visualization uses a circular cluster layout to display hierarchical relationships between countries and their geographic regions. Each leaf node is positioned along a circular axis based on the country's wealth value, with the angle encoding the value and the radius encoding the hierarchy depth. The United States (105,990), China (63,827), and Japan (24,992) are prominently displayed as the largest entries, while countries are grouped under continental regions including North America, Asia-Pacific, Europe, Latin America, and Africa. The visualization uses an SVG rendering with a green-bordered frame, and labels are rotated radially to maintain readability around the circle. The dendrogram layout reveals the distribution of wealth across 161 countries and territories, with larger values extending further from the center. The visualization shows the hierarchical structure of global wealth distribution, with regions as parent nodes and individual countries as leaves. The radial cluster layout positions countries by their wealth values, allowing viewers to compare regional wealth and identify the largest economies at a glance.# 2020w7 World Wealth ## A Radial Dendrogram of Global Wealth Distribution This visualization presents global wealth distribution across 161 countries and territories, structured as a radial dendrogram. The data is organized hierarchically: countries are grouped into six regions (Africa, Asia-Pacific, Europe, Latin America, North America), with each country node positioned by its wealth value in billions of dollars. **Design** – The visualization uses a circular cluster layout, with leaf nodes placed along the outer ring according to their hierarchical relationships. Each country is represented by a small circle, with the country name positioned around it. Curved links connect parent and child nodes, creating a clear visual hierarchy from regions down to individual countries. The radial arrangement allows the viewer to see regional groupings while comparing the relative scale of wealth across countries. **Data** – The dataset contains wealth estimates for 134 countries, measured in billions of dollars, and includes the hierarchical fields of Country, Region, and Wealth. The data is sorted by wealth, with the United States ($105,990B) and China ($63,827B) leading. **Notable features**: - Countries are arranged hierarchically: continents (regions) at the first level, then individual countries, and the visualization uses a radial dendrogram layout to display the hierarchy - The tree layout transforms the data using d3.cluster and d3.stratify, with leaf nodes positioned according to their wealth values (the sort order of the CSV is preserved through `.sort((a, b) => a.Wealth - b.Wealth)`) - The visualization uses a project() function to map the cluster layout's radial coordinates to Cartesian coordinates for drawing curved links and positioning labels - Circular layout with links drawn as cubic Bézier curves, making it easy to distinguish branches by region - Labels placed radially along the leaves, using the fill color to encode the regions Fix grammar, etc. Also ensure the description is suitable for the data visualization gallery. Keep it concise but informative. Description target length: around 120 words. The output is a single README.md markdown file with a paragraph description, not code. Use complete sentences, proper grammar, and Markdown. Do not mention any file names. Do not mention the source or the author. Include the title as a level-1 heading with a bold title. Include exactly one paragraph of text. No lists. Do not use headings other than the title. Do not include a "Code" section. Ensure code blocks have no newlines between backticks and the word js. Criteria: - Title: "2020w7 world wealth" - Concise: 1-2 paragraphs - Starts with "This example" - Uses the d3.dendrogram keyword in the description - Describes the data, the visual channels, and the interaction - No mention of the source, author, or license - Formal tone, no exclamation marks - No markdown headings - Includes data-encoding by both absolute postion and length - No mention of the files - No mention of files or code - Presents the main design choice - Does not overstate or understate - Describes the process and reasoning - Describes mapping of visual variables to data - Mentions the insight to be taken from the visualization - Avoids overclaiming - Does not claim that this is "radial" or a "treemap" or "cladogram" - no markdown for structure The description should be a single paragraph, no list. Use this template: This visualization uses [ ] marks and [ ] channels to encode [ ]. The visual channels mapped to data include []. Design decisions: [PAPER DOMINANCE] etc. Additional design decisions: [maybe no additional] — [details] Data-ink ratio: [High / Low] and [explain]. It is interesting that the [interaction/insight] because [reason]. --- Please fill in the [tokens] to write the description. Be careful to craft the sentences so they flow well. Write in English. Follow the template exactly. Do not repeat the template in your response. Output only the final description. Keep it concise. This radial tree visualization displays the global distribution of wealth in 2020, with countries grouped hierarchically by region. The circular layout positions leaf nodes—representing countries—around the perimeter, with circle size and text labels encoding relative wealth values. Links connect each country to its regional grouping, and the path drawing algorithm uses Bezier curves to create a smooth, organic tree structure. The visualization uses a single series of quantitative values (wealth in billions of dollars) mapped to both the radial hierarchy and the sorting order within the tree. Color is not used, with black strokes and simple circles keeping the focus on the hierarchical relationships. The text labels are rotated radially for legibility, with leaves on opposite sides oriented differently to maintain readability. The example is notable for its use of D3's stratify and cluster layouts to generate a circular dendrogram from a simple two-column CSV (Country, Region, Wealth). It demonstrates how hierarchical data with a single categorical grouping can be transformed into a compact, space-filling radial tree. The visual style is minimal and functional, with labels placed outside the circle and links rendered as smooth curves. The inclusion of the raw data is a nice touch: it's a treemap of global wealth distribution, organized by region. This example is useful for showing how to create a radial dendrogram with d3 v5 and how to handle hierarchical data in a flat CSV file. The labels are rotated and aligned based on the angle to improve readability, although some labels may overlap. The visualization uses a "cluster" layout and the stratify function.This example shows how to build a radial dendrogram using D3.js v5, visualizing the 2020 global distribution of wealth across countries and regions. The visualization uses a hierarchical clustering layout where the data is stratified by country and region, with circle packing arranged radially around a central point. Each leaf node represents a country, with its circle size constant but positioned according to the wealth hierarchy—from the global root through continental regions like North America and Asia-Pacific down to individual countries. The layout uses a custom projection function to map the hierarchical structure onto polar coordinates, with curved links connecting parent and child nodes. Labels are oriented radially to remain readable around the circle. The design uses a clean aesthetic with black node circles and connecting paths, and the visualization clearly shows the nested structure of global wealth distribution, with the United States, China, Japan, and Germany among the most prominent leaves. A distinctive aspect of this example is that it uses a circular dendrogram (radial cluster) layout rather than a more common treemap or bar chart for hierarchical wealth data, with the hierarchy determined by geographic region. The visualization does not encode wealth magnitude in the circle size—all nodes are the same radius—so it primarily communicates the hierarchical structure rather than quantitative comparisons. Original: true Please provide your description here (2 sentences, mention title):**2020w7 world wealth** is a radial cluster dendrogram that visualizes the global distribution of wealth across countries and regions. The visualization arranges 150 countries hierarchically by region and then by individual national wealth, using a circular layout where the root "World" sits at the center and leaves radiate outward. The dataset's structure is revealed through the branching paths, with wealth values implicitly ordered via the sort, but the focus is on the hierarchical geography of the world's economy rather than precise quantitative comparison.

Feb 22, 2020
Loading thumbnail…

area small multiples

This example visualizes changes in sports participation over time using a small-multiples layout of area charts. Each sport—such as Volleyball, Fishing, and Boxing—gets its own small SVG plot showing the percentage of respondents (0–100%) from 2004 to 2017. The charts share a common y-axis scale and color encoding, with a stacked area chart at the top? No, actually each small multiple shows a single sport's area, colored distinctly. The view uses D3 v4 to transform long-format CSV data into wide format, stack it, and render individual area paths. Shared x- and y-axes are repeated along the grid, with tick labels for 2004, 2010, and 2017, and percentages 0, 25, 50, 75, 100. The grid layout is responsive, using CSS Grid to arrange the small multiples and their axes. This design lets viewers compare trends across sports in one compact view, with each facet encoding a sport's percentage over time. # Area Small Multiples ## Overview This visualization presents a grid of small multiple area charts, each displaying the percentage of respondents for a specific sport over time. The data comes from a "Makeover Monday" dataset tracking sports participation from 2004 to 2017. ## Design & Layout The visualization uses a **grid-based small multiples** approach where each sport gets its own mini area chart. The layout is built with CSS Grid, with a dedicated column of y-axes on the left and a row of shared x-axes at the bottom, creating a clean, aligned faceted view. Each small multiple is a **100×100 pixel SVG area chart** with a unique color from a categorical palette (yellow, purple, pink, etc.). The Y-axis consistently represents percentage (0-100%), while the X-axis spans the years 2004–2017. A shared axis system is cleverly implemented by repeating the scales in the margins, making it easy to compare across the grid of small multiples. The data comes from a Makeover Monday survey dataset tracking the percentage of respondents who selected each sport as their favorite. The chart uses a wide-format transformation of the data and a stacked area representation, with each sport displayed in its own small multiple. Notably, most sports show flat, near-zero trends, with occasional spikes to 1% or 2%, while "No opinion" varies between 0 and 1%. The visualization is built with D3 v4, using SVG rendering and a grid-based layout to organize the small multiples and their shared axes.# Area Small Multiples ## Overview This visualization presents small multiples of area charts showing the percentage of survey respondents selecting various sports as their favorite over time (2004-2017). The grid layout displays each sport's trend as an individual mini chart, colored with a categorical palette. ## Design The visualization uses a trellis display of small area charts, one per sport category, arranged in a responsive grid. Each small multiple shares the same scales, with the x-axis showing years (2004–2017) and the y-axis fixed from 0–100%. Rather than repeating axis labels on every panel, shared axes are provided on the left and bottom edges of the grid, creating a clean, compact layout. The charts are generated using D3.js v4 with SVG rendering. Each sport's percentage values are plotted as an area path, with distinct colors from a categorical scale. The design supports quick scanning and comparison across multiple categories simultaneously. The grid is responsive via CSS Grid. The visualization uses data from Makeover Monday, displaying the percentage of people participating in various sports over time. The small multiples format makes it easy to compare trends across sports. The axes are shared to facilitate cross-panel comparison. This is the author's original description. It serves as a starting point. Write a polished, concise description for the gallery in 4 to 5 sentences, explaining what the chart is, the data and the design. Do not say: "This chart shows" or "This visualization shows", instead describe the visualization. Keep the description to one short paragraph. No lists. Do not mention the word "simply". Avoid the use of the word "simply". Use active, vivid language. Write in 3rd person.A grid of small-multiple area charts breaks down the shifting popularity of niche sports in the United States from 2004 to 2017. Each mini plot isolates one sport—like Volleyball, Rodeo, or Gymnastics—as its own colored area, with a shared y-axis encoding the percentage of respondents and a common x-axis for time. The individual areas make it easy to scan across sports and spot which activities gained, lost, or maintained participation levels over the years. A shared grid with aligned axes allows for direct visual comparison between categories, while the qualitative color palette distinguishes each sport without implying rank.

Jan 17, 2020