XizhiW

@XizhiW·12 public vizzes

Stylized bar chart xizhi

This example displays the top 10 most populous countries as a horizontal bar chart using React and D3 v5. The bars are rendered as SVG rectangles, with population values mapped through `scaleLinear` and country names positioned using `scaleBand`. The chart includes axes generated by `d3.axisBottom` and custom tick components, styled with the Dongle font. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via `d3.csv` and sliced to the first ten entries.

Jan 18, 2022

Loading thumbnail…

Refactored bar chart xizhi

A refactored bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The chart shows population values as horizontal bars, with country names on the y-axis and population counts on the x-axis. React components render SVG elements, while D3 v5 provides the scales and CSV data loading. The layout uses a band scale for countries and a linear scale for population, with bottom and left axes positioned within margins.

Jan 17, 2022

Loading thumbnail…

Fork of The Margin Convention Outtake

This example displays the top 10 most populous countries as a horizontal bar chart using React and D3 v5. The bars render in SVG, with country names on the y-axis and population counts on the x-axis, including tick marks and labels. The code uses `d3.csv` to load UN World Population Prospects 2019 data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The visualization omits axes through the margin convention, focusing only on the plotted rectangles and their corresponding tick labels.

Jan 17, 2022

Loading thumbnail…

Fork of Axes with React & D3

This visualization displays the ten most populated countries as a horizontal bar chart with customized axes. It uses React hooks to load and manage data from the United Nations World Population Prospects 2019 CSV, then renders SVG elements directly through JSX. The chart constructs a band scale for countries and a linear scale for population values. Axis ticks and labels are manually generated using `scaleBand.ticks()` and `scaleLinear().domain().map()`, while line and text SVG elements create gridlines and annotations. The bars themselves are simple SVG rectangles sized from the scales.

Jan 17, 2022

Loading thumbnail…

Fork of Rendering data with react and d3 Xizhi

This example renders the CSS named colors dataset as a pie chart using React and D3 v7. The visualization loads CSV data via `d3.csv` and displays each color as a slice with its fill set to the `RGB hex value`. React manages state and renders SVG paths, while D3’s `pie` and `arc` generators compute the angles and geometry. A text overlay reports the data size in kilobytes, row count, and column count using `d3.csvFormat`.

Jan 16, 2022

Loading thumbnail…

Fork of Smiley face part i from Xizhi

This example renders a yellow smiley face with black-outlined circular eyes and a curved mouth using React and D3. The face is centered in an SVG canvas, with the mouth drawn using D3’s `arc` generator. All shapes, including the face circle, eyes, and mouth path, are positioned relative to the center using the `transform` attribute. The code leverages `d3.arc` for the mouth and React's declarative JSX to compose SVG elements.

Jan 16, 2022

Loading thumbnail…

Rendering data with react and d3 Xizhi

This example visualizes the CSS named colors dataset by rendering each color as a thin horizontal stripe, creating a stacked palette of 148 rows. The React app fetches the CSV data using `d3.csv` and maps each row to a styled `<div>` element whose background color is set from the `RGB hex value` column. A `Message` module displays dataset metadata, including file size in kilobytes, row count, and column count, computed with `d3.csvFormat`. The visualization relies on React’s `useState` and `useEffect` hooks for asynchronous data loading, with D3 v7 providing CSV parsing.

Jan 16, 2022

Loading thumbnail…

Fork of Vega-Lite API Template Xizhi

This example displays a bubble chart of worldwide religious populations, plotting countries along the x-axis and religions along the y-axis, with circle size encoding population magnitude. Built with the Vega-Lite API atop Vega and Vega-Lite, it uses D3’s `csv` loader to fetch data from the UCI Auto MPG repository. The visualization resizes to fit the browser window and includes interactive tooltips via the Vega Tooltip handler.

Jan 16, 2022

Loading thumbnail…

Loading and Parsing CSV data Xizhi

This example demonstrates the loading and parsing of CSV data by fetching a remote CSS named colors dataset and displaying concise summary statistics. The visualization presents three key metrics—file size in kilobytes, row count, and column count—in a large, bold text format. It uses the D3.js library (v7) with the `d3.csv()` method to asynchronously load and parse the data, while also calculating the formatted CSV string length with `d3.csvFormat()`. A commented alternative shows the same functionality using the Fetch API with `fetch()` and `d3.csvParse()`. The data source is a GitHub Gist containing the CSS named colors table.

Jan 12, 2022

Loading thumbnail…

Mouse Follower Xizhi

A smiling face rendered as an SVG circle follows the mouse cursor across a 960-by-500 viewport. Built with React and D3 v7, the component tracks pointer movement via the `onMouseMove` event, updating the circle's `cx` and `cy` coordinates with the event's `clientX` and `clientY` values. The visualization uses React's `useState` and `useCallback` hooks to manage and update the cursor position, with the SVG output rendered directly to the DOM.

Jan 12, 2022

Loading thumbnail…

Fork of Simulated COVID maps in the US and Canada

This example shows simulated COVID-19 case counts across US counties and Canadian census divisions, with boundaries switchable to states and provinces and circle scaling switchable between proportional and classed modes. It uses d3.geoStereographic for projection, d3.geoPath for SVG paths, and d3.scaleThreshold or d3.scaleSqrt for circle radii. Data comes from 2019 US county and 2016 Canadian census population estimates, with populations divided by 100 to create fake infection rates. The classed legend and color scheme follow the Johns Hopkins COVID map.

Jan 11, 2022

Loading thumbnail…

Smiley face part i from Xizhi

A grid of randomly generated smiley faces fills the viewport, each face composed of SVG circles for the head and eyes and an arc path for the mouth. The visualization uses React and D3 v7, leveraging D3's `arc()` API to construct the mouth geometry and `range()` in the main `index.js` to generate the array of faces. All rendering is handled via SVG within React components, with randomized properties like eye offset, radius, and stroke width creating variety across the repeated pattern.

Jan 11, 2022