Erica Rabinovich

@erabinovich3·5 public vizzes

Simplified Map Attempt

This example displays a world map with country boundaries rendered as SVG paths. The map uses an equirectangular projection and includes a sphere outline for context. The visualization loads GeoJSON topology data from a remote source and processes it with the `topojson` library’s `feature` function before drawing each country with `d3.geoPath`. The map is styled with a teal land color against a light gray sphere, and the React component structure manages the data loading and SVG rendering.

Feb 26, 2024

Loading thumbnail…

Simplified Map

This example renders a simplified world map using SVG paths generated by d3.geoPath with an equirectangular projection. It loads TopoJSON data from a gist, converts it to GeoJSON with the topojson.feature API, and draws each country as a filled path with white borders. The visualization demonstrates a minimal React integration, where a useEffect hook fetches the data and D3 selects the existing SVG element to bind and render the geographical features.

Feb 26, 2024

Loading thumbnail…

Fork of Smiley Face Part V

A smiley face rendered with React and D3 draws a yellow circle, black eyes, and a mouth using SVG primitives. The example demonstrates splitting React components into separate ES6 modules—BackgroundCircle, Eyes, Mouth, and FaceContainer—with React Fragments grouping elements. D3’s `arc` generator creates the mouth path from radius and width parameters. Fixed coordinates and dimensions define the face layout.

Feb 24, 2024

Loading thumbnail…

Fork of Let's Make a Face Part I

A smiley face is drawn with SVG shapes, featuring a yellow circular head, black stroke, two eyes, and a mouth arc. The face is centered using a transform, with eyes positioned via offset coordinates and a mouth generated using the D3 `arc` function. React manages the SVG markup, while D3 provides the arc path for the smile. The code demonstrates combining React's declarative rendering with D3's geometry utilities to create simple vector illustrations.

Feb 24, 2024

Loading thumbnail…

Fork of Hello HTML

A simple smiley face is drawn using SVG primitives, with a yellow circle for the head and two smaller black circles for the eyes. The rendering uses inline SVG within an HTML page, styled via an external CSS stylesheet that sets the shape attributes such as fill color, stroke, and radius. The code relies on standard SVG circle elements and CSS properties like `fill`, `stroke`, `cx`, `cy`, and `r`, with no external JavaScript libraries or data sources.

Feb 24, 2024