Yeeleng Scott Vang

@scott-vang·12 public vizzes

Fork of ZoomableGlobe

A fork of the ZoomableGlobe example displays an interactive world map with country boundaries and graticules, sourced from World Atlas TopoJSON. The map uses an equirectangular projection and renders landmasses as SVG paths via d3.geoPath, with React managing component state. Users can pan and zoom the map through a d3.zoom behavior, which updates the SVG group transform and adjusts stroke widths inversely to the zoom scale. The visualization also tracks mouse position and passes it to the projection’s invert method, allowing coordinate lookup on interaction.

Jul 22, 2023

Loading thumbnail…

ZoomableGlobe

This interactive visualization presents a zoomable orthographic globe, displaying country boundaries and graticules sourced from the World Atlas TopoJSON. The globe is rendered as SVG paths using `d3.geoOrthographic` and `d3.geoPath`, with interactions managed by `d3.zoom`. It uses React to update the projection’s transform state during pan and zoom operations, adjusting stroke widths inversely to the zoom scale. The sphere and land features are styled with distinct fills, while interiors are outlined for clarity.

Jul 7, 2023

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map built with D3.js that uses a natural Earth projection to display country boundaries. The map supports zooming and panning through D3’s zoom behavior, while hovering over any country highlights it in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, pairing it with a TSV file to map country names via ISO numeric codes. Tooltips appear on hover, generated by appending SVG title elements. The rendering uses d3.geoPath, d3.geoNaturalEarth1, and d3.zoom for interaction.

Jul 7, 2023

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example shows a world map rendered with a natural Earth projection, displaying countries as light green polygons on a blue sphere. It uses D3 v5 with `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas package. The code appends a sphere outline and then iterates over country features, styling them with CSS classes that define fill and stroke properties. The map relies on the `topojson.feature` API to convert TopoJSON topology into GeoJSON features for rendering.

Jul 7, 2023

Loading thumbnail…

Fork of Polished World Map

This interactive world map visualizes country boundaries and graticules, rendered as an SVG using React and D3 v5. The map is projected using d3.geoOrthographic, with land areas filled with a teal color and graticules drawn in light gray. The code uses d3.geoPath to project geographic features from the World Atlas TopoJSON, and d3.geoGraticule to generate the graticule lines. The map responds to mouse movement, though the visual effect of this interaction is not visible in the static display.

Jun 30, 2023

Loading thumbnail…

Fork of Fork of ice8-vignesh

This visualization presents an interactive world map built with D3 and TopoJSON, letting users explore countries through an orthographic projection that can be rotated by dragging. Clicking the United States switches the map to a Mercator projection, while clicking any other country returns it to the orthographic view. The code uses `d3.geoPath` for rendering, `d3.drag` for rotation, `d3.zoom` for scaling, and loads country boundaries from the World Atlas TopoJSON dataset with names from a TSV file. SVG paths with CSS hover effects display the geographic features.

Jun 29, 2023

Loading thumbnail…

Mouse Follower

A small yellow smiley face follows the mouse cursor across an SVG canvas, while a semi-transparent tooltip displays the cursor’s x and y coordinates as latitude and longitude values. Built with React and ReactDOM, the component uses useState and a mouse move event handler to update the position of both the face and the text box, which is styled with CSS.

Jun 22, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders the CSS named colors dataset as a radial burst, with each color occupying an equal slice of a full circle. It loads the CSV using D3’s `csv` utility, and React’s `useState` and `useEffect` manage the asynchronous data fetch. The pie layout (`d3.pie`) and arc generator (`d3.arc`) compute the SVG path geometry, while React renders each `<path>` with a fill from the color’s hex value. The visualization demonstrates a hybrid approach where D3 handles data parsing and layout calculations, and React handles DOM rendering.

Jun 6, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a minimal React application that loads CSS named color data from a CSV file and displays summary statistics about the dataset. The code uses D3’s `csv` utility in a React `useEffect` hook to fetch the data, then stores it in state via `useState`. The rendered output presents the file size in kilobytes, row count, and column count using `d3.csvFormat`. While loading, the interface displays a simple “Loading...” message before the statistics appear.

Jun 6, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization displays summary statistics about the CSS Named Colors CSV dataset by showing the file size in kilobytes, the number of rows, and the number of columns in large text. The code uses the D3.js v5 library’s `d3.csv` function to fetch and parse the remote CSV file, then accesses the resulting data object’s `length` and `columns` properties. It also demonstrates an alternative approach using the Fetch API with `async`/`await` for parsing, along with commented-out code illustrating a nested promise pattern.

Jun 6, 2023

Loading thumbnail…

Fork of Smiley Face Part II -end

This example shows a yellow smiley face composed of a circular background, two eyes, and a semicircular mouth, centered and scaled to fill the browser viewport. The face is built from React components that render SVG elements, with the mouth path generated using the d3.arc method. The Face component composes smaller reusable components—BackgroundCircle, Eyes, and Mouth—inside a FaceContainer that applies the translate transform. The implementation uses React for component structure and d3.v5 for arc generation, with all dimensions passed as props.

Jun 5, 2023

Loading thumbnail…

Fork of Hello HTML

This example renders a classic smiley face as an SVG graphic using React and D3. It draws a yellow circle with a black stroke for the head, two black eye circles, and a curved mouth path generated by `d3.arc()` with specified inner and outer radii and angle ranges. The SVG elements are positioned via a group transformation centered on the viewport, with hardcoded offsets for the eyes and mouth. The visualization demonstrates minimal React component structure paired with D3’s arc generator for shape construction.

Jun 3, 2023