Betty

@ywwang·9 public vizzes

World Map

This visualization shows a world map rendered with D3’s geoEqualEarth projection, displaying country boundaries as blue filled paths over a light gray sphere. The map draws from the world-atlas TopoJSON dataset, which the code loads via `d3.json` and converts using `topojson.feature` and `topojson.mesh`. React renders the SVG paths, with the `d3.geoPath` generator computing the projected shapes, and interior borders highlighted in a contrasting stroke.

May 31, 2022

Loading thumbnail…

Line Chart

A line chart displays weekly temperature measurements for San Francisco over time, with a single blue line and circular data point markers. The time axis runs horizontally with date labels, while the temperature axis is vertical. The visualization is built with React components and D3 v5 utilities, using `scaleTime`, `scaleLinear`, and `extent` to map data to SVG coordinates. CSV data is loaded from a GitHub repository using D3's `csv` function and rendered as an SVG path and circles.

May 10, 2022

Loading thumbnail…

Scatter Chart

This scatter chart visualizes the Iris dataset, plotting petal width against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear` and `extent` handling the data scaling and domain calculations. Custom React components construct the axes and circular marks, while the data is loaded asynchronously via D3's `csv` function. The chart includes labeled axes and gridlines, with each data point rendered as a circle that reveals its value on hover.

May 9, 2022

Loading thumbnail…

Refactor of Rendering Data with React & D3 - Bar Charts

This example shows a horizontal bar chart ranking the populations of the world’s ten largest countries, sourced from a CSV file of 2020 estimates. It uses React to render SVG elements, while D3’s `scaleBand` and `scaleLinear` compute the layout and `csv` loads the data. The `AxisBottom` and `AxisLeft` components generate ticks and labels, and `Marks` draws each rectangle with a tooltip showing the country name.

May 9, 2022

Loading thumbnail…

Rendering Data with React & D3 - Bar Charts

A horizontal bar chart displays the top ten countries by their 2020 populations, loaded from a CSV file. The visualization uses React to construct SVG elements, while D3 utilities handle data loading and scaling: `d3.csv` fetches and parses the data, `d3.scaleBand` positions the y-axis country labels, and `d3.scaleLinear` maps population values to bar widths. The chart includes red gridlines and value labels along the x-axis.

May 6, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and a linear population scale along the bottom. It uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sliced to the first ten rows. Axes are custom components using D3 tick generation.

May 5, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays a radial burst of CSS named colors, where each color is rendered as a slice of a pie chart using React and D3. The data loads from a CSV file of named colors via D3’s `csv` utility, and React’s `useState` and `useEffect` manage the asynchronous fetch and rendering state. The SVG output maps each slice using D3’s `pie` and `arc` functions, with the fill color taken directly from the `RGB hex value` column. The example demonstrates a hybrid approach, combining D3’s data and geometry utilities with React’s declarative component rendering.

May 5, 2022

Loading thumbnail…

Fork of React Starter

This example plots airport locations as red circles on a map, with each point colored by state and showing a tooltip on hover. The visualization loads airport data from a CSV file hosted on jsDelivr, then renders it using a Vega-Lite API specification defined in `viz.js`, which is registered with the Vega and Vega-Lite libraries in `index.js`. The React starter app fetches the data asynchronously via D3’s `d3.csv` method, then passes it to the Vega-Lite chart, which sizes the plot to fill the browser window.

May 5, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with eyes and a mouth follows the cursor across a full-screen SVG canvas. Built with React components split into separate ES6 modules, the face’s position updates via React’s `useState` hook on mouse movement. The mouth is rendered using a D3 `arc` generator, while the face’s circular background, eyes, and mouth are composed as reusable React fragments and components, with styling applied through SVG attributes.

May 4, 2022