wenjiusongguren

@wenjiusongguren·6 public vizzes

Fork of Loading Data with React & D3

This example displays a text-based summary of the CSS named colors dataset loaded from a remote CSV file. Using React state, the application asynchronously fetches the data with `d3.csv` and updates the display once the data arrives. The rendered output shows the file size in kilobytes, the number of rows, and the number of columns, formatted via `d3.csvFormat`. Before the data loads, a "Loading..." placeholder is shown. The implementation leverages React hooks like `useState` and `useEffect` to manage the asynchronous data fetching and rendering.

Dec 17, 2023

Loading thumbnail…

Fork of Mouse Follower

A circle of radius 30 follows the mouse cursor across a 960×500 SVG canvas. The React component uses the `useState` hook to track cursor coordinates and the `onMouseMove` event to update them. Built with React 16.9 and ReactDOM, the SVG circle re-renders its `cx` and `cy` attributes dynamically in response to pointer movement, creating a direct visual coupling between the user's input and the rendered shape.

Dec 17, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the static text "Hello HTML!" in large, centered type. It uses the Fetch API to retrieve a CSV file containing color data from a GitHub Gist URL, logging the response text to the console. The page structure is plain HTML and CSS, with a JavaScript script that demonstrates asynchronous fetching. The rendering approach is minimal, focusing on a simple message with no visual representation of the fetched color data.

Dec 17, 2023

Loading thumbnail…

Fork of HTML Starter

This example fetches a CSV file from a GitHub gist and logs its contents to the browser console. The code uses the Fetch API and its `text()` method to retrieve the raw data, while the page itself displays a static "Hello HTML!" message styled with CSS. The visualization is minimal, focusing on demonstrating asynchronous data retrieval in a plain HTML document.

Dec 16, 2023

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the percentage of the population infected with HIV/AIDS across countries for the year 2017, with missing data rendered in gray. The visualization uses a sequential YlOrRd color scale to encode prevalence values. Built with React, it leverages d3.geoPath and geoNaturalEarth1 for geographic projections, and d3.csv to load data from the IHME and ISO-3166 country codes datasets. The map includes graticules and country boundaries from the World Atlas TopoJSON.

Dec 13, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a single red circle centered within an SVG canvas. The visualization is rendered using raw SVG markup embedded directly in the HTML, with the circle’s position and radius defined by static attributes. The page loads React via a UMD script tag and logs the React object to the console, though no React components or state are used for the graphic. The styling block is currently empty, so no CSS rules affect the SVG. This serves as a minimal demonstration of SVG rendering alongside React’s availability in a plain HTML file.

Dec 13, 2023