RayZax757

@RayZax757·2 public vizzes

Cheap Tricks for Interaction

A world map rendered as SVG paths uses D3.js and the topojson library, with a graticule sphere behind the landmasses. The map responds to mouse clicks and drags through D3's `zoom` interaction, which applies a transform to the country group. Hovering over a country, which is filled with light green and outlined in black, triggers a red fill via the CSS `:hover` pseudo-class. Geographic data comes from the `world-atlas` package, with country names loaded from a TSV file but not yet displayed in the titles.

Jul 26, 2020

Loading thumbnail…

Hello HTML

This example demonstrates a minimal HTML page that combines D3.js v5's arc function with React’s rendering capabilities as a basic proof-of-concept. The page displays a static yellow SVG circle with a black outline, drawn directly in the HTML markup, alongside a React-rendered "hello JSX" heading. The code imports the `arc` function from D3 and logs it to the console, while ReactDOM renders the functional component into the root division, using the production builds of React 16.13.1 and ReactDOM 16.7.0.

Jul 3, 2020