mtabaka

@mtabaka·6 public vizzes

Multiple Views with Brushing

This example presents a world map with bubbles representing the total number of dead and missing migrants, sourced from a CSV dataset. A time-series histogram below the map aggregates the same data by month. Brushing along the histogram’s x-axis with `d3.brushX` filters the map’s circles in real-time. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic shapes, while React manages the SVG rendering. A sqrt scale determines bubble sizes, and country boundaries come from a TopoJSON world atlas.

Apr 26, 2020

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence by country for the year 2017, with a sequential yellow-orange-red color scale (d3.scaleSequential with interpolateYlOrRd) encoding the proportion of the population infected. Countries lacking data are rendered in gray. The map uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, with country boundaries and graticules from TopoJSON world-atlas data. React manages the component state, while D3 handles data loading from CSV files containing country codes and health statistics, and the SVG is styled with light gray fills for the sphere and graticules.

Apr 26, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with radius encoding population magnitude via a square-root scale. The visualization uses a Natural Earth projection and geo paths from d3.geoPath to render land, graticules, and country boundaries from World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with data sourced from the Simplemaps World Cities Database. The React-based SVG rendering leverages D3 v5 for geographic and scaling operations, presenting city population distributions across the globe.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example displays a bar chart of U.S. counties with death counts, sorted in descending order, with a tooltip for population. Built with the Vega-Lite API, the visualization uses a D3 CSV loader to fetch the data from a GitHub gist. The chart is rendered as SVG via Vega, and the code applies a custom configuration to adjust fonts and axis styling. The visualization is sized to fit the browser window.

Apr 26, 2020

Loading thumbnail…

Suicide Statistics in 30 years

This visualization displays global suicide statistics over a 30-year period, using a grouped bar chart where each year’s total suicides are broken down by age category. The data comes from a CSV file loaded via `d3.csv`, and the chart is constructed using the vega-lite-api, which builds the specification programmatically. The visualization aggregates suicide counts with `vl.aggregate` and encodes year on the x-axis, suicide totals on the y-axis, and age groups as color-coded bars using the viridis scale. A custom config improves readability with adjusted font sizes and axis styling.

Apr 26, 2020

Loading thumbnail…

Scatter Plot with Small Points

This scatter plot uses small, solid points to show the relationship between miles per gallon and vehicle weight for cars from the auto-mpg dataset. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega to create a declarative chart, then renders it as SVG. Data is loaded via `d3.csv`, and tooltips display the car name on hover. The chart scales both axes from zero and fits the full browser window.

Apr 26, 2020