곽

곽옥석

@benneykwag·8 public vizzes

Refactoring of UN World Population 2020

This example shows the population of ten countries in 2020 as a horizontal bar chart. Each bar’s length encodes the population value, with country names on the left and a numeric axis at the bottom. Built with React and D3 v7, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to the first ten rows.

Jul 26, 2021

Loading thumbnail…

UN World Population 2020

The visualization displays the top 10 most populous countries in 2020 using a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The bars are drawn as SVG rectangles, scaled via d3.scaleBand and d3.scaleLinear. The chart loads data from a CSV file containing UN population estimates. The React component manages state with useState and useEffect, while d3.csv parses the data and d3.max computes the domain. Gridlines and tick labels are generated using d3's scale ticks.

Jul 26, 2021

Loading thumbnail…

CSS Color Named

A radial pie chart displays every named CSS color as a wedge, using its own RGB hex value as the fill color. The visualization loads color data from a CSV file via `d3.csv` inside a React component, then renders each wedge with `d3.pie` and `d3.arc`. The chart is drawn as SVG paths, with the pie centered in a 960×500 viewport, offering a full spectrum of browser-supported color names sorted by value.

Jul 25, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to display a bubble chart mapping countries on the x-axis against religions on the y-axis, with circle size encoding population. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, filtered through a CSV loaded via `d3.csv`. The chart applies custom axis and label styling from a `config.js` file, and uses Vega-Lite’s `.markCircle()` and `.encode()` methods to specify the visual encodings. The visualization is rendered as an SVG, with tooltips provided by `vega-tooltip`.

Jul 24, 2021

Loading thumbnail…

Loding Data with React & D3

This example demonstrates asynchronous data loading in a React application with D3.js. It fetches a CSV file containing CSS named colors and computes a summary message displaying the file size in kilobytes, number of rows, and column count. The code uses React hooks such as `useState` and `useEffect` to manage the data state, while the `d3.csv` function retrieves the remote dataset and `d3.csvFormat` calculates its byte size. The result is rendered as plain text within a `<pre>` element, showing "Loading..." until the data arrives.

Jul 23, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a CSV file and displaying its basic metadata, including file size, row count, and column count, in a large text block. The program uses D3.js’s `d3.csv` function to fetch and parse the remote dataset, then accesses `data.length` and `data.columns.length` to extract the statistics. The result is rendered via a React-managed `pre` element, with the message composed using string concatenation and `Math.round` for the kilobyte calculation. The source is a CSS named colors CSV hosted on GitHub Gist.

Jul 23, 2021

Loading thumbnail…

Mouse Fllower

A circle tracks the mouse cursor across an SVG canvas, updating its position in real time as the user moves the pointer. The visualization uses React's `useState` and `useCallback` hooks to manage the cursor coordinates and handle the `onMouseMove` event on the `<svg>` element. D3 v7 is loaded but not directly utilized in the code; the circle's `cx` and `cy` attributes are set from the React state. The rendering is done entirely through SVG elements within a React component.

Jul 23, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of 63 randomly generated smiley faces, each rendered as a separate SVG through React components. The faces vary in eye size, eye offset, and mouth dimensions due to JavaScript’s `Math.random()` calls during rendering. The visualization uses d3’s `arc` function to draw the mouth paths and React to compose the face parts (background circle, eyes, mouth) within a shared container. Each face is identical in size and positioning, but the stochastic parameters create a playful, varied collection.

Jul 23, 2021