🎉 Map experiments month 🎉
By using this site you agree to our Terms and Conditions. Please Accept these before using the site.
![#30DayMapChallenge 2023 Day 13: Choropleth
'Average Land Surface Temperature [Day] (one year - MODIS - 2001)'
Live: https://maptheclouds.com/playground/30-day-map-challenge-2023/land-temp/
Data: NASA Earth Observations
#ThreeJS #WebGL animation #raster #MODIS](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/50378fc5-902b-4e6c-8707-745e1f44698b.png "Average Land Surface Temperature [Day] (one year - MODIS - 2001)")
](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/ebfa9415-edf1-4919-9054-1233d79a29f1.png "Pale Blue Dot - Remix!")
![200m resolution.
Liu, H., K. C. Jezek, B. Li, and Z. Zhao. 2015. Radarsat Antarctic Mapping Project Digital Elevation Model, Version 2. [Indicate subset used]. Boulder, Colorado USA. NASA National Snow and Ice Data Center Distributed Active Archive Center. doi: http://dx.doi.org/10.5067/8JKNEW6BFRVD. [29-11-2022].
[Radarsat Antarctic Mapping Project Digital Elevation Model Version 2](https://www.npolar.no/quantarctica/#toggle-id-20)
Fluffy Antarctica from 200m elevation data.
Live: https://maptheclouds.com/playground/3...
Data: https://www.npolar.no/quantarctica/#t... (Radarsat Antarctic Mapping Project Digital Elevation Model Version 2)
Music by AleXZavesa from Pixabay.
#ThreeJS #QGIS #maps #clouds #fly #elevation #antarctica #maptheclouds](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/e2553b7b-8960-4f23-b57f-60a09d2b0a57.png "Antarctic Cloud ☁️")
[2015 Aerial Laser and Photogrammetry Survey of Dublin City Collection Record](https://geo.nyu.edu/catalog/nyu_2451_38684)](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/a1fa843a-687a-4585-baf5-ed8f4205b944.png "Dublin, Ireland in #3D 🌆")
[Ian Webster](https://www.ianww.com/)](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/381d7ae5-4f30-4562-a1ec-f79e03206b82.png "Pangaea 🌍🌍")
](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/05e9cd56-ec8b-4061-9df2-2c4a74f41065.png "Cluj County Folded Map 🐉 🖤")
[route2](https://www.alltrails.com/explore/trail/romania/covasna/traseu-mtb-ride)
[route3](https://www.alltrails.com/explore/trail/romania/prahova/piatra-arsa-to-sinaia-cycle-route)](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/363ad8c2-cb80-40c7-810a-9c5d3d1033e1.png "Fixed it! Corgi Routes 🐶")
[The Graphic Continuum](https://datavizcatalogue.com/store/product/the-graphic-continuum-poster/)
[Visual Vocabulary](https://ft-interactive.github.io/visual-vocabulary/)](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/51bc774c-f91c-4abf-a0e7-ac93126e2de6.png "Charts hairball 📈")
![{
name: "arc-connection",
title: "Arc-Connection",
alt_title: ["Arc Diagram"],
type: "child",
categories: ["relationship"],
icon: "arc-connection.png",
description:
" An Arc-Connection chart shows connections between observations. \n\n Arc Diagrams are an alternate way of representing two-dimensional Network Diagrams. In Arc Diagrams, nodes are placed along a single line (a one-dimensional axis) and arcs are used to show connections between those nodes. ",
examples: [
"https://datavizcatalogue.com/methods/arc_diagram.html",
"https://observablehq.com/@d3/arc-diagram",
],
},
{
name: "arc-time",
title: "Arc-Time",
type: "child",
categories: ["time"],
icon: "arc-time.png",
description: " An Arc-Time Chart presents connections across time. ",
examples: [
"https://datavizcatalogue.com/methods/arc_diagram.html",
"https://observablehq.com/@alexaac/relations-timeline-test-2",
"https://observablehq.com/@zheng100/marvel-cinematic-universe-mcu-timeline-and-the-infinity-st",
],
},
{
name: "chord",
title: "Chord",
alt_title: ["Chord Diagram"],
type: "child",
categories: ["relationship", "flow"],
icon: "chord.png",
description:
" A complex but powerful diagram which can illustrate 2-way flows (and net winner) in a matrix. \n\n This type of diagram visualises the inter-relationships between entities. The connections between entities are used to display that they share something in common. This makes Chord Diagrams ideal for comparing the similarities within a dataset or between different groups of data. \n\n Nodes are arranged along a circle, with the relationships between points connected to each other either through the use of arcs or Bézier curves. Values are assigned to each connection, which is represented proportionally by the size of each arc. Colour can be used to group the data into different categories, which aids in making comparisons and distinguishing groups. Over-cluttering becomes an issue with Chord Diagrams when there are too many connections displayed. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/chord_diagram.html",
"https://observablehq.com/@d3/chord-diagram",
"https://observablehq.com/@d3/chord-dependency-diagram",
"https://observablehq.com/@giorgi-ghviniashvili/convert-force-data-to-chord-matrix",
"http://www.findtheconversation.com/concept-map/#",
],
},
{
name: "force-directed",
title: "Force-Directed",
alt_title: [
"Network",
"Network Diagram",
"Network Graph",
"Network Map",
"Node-Link Diagram",
],
type: "child",
categories: ["relationship", "flow"],
icon: "force-directed.png",
description:
" Also known as Network Graph, Network Map, Node-Link Diagram. \n This type of visualisation shows how things are interconnected through the use of nodes / vertices and link lines to represent their connections and help illuminate the type of relationships between a group of entities. \n Typically, nodes are drawn as little dots or circles, but icons can also be used. Links are usually displayed as simple lines connected between the nodes. However, in some Network Diagrams, not all of the nodes and links are created equally: additional variables can be visualised, for example, by making the node size or link stroke weight proportion to an assigned value. \n The two notable types of Network Diagram are 'undirected' and 'directed'. Undirected Network Diagrams only display the connections between entities, while directed Network Diagrams show if the connections are one-way or two-way through small arrows. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/network_diagram.html",
"https://observablehq.com/@d3/force-directed-graph",
"https://observablehq.com/@d3/disjoint-force-directed-graph",
"https://observablehq.com/@sethuram975351/force-directed-tree-with-zoom-and-tooltip-addons",
"https://observablehq.com/@d3/force-directed-tree",
"https://observablehq.com/@xianwu/force-directed-graph-network-graph-with-arrowheads-and-lab",
"https://observablehq.com/@kaiser-dan/music-composition-graph-link-view/3",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/4e75fe70-2c9f-4b53-a80f-bccdbc4242ca.png)
![{
name: "circle-packing",
title: "Circle Packing",
alt_title: ["Circular Treemap"],
type: "child",
categories: ["relationship"],
icon: "circle-packing.png",
description:
" As known as a Circular Treemap. Circle Packing is a variation of a Treemap that uses circles instead of rectangles. Containment within each circle represents a level in the hierarchy: each branch of the tree is represented as a circle and its sub-branches are represented as circles inside of it. The area of each circle can also be used to represent an additional arbitrary value, such as quantity or file size. Colour may also be used to assign categories or to represent another variable via different shades. ",
examples: [
"https://datavizcatalogue.com/methods/circle_packing.html",
"https://observablehq.com/@d3/zoomable-circle-packing",
"https://observablehq.com/@clhenrick/zoomable-circle-packing-canvas",
"https://generativeartistry.com/tutorials/circle-packing/",
"https://imaginary.org/gallery/circle-packing-explorations",
],
},
{
name: "dendrogram",
title: "Dendrogram",
type: "child",
categories: ["relationship"],
icon: "dendogram.png",
description:
" A dendrogram is a diagram representing a tree. This diagrammatic representation is frequently used in different contexts: \n - in hierarchical clustering, it illustrates the arrangement of the clusters produced by the corresponding analyses. \n - in computational biology, it shows the clustering of genes or samples, sometimes in the margins of heatmaps.\n - in phylogenetics, it displays the evolutionary relationships among various biological taxa. In this case, the dendrogram is also called a phylogenetic tree. ",
examples: [
"https://en.wikipedia.org/wiki/Dendrogram",
"https://observablehq.com/@d3/cluster-dendrogram",
"https://observablehq.com/@d3/radial-dendrogram",
"https://observablehq.com/@vansphan/radial-dendrogram",
"https://observablehq.com/@d3/hierarchical-edge-bundling",
],
},
{
name: "double-tree",
title: "Double Tree",
type: "child",
categories: ["relationship"],
icon: "double-tree.png",
description: " ",
examples: ["https://github.com/jdk137/doubletree"],
},
{
name: "tree",
title: "Tree",
alt_title: ["Tree Diagram", "Organisational chart", "Linkage Tree"],
type: "child",
categories: ["relationship"],
icon: "tree.png",
description:
" Also known as a Organisational chart, Linkage Tree. \n A Tree Diagram is a way of visually representing hierarchy in a tree-like structure. Typically the structure of a Tree Diagram consists of elements such as a root node, a member that has no superior/parent. Then there are the nodes, which are linked together with line connections called branches that represent the relationships and connections between the members. Finally, the leaf nodes (or end-nodes) are members who have no children or child nodes. \n Tree Diagrams are often used: \n - To show family relations and descent. \n - In taxonomy, the practice and science of classification. \n - In evolutionary science, to show the origin of species. \n - In computer science and mathematics. \n - In businesses and organisations for managerial purposes. ",
examples: [
"https://datavizcatalogue.com/methods/tree_diagram.html",
"https://observablehq.com/@nuriaaltimir/hierarchical-clustering",
"https://observablehq.com/@mbostock/stern-brocot-tree",
"https://observablehq.com/@harrystevens/conditional-probability-as-a-tidy-tree",
"https://observablehq.com/@d3/collapsible-tree",
],
},
{
name: "triangle-treemap",
title: "Triangle Treemap",
type: "child",
categories: ["part-to-whole"],
icon: "triangle-treemap.png",
description: " ",
},
{
name: "word-tree",
title: "Word Tree",
type: "child",
categories: ["relationship"],
icon: "word-tree.png",
description: " ",
examples: [
"https://observablehq.com/@sgtaylor16/trl-plan-with-dendograph-and-parallel-plot",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/7b2eea49-24c1-496e-a68d-6aa71e546ba3.png)
![{
name: "chernoff",
title: "Chernoff",
type: "child",
categories: ["comparisons"],
icon: "chernoff.png",
description:
" Chernoff faces, invented by Herman Chernoff in 1973, display multivariate data in the shape of a human face. The individual parts, such as eyes, ears, mouth and nose represent values of the variables by their shape, size, placement and orientation. The idea behind using faces is that humans easily recognize faces and notice small changes without difficulty. ",
examples: [
"https://en.wikipedia.org/wiki/Chernoff_face",
"http://bl.ocks.org/larskotthoff/2011590",
"https://observablehq.com/@joshrayman/uk-ge-poll-tracker-chernoff-faces",
],
},
{
name: "heatmap",
title: "Heatmap",
alt_title: ["Heatmap (Matrix)"],
type: "child",
categories: ["comparisons", "spatial"],
related: ["map"],
icon: "heatmap.png",
description:
" Grid-based data values mapped with an intensity colour scale. As choropleth map - but not snapped to an admin/political unit. \n\n Heatmaps visualise data through variations in colouring. When applied to a tabular format, Heatmaps are useful for cross-examining multivariate data, through placing variables in the rows and columns and colouring the cells within the table. Heatmaps are good for showing variance across multiple variables, revealing any patterns, displaying whether any variables are similar to each other, and for detecting if any correlations exist in-between them. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/heatmap.html",
"https://observablehq.com/@sjengle/zillow-affordability-heatmap",
"https://observablehq.com/@tomshanley/spiral-heatmap-northern-hemisphere-sea-ice-extent-1978-to-2",
"https://observablehq.com/@lorenries/political-science-rankings-heatmap",
],
},
{
name: "parallel-coordinates",
title: "Parallel Coordinates",
alt_names: ["Parallel Coordinates Plot"],
type: "child",
categories: ["relationship", "magnitude"],
icon: "parallel-coordinates.png",
description:
" An alternative to radar charts - again, the arrangement of the variables is important. Usually benefits from highlighting values. \n\n This type of visualisation is used for plotting multivariate, numerical data. Parallel Coordinates Plots are ideal for comparing many variables together and seeing the relationships between them. For example, if you had to compare an array of products with the same attributes (comparing computer or cars specs across different models). \n In a Parallel Coordinates Plot, each variable is given its own axis and all the axes are placed in parallel to each other. Each axis can have a different scale, as each variable works off a different unit of measurement, or all the axes can be normalised to keep all the scales uniform. Values are plotted as a series of lines that connected across all the axes. This means that each line is a collection of points placed on each axis, that have all been connected together. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/parallel_coordinates.html",
"https://observablehq.com/@d3/parallel-coordinates",
"https://observablehq.com/@arielmant0/bezier-parallel-coordinate-plots",
"https://observablehq.com/@didoesdigital/18-july-2020-about-sankey-alluvial-parallel-sets-and-parall",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/89d0ae49-e1a3-459b-9879-551243803b3b.png)
![{
name: "connection-map",
title: "Connection Map",
alt_title: ["Link Map", "Ray Map"],
type: "child",
categories: ["geospatial"],
icon: "connection-map.png",
description:
" Also known as a Link Map or Ray Map. \n\n Connection Maps are drawn by connecting points placed on a map by straight or curved lines. \n While Connection Maps are great for showing connections and relationships geographically, they can also be used to display map routes through a single chain of links. Connection Maps can also be useful in revealing spatial patterns through the distribution of connections or by how concentrated connections are on a map. ",
examples: [
"https://datavizcatalogue.com/methods/connection_map.html",
"https://observablehq.com/@namwkim/node-link-diagram-on-geographic-map",
"https://www.d3-graph-gallery.com/connectionmap.html",
"https://www.tnoda.com/blog/2014-04-02/index.html",
"http://dataalbum.github.io/flights/",
],
},
{
name: "hive",
title: "Hive",
type: "child",
categories: ["relationship"],
icon: "hive.png",
description: " ",
examples: [
"https://observablehq.com/@bstaats/hive-plot",
"https://public.tableau.com/profile/vizde7382#!/vizhome/HivePlot2_0/ZenHivePlot",
"https://bl.ocks.org/mbostock/2066421",
],
},
{
name: "radar",
title: "Radar",
alt_title: [
"Radial",
"Spider Chart",
"Web Chart",
"Polar Chart",
"Star Plots",
],
type: "child",
categories: ["relationship", "magnitude"],
icon: "radar.png",
description:
" A space-efficient way of showing value per multiple variables - but make sure they are organised in a way that makes sense to reader. \n\n As known as: Spider Chart, Web Chart, Polar Chart, Star Plots. \n Radar Charts are a way of comparing multiple quantitative variables. This makes them useful for seeing which variables have similar values or if there are any outliers amongst each variable. Radar Charts are also useful for seeing which variables are scoring high or low within a dataset, making them ideal for displaying performance. \n Each variable is provided with an axis that starts from the centre. All axes are arranged radially, with equal distances between each other, while maintaining the same scale between all axes. Grid lines that connect from axis-to-axis are often used as a guide. Each variable value is plotted along its individual axis and all the variables in a dataset and connected together to form a polygon. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://observablehq.com/@stephanietuerk/radar-chart-small-multiples",
"https://datavizcatalogue.com/methods/radar_chart.html",
"https://observablehq.com/@josejuan81/radar",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/81daf05b-0a18-4fea-88a3-7a9de7794445.png)
![correlation: {
title: "Correlation",
type: "parent",
categories: ["visual"],
fixed: true,
fx: -900,
fy: -200,
name: "correlation",
description:
" Show the relationship between two or more variables. Be mindful that, unless you tell them otherwise, many readers will assume the relationships you show them to be causal (i.e. one causes the other). Examples of use: Inflation & unemployment, income & life expectancy. ",
},
{
name: "bubble",
title: "Bubble",
type: "child",
categories: ["correlation"],
related: ["scatterplot", "proportional-area-chart"],
icon: "bubble.png",
description:
" Like a scatterplot, but adds additional detail by sizing the circles according to a third variable. \n\n A Bubble Chart is a multi-variable graph that is a cross between a Scatterplot and a Proportional Area Chart. Like a Scatterplot, Bubble Charts use a Cartesian coordinate system to plot points along a grid where the X and Y axis are separate variables. However. unlike a Scatterplot, each point is assigned a label or category (either displayed alongside or on a legend). Each plotted point then represents a third variable by the area of its circle. Colours can also be used to distinguish between categories or used to represent an additional data variable. Time can be shown either by having it as a variable on one of the axis or by animating the data variables changing over time. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/bubble_chart.html",
"https://observablehq.com/@stefanreifenberg/bubbles",
],
},
{
name: "heatmap",
title: "Heatmap",
alt_title: ["Heatmap (Matrix)"],
type: "child",
categories: ["comparisons", "spatial"],
related: ["map"],
icon: "heatmap.png",
description:
" Grid-based data values mapped with an intensity colour scale. As choropleth map - but not snapped to an admin/political unit. \n\n Heatmaps visualise data through variations in colouring. When applied to a tabular format, Heatmaps are useful for cross-examining multivariate data, through placing variables in the rows and columns and colouring the cells within the table. Heatmaps are good for showing variance across multiple variables, revealing any patterns, displaying whether any variables are similar to each other, and for detecting if any correlations exist in-between them. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/heatmap.html",
"https://observablehq.com/@sjengle/zillow-affordability-heatmap",
"https://observablehq.com/@tomshanley/spiral-heatmap-northern-hemisphere-sea-ice-extent-1978-to-2",
"https://observablehq.com/@lorenries/political-science-rankings-heatmap",
],
},
{
name: "correlation-matrix",
title: "Correlation Matrix",
alt_title: ["Correlogram"],
type: "child",
categories: ["relationship"],
icon: "correlation-matrix.png",
description:
" A correlogram or correlation matrix allows to analyse the relationship between each pair of numeric variables of a dataset. This kind of chart is more used for exploratory purpose than explanatory. ",
examples: [
"https://www.d3-graph-gallery.com/correlogram.html",
"https://bl.ocks.org/HarryStevens/302d078a089caf5aeb13e480b86fdaeb",
"https://bl.ocks.org/ensley/b289692852c62912208b4ea5b3c8ae68",
],
},
{
name: "scatterplot",
title: "Scatterplot",
alt_title: [
"Scatter Graph",
"Point Graph",
"X-Y Plot",
"Scatter Chart or Scattergram",
],
type: "child",
categories: ["relationship", "correlation"],
icon: "scatterplot.png",
description:
" The standard way to show the relationship between two variables, each of which has its own axis. \n\n Also known as a Scatter Graph, Point Graph, X-Y Plot, Scatter Chart or Scattergram. \n\n Scatterplots use a collection of points placed using Cartesian Coordinates to display values from two variables. By displaying a variable in each axis, you can detect if a relationship or correlation between the two variables exists. \n Various types of correlation can be interpreted through the patterns displayed on Scatterplots. These are: positive (values increase together), negative (one value decreases as the other increases), null (no correlation), linear, exponential and U-shaped. The strength of the correlation can be determined by how closely packed the points are to each other on the graph. Points that end up far outside the general cluster of points are known as outliers. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/scatterplot.html",
"https://observablehq.com/@d3/brushable-scatterplot-matrix",
"https://observablehq.com/@d3/scatterplot-with-shapes",
"https://observablehq.com/@pstuffa/scatterplot-with-x-axis-brushing",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/fbdeef79-eafc-4a83-b68e-07d547f374c7.png)
![{
name: "radial-bar-chart",
title: "Radial Bar Chart",
alt_title: ["Circular Bar Chart"],
type: "child",
categories: ["comparisons"],
icon: "radial-bar-chart.png",
description:
" A Radial/Circular Bar Chart is simply a Bar Chart plotted on a polar coordinate system, rather than on a Cartesian one. \nWhile they look cool, the problem with Radial Bar Charts is that the bar lengths can be misinterpreted. Each bar on the outside gets relatively longer to the last, even if they represent the same value. This is because each bar has to be at a different radii, so each bar is judged by its angle. Our visual systems are better at interpreting straight lines, so the Cartesian bar chart is a better choice for comparing values. Therefore, Radial Bar Charts are used primarily for aesthetic reasons. ",
examples: [
"https://datavizcatalogue.com/methods/radial_bar_chart.html",
"https://observablehq.com/@analyzer2004/fancy-radial-bars",
],
},
{
name: "radial-column-chart",
title: "Radial Column Chart",
alt_title: ["Circular Column Graph", "Star Graph"],
type: "child",
categories: ["comparisons"],
icon: "radial-column-chart.png",
description:
" Also known as a Circular Column Graph or Star Graph. \n This type of graph uses a grid of concentric circles to plot bars on. Each circle on the graph represents a value on a scale, while the radial dividers (lines spanning from the centre) are used for each category or interval (if a histogram). \n Typically, the lower values on the scale start from the centre and increase with each circle. However, negative values can also be displayed on a Radial Column Chart, by having zero starting from any of the outer circles (from the central one) and all circles within it used for negative values. \n The bars normally start from the centre and extend outwards, however ranges can be shown with variable starting points, like in a Span Chart. Bars can also be stacked in the same way a Stacked Bar Graph is. ",
examples: [
"https://datavizcatalogue.com/methods/radial_column_chart.html",
"https://observablehq.com/@d3/radial-stacked-bar-chart",
"https://observablehq.com/@d3/radial-stacked-bar-chart-ii",
"https://observablehq.com/@thetylerwolf/day-17-radial-bar-chart",
"https://observablehq.com/@stefanreifenberg/circular-bar-plot",
"https://observablehq.com/@analyzer2004/ringchart",
"https://observablehq.com/@monicagg/uk-raindays-radial-stacked-bar-chart",
],
},
{
name: "circle-packing",
title: "Circle Packing",
alt_title: ["Circular Treemap"],
type: "child",
categories: ["relationship"],
icon: "circle-packing.png",
description:
" As known as a Circular Treemap. Circle Packing is a variation of a Treemap that uses circles instead of rectangles. Containment within each circle represents a level in the hierarchy: each branch of the tree is represented as a circle and its sub-branches are represented as circles inside of it. The area of each circle can also be used to represent an additional arbitrary value, such as quantity or file size. Colour may also be used to assign categories or to represent another variable via different shades. ",
examples: [
"https://datavizcatalogue.com/methods/circle_packing.html",
"https://observablehq.com/@d3/zoomable-circle-packing",
"https://observablehq.com/@clhenrick/zoomable-circle-packing-canvas",
"https://generativeartistry.com/tutorials/circle-packing/",
"https://imaginary.org/gallery/circle-packing-explorations",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/709d73f8-f6a9-4e15-a868-fcbff42eeabe.png)
![distribution: {
title: "Distribution",
type: "parent",
categories: ["continuum"],
fixed: true,
fx: 0,
fy: -200,
name: "distribution",
description: " ",
},
"distribution-vis": {
title: "Distribution",
type: "parent",
categories: ["visual"],
fixed: true,
fx: -700,
fy: -200,
name: "distribution-vis",
description:
" Show values in a dataset and how often they occur. The shape (or ‘skew’) of a distribution can be a memorable way of highlighting the lack of uniformity or equality in the data. Examples of use: Income distribution, population (age/sex) distribution. ",
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/d8795295-0a02-46c9-ab62-3bad49014098.png)
![name: "slope",
title: "Slope",
alt_title: ["Slopegraph"],
type: "child",
categories: ["comparisons", "change-time", "ranking"],
icon: "slope.png",
description:
" Good for showing changing data as long as the data can be simplified into 2 or 3 points without missing a key part of story. Perfect for showing how ranks have changed over time or vary between categories. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://observablehq.com/@d3/slope-chart",
"https://observablehq.com/@d3/slope-chart/2",
"https://observablehq.com/@didoesdigital/27-july-2020-d3-slope-chart-with-color",
],](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/bcf920e3-5a6b-4ed5-a99b-f4a6639321b7.png)
![{name: "history-flow",
title: "History Flow",
type: "child",
categories: ["time"],
related: ["stacked-area"],
icon: "history-flow.png",
description: " ",
examples: [
"https://observablehq.com/@fil/ncov2019-data",
"https://observablehq.com/@stephanietuerk/art-history-jobs-2011-2020",
],}
{name: "stacked-area",
title: "Stacked Area",
alt_title: ["Area Chart", "Stacked Area Graph"],
type: "child",
categories: ["time", "change-time"],
icon: "stacked-area.png",
description:
" Are good at showing changes per total, but seeing change in components can be difficult. \n\n Stacked Area Graphs work in the same way as simple Area Graphs do, except for the use of multiple data series that start each point from the point left by the previous data series. \n The entire graph represents the total of all the data plotted. Stacked Area Graphs also use the areas to convey whole numbers, so they do not work for negative values. Overall, they are useful for comparing multiple variables changing over an interval. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://observablehq.com/@d3/stacked-area-chart",
"https://observablehq.com/@d3/normalized-stacked-area-chart",
"https://observablehq.com/@mbostock/u-s-population-by-state-1790-1990",
],}
{name: "timeline",
title: "Timeline",
type: "child",
categories: ["time"],
icon: "timeline.png",
description:
" A Timeline is a graphical way of displaying a list of events in chronological order. Some Timelines work on a scale, while others simply display events in sequence. \n The main function of Timelines is to communicate time-related information, either for analysis or to visually present a story or view of history. \n If scale-based, a Timeline allows you to see when things occur or are to occur, by allowing the viewer to assess the time intervals between events. This allows the viewer to see any patterns appearing over any selected time periods or how events are distributed that time period. ",
examples: [
"https://datavizcatalogue.com/methods/timeline.html",
"https://observablehq.com/@walterra/vikings-timeline",
"https://observablehq.com/@maritrinez/d3-brushable-timeline-beeswarm",
],}
{name: "calendar",
title: "Calendar",
type: "child",
categories: ["time", "change-time"],
icon: "calendar.png",
description:
" Throughout human history, various calendar systems have been developed as an organisational tool to help us plan ahead. Calendars as a visual tool are used to display periods of time and to display the organisation of events. Periods of time are often displayed and divided into units such as days, weeks, months and years. A date is the designation of a single, specific day within such a system. ",
examples: [
"https://datavizcatalogue.com/methods/calendar.html",
"https://observablehq.com/@tonhauck/calendar-view",
"https://observablehq.com/@uw-info474/global-mobility-calendar-huynh",
"https://observablehq.com/@sugi2000/calendar-of-covid-19-confirmed-cases-in-osaka",
],}](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/2ca2f155-5eed-40ce-8a8b-30cac1360435.png)
![{
name: "isotype",
title: "Isotype",
alt_title: ["Pictogram"],
type: "child",
categories: ["comparisons", "magnitude"],
icon: "isotype.png",
description:
" Excellent solution in some instances - use only with whole numbers (do not slice off an arm to represent a decimal). ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://observablehq.com/@datadesk/isotype-grid",
"https://observablehq.com/@basilesimon/isotype-sketch-a-wee-people-bar-chart",
"https://observablehq.com/@lydiacbyrne/coedl-ss18-day-3-pt2",
"https://observablehq.com/@stvkas/shoe-brands-on-the-grouse-grind",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/03995313-3e36-470e-a098-f7e409e40ff3.png "Excellent solution in some instances - use only with whole numbers (do not slice off an arm to represent a decimal).")
![{
name: "sunburst",
title: "Sunburst",
alt_title: [
"Sunburst Diagram",
"Sunburst Chart",
"Ring Chart",
"Multi-level Pie Chart",
"Belt Chart",
"Radial Treemap",
],
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "sunburst.png",
description:
" Another way of visualisaing hierarchical part-to-whole relationships. Use sparingly (if at all) for obvious reasons.. \n\n As known as a Sunburst Chart, Ring Chart, Multi-level Pie Chart, Belt Chart, Radial Treemap. \n This type of visualisation shows hierarchy through a series of rings, that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it. \n Rings are sliced up and divided based on their hierarchical relationship to the parent slice. The angle of each slice is either divided equally under its parent node or can be made proportional to a value. \n Colour can be used to highlight hierarchal groupings or specific categories. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/sunburst_diagram.html",
"https://observablehq.com/@d3/zoomable-sunburst",
"https://observablehq.com/@d3/sunburst",
"https://observablehq.com/@mksrivastava/d3-starburst-from-sunburst",
"https://observablehq.com/@daibai/zoomable-sunburst",
"https://observablehq.com/@anonymousauthor/sequences-sunburst",
],
},
{
name: "treemap",
title: "Treemap",
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "treemap.png",
description:
" Use for hierarchical part-to-whole relationships; can be difficult to read when there are many small segments. \n\n Treemaps are an alternative way of visualising the hierarchical structure of a Tree Diagram while also displaying quantities for each category via area size. Each category is assigned a rectangle area with their subcategory rectangles nested inside of it. \n When a quantity is assigned to a category, its area size is displayed in proportion to that quantity and to the other quantities within the same parent category in a part-to-whole relationship. Also, the area size of the parent category is the total of its subcategories. If no quantity is assigned to a subcategory, then it's area is divided equally amongst the other subcategories within its parent category. \n The way rectangles are divided and ordered into sub-rectangles is dependent on the tiling algorithm used. Many tiling algorithms have been developed, but the 'squarified algorithm' which keeps each rectangle as square as possible is the one commonly used. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/treemap.html",
"https://datavizcatalogue.com/methods/tree_diagram.html",
"https://observablehq.com/@d3/treemap",
"https://observablehq.com/@will-r-chase/voronoi-treemap",
"https://observablehq.com/@d3/nested-treemap",
"https://observablehq.com/@alancmclean/fugly-treemap",
"https://observablehq.com/@julesblm/geological-timescale",
],
},
{
name: "voronoi",
title: "Voronoi",
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "voronoi.png",
description:
" A way of turning points into areas - any point within the area is closer to the central point than any other point. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://observablehq.com/@will-r-chase/voronoi-treemap",
"https://observablehq.com/@mbostock/u-s-airports-voronoi",
"https://observablehq.com/@fil/spatial-interpolation-voronoi-blur/2",
"https://observablehq.com/@neocartocnrs/delaunay-voronoi",
"https://observablehq.com/@dudaspm/voronoi-overlay-force-directed-graph",
"https://observablehq.com/@thanhtrant219/spherical-voronoi-coloring",
"https://observablehq.com/@pierreleripoll/small-lyon-voronoi-full-colored",
"https://observablehq.com/@mbostock/spherical-voronoi-coloring",
"https://observablehq.com/@linakortobi/voronoi-treemap-data-generator",
"https://observablehq.com/@qdinhbui2/chicago-gcfd-receipts-normal",
"https://public.tableau.com/profile/dhananjay.muddappa#!/vizhome/VoronoiTreemap/VoronoiTreemap",
],
},
{
name: "waterfall",
title: "Waterfall",
type: "child",
categories: ["comparisons", "flow", "part-to-whole-vis"],
icon: "waterfall.png",
description:
" Designed to show the sequencing of data through a flow process, typically budgets. Can include +/- components. \n\n Can be useful for showing part-to-whole relationships where some of the components are negative. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://public.tableau.com/profile/btprovider#!/vizhome/WaterfallChart-TableauSkillPill/WaterfallChart-Tableau",
"https://observablehq.com/@rudzinski/waterfall-chart",
"https://observablehq.com/@analyticsearth/bridge-waterfall",
"https://public.tableau.com/profile/akhilesh8519#!/vizhome/Waterfall_46/WaterFall",
],
},
"part-to-whole": {
title: "Part-to-whole",
type: "parent",
categories: ["continuum"],
fixed: true,
fx: 200,
fy: -200,
name: "part-to-whole",
},
"part-to-whole-vis": {
title: "Part-to-whole/Vis",
type: "parent",
categories: ["visual"],
fixed: true,
fx: -400,
fy: -200,
name: "part-to-whole-vis",
description:
" Show how a single entity can be broken down into its component elements. If the reader’s interest is solely in the size of the components, consider a magnitude-type chart instead. Examples of use: Fiscal budgets, company structures, national election results. ",
},
{
name: "arc",
title: "Arc",
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "arc.png",
description:
" A hemicycle, often used for visualising political results. ",
examples: [
"https://flourish.studio/2018/07/06/how-to-make-parliament-chart/",
"https://observablehq.com/@piecesofuk/european-parliament-party-totals",
],
},
{
name: "donut",
title: "Donut",
alt_title: ["Donut Chart"],
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "donut.png",
description:
" Similar to a pie chart - but the centre can be a good way of making space to include more information about the data (eg. total). \n\n A donut chart is essentially a Pie Chart with an area of the centre cut out. \n Pie Charts are sometimes criticised for focusing readers on the proportional areas of the slices to one another and to the chart as a whole. This makes it tricky to see the differences between slices, especially when you try to compare multiple Pie Charts together. \nA Donut Chart somewhat remedies this problem by de-emphasizing the use of the area. Instead, readers focus more on reading the length of the arcs, rather than comparing the proportions between slices. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/donut_chart.html",
"https://observablehq.com/@d3/donut-chart",
"https://observablehq.com/@martien/donut",
],
},
{
name: "gridplot",
title: "Gridplot",
type: "child",
categories: ["part-to-whole-vis"],
icon: "gridplot.png",
description:
" Good for showing % information, they work best when used on whole numbers and work well in multiple layout form. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://public.tableau.com/profile/aur.lien2352#!/vizhome/GridPlotelections/Gridplot1916-2012",
"https://dzone.com/articles/plotting-reddit-post-frequencies-with-d3",
],
},
{
name: "marimekko",
title: "Marimekko",
alt_title: ["Bar Stacked Proportional", "Marimekko Chart", "Mosaic Plot"],
type: "child",
categories: ["comparisons", "magnitude", "part-to-whole-vis"],
icon: "marimekko.png",
description:
" A good way of showing the size and proportion of data at the same time - as long as the data are not too complicated. \n\n Also known as a Mosaic Plot. \n Marimekko Charts are used to visualise categorical data over a pair of variables. In a Marimekko Chart, both axes are variable with a percentage scale, that determines both the width and height of each segment. So Marimekko Charts work as a kind of two-way 100% Stacked Bar Graph. This makes it possible to detect relationships between categories and their subcategories via the two axes. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/marimekko_chart.html",
"https://observablehq.com/@d3/marimekko-chart",
"https://observablehq.com/@jurestabuc/horizontal-marimekko-chart-d3v5",
"https://observablehq.com/@gabrielnoiret/marimekko-chart",
"https://public.tableau.com/profile/smeetpatel1988#!/vizhome/MarimekkoChart_1/Marimekko",
],
},
{
name: "nightingale",
title: "Nightingale",
alt_title: [
"Nightingale Rose Chart",
"Coxcomb Chart",
"Polar Area Diagram",
],
type: "child",
categories: ["part-to-whole"],
icon: "nightingale.png",
description:
" Also known as a Coxcomb Chart, Polar Area Diagram. \n This chart was famously used by statistician and medical reformer, Florence Nightingale to communicate the avoidable deaths of soldiers during the Crimean war. \n Nightingale Rose Charts are drawn on a polar coordinate grid. Each category or interval in the data is divided into equal segments on this radial chart. How far each segment extends from the centre of the polar axis depends on the value it represents. So each ring from the centre of the polar grid can be used as a scale to plot the segment size and represent a higher value. Therefore, it’s important to notice with Nightingale Rose Charts that it’s the area, rather than the radius of a segment that represents its value. ",
examples: [
"https://datavizcatalogue.com/methods/nightingale_rose_chart.html",
"https://observablehq.com/@jamesleesaunders/nightingales-rose-chart-with-d3-ez",
"https://public.tableau.com/profile/bethany.lyons#!/vizhome/nightingale/1854CrimeanWar",
"https://visualizing.jp/nightingale-chart/",
],
},
{
name: "pie",
title: "Pie",
type: "child",
categories: ["part-to-whole", "part-to-whole-vis"],
icon: "pie.png",
description:
" A common way of showing part-to-whole data - but be aware that it's difficult to accurately compare the size of the segments. \n\n Extensively used in presentations and offices, Pie Charts help show proportions and percentages between categories, by dividing a circle into proportional segments. Each arc length represents a proportion of each category, while the full circle represents the total sum of all the data, equal to 100%. ",
examples: [
"https://ft-interactive.github.io/visual-vocabulary/",
"https://datavizcatalogue.com/methods/pie_chart.html",
"https://observablehq.com/@analyzer2004/bubble-pie-chart",
"https://observablehq.com/@d3/pie-chart",
"https://observablehq.com/@bayre/indonesian-palm-oil-pie",
],
},](https://mps-ph.s3.us-east-2.amazonaws.com/ma/img/96839cd8-5770-4595-a8f7-a3f7b3ebf588.png "Show how a single entity can be broken down into its component elements. If the reader’s interest is solely in the size of the components, consider a magnitude-type chart instead. Examples of use: Fiscal budgets, company structures, national election results.")
