JYK

@jykim1623·8 public vizzes

Axes with React & d3

A horizontal bar chart displays the 10 most populous countries for 2020, using a red, curved SVG arc as a decorative backdrop. Built with React and d3.v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders ticks, labels, and bars directly as SVG elements. The data is loaded asynchronously from a CSV file of UN World Population Prospects 2019 data via `d3.csv`.

Mar 7, 2021

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention for D3 visualizations, rendering a horizontal bar chart of population data for 20 countries in 2020. The chart displays country names on the y-axis and population values on the x-axis using `scaleBand` and `scaleLinear`. SVG rectangles are positioned inside a translated group element to respect the margin. The data is loaded from a CSV file using `d3.csv`, and the visualization is built with React, leveraging hooks like `useState` and `useEffect` to manage state.

Mar 7, 2021

Loading thumbnail…

POPULATION

This visualization displays global population estimates for 91 countries from the United Nations World Population Prospects 2019 dataset. Each horizontal bar represents a country, with its length scaled proportionally to the 2020 population estimate. The chart uses React with hooks to load and manage the CSV data, while D3’s `scaleBand` and `scaleLinear` convert country names and population values into SVG rectangle positions and widths. The visualization renders as a static bar chart using SVG, with no axes or labels present.

Mar 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example visualizes all CSS named colors as two pie charts rendered in SVG. The left chart uses a ring arc for each color, while the right chart employs the `d3.pie` layout to proportionally distribute slices. The React app fetches a CSV file of CSS color names and hex values, then maps each row to a filled `<path>` element. The visualization contrasts manual angle calculations with D3's pie layout API, both powered by React's state management and D3's `arc` and `pie` functions.

Mar 6, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration across 398 automobiles. Each point represents a vehicle, with tooltips displaying the car name on hover. The visualization uses the Vega-Lite API to construct a scatter plot, with D3’s csv loader fetching data from an external auto-mpg dataset. The chart dynamically sizes to the browser window and applies custom styling for larger axis labels and a dark color palette.

Mar 1, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React manages asynchronous data loading for a D3 visualization. It fetches a CSV file of CSS named colors using the `csv` utility from D3 v5, then displays summary statistics about the dataset—size in kilobytes, row count, and column count—in a simple text format. The React `useState` hook tracks the loaded data, while `useEffect` triggers the D3 fetch operation once on component mount. The `message` helper formats the statistics using `d3.csvFormat` to calculate byte length.

Mar 1, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example builds an interactive smiley face using React and D3 v5. The page loads a CSS named color dataset from a GitHub gist and displays its file size, row count, and column count in a text overlay. A single circle follows the mouse position across the full window, rendering via SVG elements managed through React state and event handlers. The visualization demonstrates React’s `useState` and `useCallback` hooks for responsive, real-time updates, with D3’s `csv` method fetching and parsing the external data.

Mar 1, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of 18 yellow smiley faces renders in React, each with randomized eye and mouth sizes for variety. Built with React 17 and D3 v5, the example composes SVG components—`BackgroundCircle`, `Eyes`, and `Mouth`—using D3's `arc` generator for the mouth path. Faces are generated via `d3.range` and mapped to `Face` components, which group all elements inside an SVG `<g>` translated to the center. The arrangement demonstrates reusable component architecture and dynamic prop-based styling without external data.

Feb 28, 2021