Dy-Diana

@MoSummers-dy·4 public vizzes

Let's make a map with D3.js!

A D3.js map renders world countries as light-green SVG paths atop a blue sphere, using the Natural Earth projection. The code loads GeoJSON from the world-atlas TopoJSON source, converts it with the `feature` method, and draws each country with `geoPath`. The sphere outline is generated from a spherical geometry object, while CSS applies fill and stroke styling. This example demonstrates a minimal choropleth-free geographic visualization, relying on `json`, `geoNaturalEarth1`, and `topojson` to project and display the data.

Nov 8, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3 v5 visualization can adapt to browser window resizing by redrawing its SVG content to match the new dimensions. The code uses a CSS-positioned container to fill the viewport, then extracts the container’s `clientWidth` and `clientHeight` during a `redraw()` function. It sets the SVG element’s width and height attributes accordingly and updates a pair of green diagonal lines to form an X spanning the full chart area. A `window` resize event listener triggers the redraw on every size change, showing a minimal pattern for responsive D3 SVGs.

Nov 7, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates core D3.js DOM manipulation and transitions. The code builds the face from basic shapes—circles for the eyes and head, a rectangular eyebrow, and an arc-generated mouth—anchored within a centered group. Using d3-selection and d3-transition, the eyebrows animate upward and back down over two sequential two-second intervals. The example shows how D3’s select, append, attr, and transition methods compose to create dynamic, interactive-style visuals without external data, relying purely on hardcoded geometry and SVG coordinates.

Nov 7, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline attributes and CSS classes. A root `<g>` element applies a global scale transform, while nested groups use translate to position shape clusters, with one group inheriting fill and stroke styles and another defining thick, rounded line styles via the `.lines` class. The SVG is rendered directly in HTML with a 960×500 viewport, and CSS controls body margins and line appearance.

Nov 7, 2020