Taeyoung Ahn

@taeyounga·12 public vizzes

간단한 지도 표시하기

This example displays a simple interactive map centered on coordinates near Seoul, South Korea, at a zoom level of 10. It renders a base map within a full-width, 400-pixel-tall HTML `div` element. The visualization is powered by the Naver Maps JavaScript API, accessed via an external script tag. The code initializes a map object by passing the target `div`'s ID and an options object containing a `naver.maps.LatLng` center point and a zoom value.

Sep 15, 2021

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the ten most populous countries in 2020, sorted by population, with value labels on the x-axis and country names on the y-axis. The example loads CSV data via `d3.csv` and manages asynchronous state with React’s `useState` and `useEffect`. It renders SVG bars, axes, and tick labels using React components, while D3’s `scaleBand` and `scaleLinear` compute the layout. The chart uses D3 v7 with React 16.9, loading both libraries from a CDN.

Sep 13, 2021

Loading thumbnail…

Axes with React & D3

This example visualizes the top ten most populous countries in 2020 using a horizontal bar chart, rendered as SVG. The code combines D3 v7 utilities—`csv`, `scaleBand`, `scaleLinear`, and `max`—to fetch and scale the data, while React’s `useState` and `useEffect` manage the asynchronous loading and component state. Axes are constructed manually with D3’s tick values and React’s JSX, drawing grid lines, tick labels, and bars within a translated `<g>` element. The chart updates entirely through React rendering, with no D3 selection or transition APIs involved.

Sep 13, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal React application that uses D3 to load and summarize a remote CSV dataset. It displays a text message with the file size in kilobytes, row count, and column count, while showing "Loading..." until the data arrives. The app uses D3's `csv` loader to fetch data from a Coupang Redash API endpoint, stores the result in React state via a `useEffect` hook, and formats the summary with `d3.csvFormat`. The interface relies on ReactDOM to render the final output to the page.

Sep 7, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, then displaying summary statistics about the dataset. It fetches a named CSS colors table and reports its size in kilobytes, row count, and column count in large text. The code uses D3 v7’s `d3.csv` method to retrieve and parse the file, and `d3.csvFormat` to calculate the data size. It also includes commented alternatives using the Fetch API and `d3.csvParse` for manual text handling.

Sep 7, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top ten countries by 2020 population as horizontal bars, with bar lengths scaled proportionally to population size. The visualization uses React state to manage data loading and rendering, while D3 utilities load the CSV dataset and compute the scales. Specifically, `d3.csv` fetches the UN population data, `scaleBand` positions each country along the y-axis, and `scaleLinear` maps population values to bar widths on the x-axis. The chart renders as SVG rectangles inside a React component, updating once the data arrives and displaying a loading message beforehand.

Sep 5, 2021

Loading thumbnail…

Pathetic Bar Chart

This example shows a bar chart of the top ten countries by 2020 population, with bars extending across the full viewport width. It loads data from a CSV file using D3’s `csv` utility and stores it in React state. The chart uses `scaleBand` for the y-axis countries, `scaleLinear` for the x-axis population values, and renders SVG rectangles via React. The graph lacks axes, labels, and spacing, making bars appear flush against one another and the screen edges, hence its “pathetic” description.

Sep 5, 2021

Loading thumbnail…

Rendering Data with React & D3

This example displays a pie chart of CSS named colors, with each slice filled using the color’s own RGB hex value. It loads the dataset via `d3.csv` and uses React’s `useState` and `useEffect` to manage asynchronous data fetching, rendering an SVG composed of `path` elements generated by `d3.pie` and `d3.arc`. The chart is centered within a fixed 960×500 viewport.

Sep 4, 2021

Loading thumbnail…

Visualizing Data with React & D3

This example displays the CSS named color palette as a full-screen stack of horizontal color bands, one per row. It loads a CSV of color names and hex values using D3’s `d3.csv`, stores the result in React state via `useState` and `useEffect`, and renders each row as a `div` with a background color set from the `RGB hex value` field. React 16.9 manages the conditional loading state, while D3 v7 handles the data fetching.

Aug 24, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each car as a circle on a scatterplot with origin on the x-axis and horsepower on the y-axis. Tooltips display the car model name. Built with React and the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldN`, and `vl.y().fieldQ` to create the chart, fetching data with `d3.csv`. The visualization is rendered to SVG via Vega-Lite with custom axis styling for readability.

Aug 21, 2021

Loading thumbnail…

Mouse follower

A filled circle follows the mouse in real time across a full-screen SVG canvas. The application is built with React (using `useState` and `useCallback` for state management and event handling) and renders the circle as an SVG `<circle>` element. The circle's `cx` and `cy` coordinates update directly from the mouse's `clientX` and `clientY` values, with its position reset to the viewport's center on initial load. No external data is involved; the visualization responds solely to user input.

Aug 16, 2021

Loading thumbnail…

Smileyface Part 1

The visualization displays a grid of eighteen smiley faces, each with randomized eye and mouth sizes. Constructed using React components for a face container, background circle, eyes, and mouth, it renders SVG circles and a D3 arc path. The `d3.arc` API generates the mouth’s shape, while `d3.range` creates the array of faces, and ReactDOM renders them with varying prop values.

Aug 13, 2021