ClaraGriot

@ClaraGriot·3 public vizzes

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.

Jun 23, 2017

Loading thumbnail…

fresh block

This example visualizes global health and wealth data by plotting circles for each country on logarithmic and linear scales. The x-axis shows GDP per capita (wealth), the y-axis shows life expectancy (health), and circle radius encodes population size, with colors representing continents. The visualization is built with D3 v4, using SVG rendering, and employs `d3.scaleLog`, `d3.scaleLinear`, and `d3.scaleSqrt` for positioning and sizing. Data is loaded from a CSV file, with axes labeled in French for per-capita income and life expectancy at birth.

Jun 23, 2017

Loading thumbnail…

CELSA

This example presents a placeholder visualization: a single text element reading "Edit the code below to change me!" rendered in monospace. The code uses d3.v4 to append an SVG to the body and adds text with fixed font size and positioning. It demonstrates basic SVG creation and text styling with d3, but contains no data or interactive behavior. The visualization serves as a starting template, showing only static text without any data-driven elements or dynamic updates.

Jun 23, 2017