ShahAlvi

@ShahAlvi·4 public vizzes

Cheap Tricks for Interaction

This example demonstrates interaction with geographic data by rendering a polygon of the British Columbia region and highlighting countries on hover. Using D3 v5, the code loads geographic data from a JSON file and projects it with `d3.geoMercator` and `d3.geoPath`. The SVG output changes fill color on mouseover via CSS hover rules, while a linked YouTube video explains the underlying interaction techniques. The visualization combines static map rendering with simple, CSS-based interactivity.

Jun 11, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a world map rendered as a light green SVG with hover highlighting, using a natural Earth projection and zoom/pan interaction. The map displays a single polygon outlining the region of British Columbia and its surrounding area. Built with D3 v5, it uses `geoNaturalEarth1` for projection, `geoPath` for geographic drawing, and D3’s `zoom` behavior to apply transforms on user input. The data is loaded from a local GeoJSON file, and hover effects change country fill colors via CSS. The visualization showcases cheap, effective ways to add interactive feedback to maps.

Jun 11, 2020

Loading thumbnail…

Untitled

This example draws a single circle in an SVG using D3.js v5. The circle is appended to the root `<svg>` element and positioned with hard-coded values for its center and radius, using the `select` and `append` APIs. The circle’s radius is set to half the SVG’s height, and its x- and y-coordinates are both set to half the SVG’s height, resulting in a face-like shape centered vertically. The page loads D3 from an unpkg CDN and includes minimal CSS that hides overflow.

Jun 8, 2020

Loading thumbnail…

Untitled

This example presents a simple HTML cars report, displaying a list of three car brands (Nisson, Toyota, and Honda) with the first item, Nisson, highlighted in red. The page uses plain HTML and CSS, with a monospace font applied via the body selector and the `.highlighted` class controlling the red text color. No JavaScript or external visualization libraries are employed; the rendering relies entirely on static markup and stylesheet rules defined in the source files.

Jun 7, 2020