d3 scatterplot qualitative

100%

d3 scatterplot qualitative

✓ Published0🌍 Public

Last edited Mar 5, 2024

Created on Mar 5, 2024

This scatterplot visualizes the relationship between urban population percent growth and mobile cellular subscriptions per 100 people across five North American countries. The visualization uses a qualitative color scale from ColorBrewer to distinguish each country, with data points rendered as semi-transparent circles. The chart employs d3.csv to load data, d3.scaleLinear for both axes, and d3-legend to create the categorical legend. The simplified dataset comes from the Corgis Global Development collection, and the SVG rendering is built entirely with D3 v7.

AI-generated description

A scatterplot with qualitative color scale with color brewer in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/global_development/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 time series multiline

This example visualizes mobile cellular subscriptions per 100 people from 1990 to 2010 for five North American countries, using a multiline chart to compare trends over time. It relies on D3 v7 with SVG rendering, a linear scale for time, and a color scale from ColorBrewer to distinguish countries. The chart includes a tooltip on mouseover and a legend from the d3-legend library, with data sourced from the Global Development dataset.

AAndrew

80% match

Loading thumbnail…

d3 bubble chart

A bubble chart visualizes the relationship between urban population growth and total mobile cellular subscriptions for the US, Canada, and Mexico, with each bubble’s radius encoding subscriptions per 100 people. The D3 v7 code loads CSV data, filters to three North American countries, and uses a log-scaled y-axis with d3.scaleLog. Circles are rendered as SVG elements with tooltips, using d3.axisBottom and d3.axisLeft for axes. Data comes from the Global Development dataset hosted on GitHub.

AAndrew

80% match

Loading thumbnail…

d3 time series small multiples

This example visualizes population growth in the top five North American countries from 1990 to 2010 using small multiples, with each of the 15 charts representing a unique country-year combination. It shows the trends and comparisons of population growth rates across these nations. The visualization uses D3 v7 with SVG rendering, employing a color scale from ColorBrewer for country distinction and a legend from Susie Lu’s d3-legend library. The data comes from the Global Development dataset, simplified for clarity. Each small multiple displays a line chart with axes, and a tooltip provides interactive details on hover.

AAndrew

77% match

Loading thumbnail…

Scatter Plot: Quantitative vs Qualitative values

This scatter plot displays the population of the ten most populous countries, with each country positioned along the vertical axis and its population on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` for the population values and `scalePoint` for the categorical country names, rendering circles via SVG. The code loads data from a CSV file using `d3.csv`, formats the x-axis ticks with `d3.format`, and adds grid lines through custom axis tick sizes.

MMinwoo Pak

76% match

Loading thumbnail…

d3 Scatter Plot

This example visualizes the population of the ten most populous countries as a scatter plot. It uses D3 v5 to load a CSV file and scales, with `scaleLinear` mapping population to the x-axis and `scalePoint` mapping country names along the y-axis. Circles represent each country, with tick marks and labels styled via CSS. The SVG-based chart renders axes with `axisBottom` and `axisLeft`, and uses text elements to label the chart and its population axis.

JJohnPaulPagelerJr

75% match

Loading thumbnail…

Scatter Plot

Using d3.csv to load population data for ten countries, this scatter plot displays each nation as a circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.axisBottom and d3.axisLeft with custom tick formatting that abbreviates large numbers, while SVG circles are rendered with a fixed radius. Population values from the CSV are multiplied by 1000, and the chart includes labeled axes and a title.

Bben-chin-43

74% match

Loading thumbnail…

D3 Scatter Plot

This D3 Scatter Plot shows the relative populations of ten countries, with country names on the y-axis and population values on the x-axis. The chart uses a linear scale for population and a band scale for countries, with circles sized proportionally to the bandwidth. Built with D3 v7, the SVG visualization leverages `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render axes and data. Population data is loaded from a CSV file, multiplied by 1000, and formatted with abbreviations like "B" for billions.

YYoung Song

74% match

Loading thumbnail…

d3 bar diverging

This example shows a diverging bar chart of United States rural population growth from 2000 to 2009, using a diverging color scale from ColorBrewer to distinguish positive and negative growth values. The visualization loads CSV data from a GitHub gist, which is based on the Corgis global development dataset, and renders it as SVG bars using D3 v7. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical year on the y-axis, and a `d3.scaleDiverging` with the RdBu color scheme for encoding value magnitude. The d3-legend library adds a sequential color legend, while axis labels and ticks are generated with standard D3 axis methods.

AAndrew

74% match