nedsons

@nedsons·2 public vizzes

HTML Starter

This example shows a minimal HTML page that uses D3 v6 to populate a single empty div with a sequence of paragraphs. The app.js file calls `d3.select('div')` to target the container, then uses `.selectAll('p')`, `.data([1, 2, 3])`, and `.enter().append('p')` to create three paragraph elements, each displaying a number via `.text(dta => dta)`. The page loads D3 from a CDN in index.html, demonstrating the simplest possible D3 selection and rendering workflow without any React or additional framework.

Oct 17, 2020

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple cartoon face built from three circles—a yellow head and two black eyes—rendered as SVG. The face is centered within a 960x500 viewport, with eye positions fixed relative to the center. Using D3 v6’s `select` and `append` API, the code reads the SVG’s width and height attributes to compute coordinates dynamically. No data is loaded; instead, dimensions are derived from the SVG element itself, with eye spacing and vertical offset hardcoded. The styling comes from a minimal external stylesheet that removes page margins.

Oct 17, 2020