sdilbaz

@sdilbaz·7 public vizzes

Untitled

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

Feb 7, 2020

Loading thumbnail…

Basketball Court

A world map displays cities with populations exceeding 50,000 as semitransparent circles, sized by population using a square root scale. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, country interiors, and graticules rendered as SVG paths. City coordinates are projected from latitude and longitude, with circle radii scaled by `d3.scaleSqrt`. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, rendered through a React component structure.

Feb 3, 2020

Loading thumbnail…

HTML Starter

This example displays a static “Hello HTML” message centered on a blank page, with text styled at a massive 13em font size. It uses plain HTML and CSS within a single `index.html` file, with no external libraries or data sources. The page renders instantly in the browser without any JavaScript or interactive elements, serving as a minimal starting point for HTML-based visualizations.

Feb 3, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears in an SVG, built entirely through D3.js v5 selections and DOM manipulation. The face includes a head, two eyes, and a mouth drawn with the `d3.arc()` path generator. The eyebrows, rendered as rectangles, animate continuously via chained `transition` calls, moving up and then back over 2-second intervals. The example demonstrates fundamental SVG element creation, coordinate transforms, and data-driven attribute updates using D3's `select`, `append`, and `attr` methods.

Feb 3, 2020

Loading thumbnail…

Let's make a face with d3.js!

A playful SVG face built from geometric shapes demonstrates how D3.js coordinates discrete visual elements, with eyes, nose, and mouth arranged on a 960×500 canvas. The rendering uses D3.js v3’s core selection and attribute methods to position and style each facial feature, while the page’s CSS removes default margins for a full-bleed display. The example emphasizes basic SVG group and shape creation rather than data mapping, showing how D3’s low-level drawing primitives can assemble a recognizable composite figure.

Feb 3, 2020

Loading thumbnail…

HTML Starter

This example displays a static HTML page titled “Cars Report” with three list items (“t1”, “t2”, “t3”) centered in the browser window. It uses plain HyperText Markup Language with embedded Cascading Style Sheets to style the body text at a large font size. The page relies on no JavaScript libraries or data files, serving as a minimal starter template for web-based visualizations. It demonstrates how a bare HTML document can render text and lists without external dependencies or interactive features.

Feb 3, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, rendered at an extremely large font size to demonstrate the foundational structure of an HTML document. It uses a plain HTML file with inline CSS to style the body element, setting text alignment and font size. The page relies on the browser’s default rendering of HTML and text, with no external libraries or JavaScript. It serves as a minimal starting point for creating web-based visualizations.

Feb 3, 2020