putrafandy

@putrafandy·4 public vizzes

Auto MPG Summary

This example displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the total row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first 10 rows. The page uses D3 v5’s `csv` method to load the external CSV file and `csvFormat` to compute its size, then appends the results to the DOM using `d3.select` and `append`. The monospace, green-on-black terminal-style styling comes from simple CSS rules.

Dec 9, 2020

Loading thumbnail…

Circles on a Map

This visualization maps global population by country using proportional circles centered on each nation’s geographic centroid. The area of each circle encodes the 2018 population estimate, with missing data shown in red on a gray map. Users can pan and zoom via d3.zoom, and hover over countries to reveal population values in tooltips. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson for map rendering, with a d3.scaleSqrt for circle sizing and a custom size legend.

Dec 9, 2020

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Dec 9, 2020

Loading thumbnail…

Circles on a Map

This visualization displays the 2018 population of countries using circles positioned on a natural Earth projection map. Circle area encodes population magnitude, with colors distinguishing countries that have data from those missing it. A size legend and color legend explain the encoding. Hovering reveals country names and population values, while pan and zoom enable exploration. The code uses d3.geoPath, d3.geoCentroid, d3.scaleSqrt, and d3.zoom, rendering with SVG. Data merges a CSV of population statistics with TopoJSON world geometry (50m resolution) loaded via d3.json and processed with topojson.feature.

Dec 9, 2020