Skip to main content
Log in
M

Martin Palanca

@martipal·4 public vizzes

Loading thumbnail…

Circles on a Map

This visualization depicts global population data for 2018, using proportional circles on a natural Earth projection map. Country boundaries are rendered as SVG paths via `d3.geoPath`, while circle areas encode population using `d3.scaleSqrt`. Pan and zoom are enabled through a custom `zoom` event handler. Data is loaded from a CSV file and a TopoJSON world atlas, merged by country code. A size legend clarifies the scaling, and hovering on a country reveals its name and population via a tooltip.

Feb 12, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations’ World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the value axis, `d3.scaleBand` for the categorical axis, and custom `d3.axisBottom` and `d3.axisLeft` configurations. Population values are formatted with `d3.format` to abbreviate large numbers, and axis labels are added manually via SVG text elements.

Jan 15, 2020
Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population counts for seven countries, with each bar’s length proportional to its population. The visualization uses D3’s `csv` loader to read from `data.csv`, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. A single `selectAll('rect')` joins the data and appends rectangles with widths derived from the scaled population values. The data source is a static CSV file, and the rendering occurs entirely in a React-free vanilla JavaScript setup.

Jan 15, 2020
Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with two black eyes and an arc-shaped mouth forms a simple face. The SVG shapes are created and positioned using D3 v5's `select`, `append`, and attribute setters. The mouth uses D3's `arc` generator to define a path, which is then animated with the D3 `transition` API over 200 milliseconds.

Jan 9, 2020