Skip to main content
SimilarExport ZIP
100%

line-density

✓ Published0🌍 Public
Zzoniyac
Last edited Apr 23, 2020
Created on Apr 22, 2020
Forked from textured pie chart

This example creates a bubble chart from a CSV dataset, mapping GDP per capita to the x-axis, life expectancy to the y-axis, and population to bubble radius. A D3 ordinal color scale applies circle-pattern textures from the textures library to the bubbles, with each texture defined via `textures.circles()` and varied sizes. The chart uses D3 v4 with SVG rendering, adding axes and circles through standard `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` calls.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart: All Data

This bubble chart displays global life expectancy against GDP per capita, with bubble size representing population and color indicating continent. The visualization includes an interactive tooltip showing country names on hover, plus a legend for population scale. Built with D3 v4, it uses SVG circles, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color mapping. The chart reads data from a CSV of three numeric variables per country and adds hover effects to highlight individual data points.

SSimon Hackbert
76% match
Loading thumbnail…

D3 Example

This example visualizes population totals for the world’s five largest countries using area-encoded circles. It shows a bubble chart where each circle’s radius scales with population, with countries positioned along an ordinal x-axis. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, apply a square-root scale for radii, and render SVG circles with an axis. The code employs `d3.scale.ordinal` and `d3.scale.sqrt` to map data, and custom tick formatting replaces "G" with "B" for billions.

CCurran Kelleher
75% match
Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

JJoker-tr
75% match
Loading thumbnail…

Bubble Chart

A bubble chart displays the relationship between cost of living and population across five countries, with circle size encoding population and position encoding both variables. The example loads D3 v6 via UNPKG and uses SVG rendering. It constructs linear scales for the x- and y-axes, a square-root scale for circle radii, and an ordinal color scale from `d3.schemeCategory10`. Axis components are generated with `d3.axisBottom` and `d3.axisLeft`, and country labels are added as SVG text elements.

UUVarshaReddy
75% match
Loading thumbnail…

Test 1

This example renders a population bubble chart for a set of countries. It uses D3 v5 to load CSV data, then draws circles scaled by population size, with fill color mapped from white to black via a linear scale, and text labels added. The code also includes a second, incomplete scatter plot script for a different dataset, and a reusable bar chart built with D3 scales and axes.

Sseguritops
74% match
Loading thumbnail…

Bubble Chart

This bubble chart maps countries by cost of living on the x-axis and population on the y-axis, with bubble radius encoding population using a square-root scale. The visualization uses d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. SVG circles and text labels are positioned via xScale and yScale, with d3.axisBottom and d3.axisLeft rendering the axes. The data is a static array of five country records, rendered as semi-transparent colored bubbles to compare living expenses against population size.

VVenkat-Sumith-Thota
74% match
Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot
74% match
Loading thumbnail…

Data Reading & Shaping

This animated bubble chart shows the relationship between income per capita, life expectancy, and population for nations from 1800 to 2009, with bubbles colored by region. Using D3 v4 and SVG, it loads data from a JSON file, applies logarithmic and linear scales, and updates circle positions through a 2-second transition each year. A counter displays the current year as the visualization progresses through the dataset.

EElaineYu
73% match