CHOI SEUNG HYUN

@audidas·7 public vizzes

Making a Scatter Plot

This example renders the Iris dataset as a scatter plot using React components and D3 scales. The visualization displays sepal width on the x-axis and sepal length on the y-axis, with each data point represented as a rectangle mark. The code constructs axes using D3’s `scaleBand` and `scaleLinear`, formats tick labels with `format`, and loads data via D3’s `csv` utility. SVG rendering is handled through React, with styling applied via CSS classes.

May 18, 2022

Loading thumbnail…

Stylized Bar Chart

This example shows a stylized horizontal bar chart ranking the ten most populous countries in 2020, with country names on the y-axis and population on the x-axis. The chart uses React to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning bars and axes, and `format` to abbreviate tick labels. Data is loaded asynchronously from a CSV file using `csv` and `useEffect`. The Poppins font and muted color palette give the visualization a polished, modern aesthetic.

May 18, 2022

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population for 2020, rendered as SVG via React components. It loads CSV data from a GitHub-hosted file using D3’s `csv` utility, then defines separate axis and mark components (`AxisBottom`, `AxisLeft`, `Marks`) that leverage D3’s `scaleBand` and `scaleLinear` for positioning. The chart uses React’s state and `useData` hook to fetch and transform the data, displaying a loading message until the data arrives.

May 18, 2022

Loading thumbnail…

Margins and Axes

A bar chart displays the ten most populous countries for 2020, using horizontal bars to compare population sizes. The visualization loads data from a CSV file using `d3.csv` and renders SVG elements via React components. D3 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, position the bars and generate tick marks. A margin object defines the chart’s layout, with the left margin accommodating country labels.

May 18, 2022

Loading thumbnail…

The Margin Conven

A bar chart displays the top ten countries by 2020 population from a UN dataset, loaded via D3’s `csv` utility and rendered as SVG rectangles. The visualization uses React’s `useState` and `useEffect` hooks to fetch and parse the data, while D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates within a fixed margin. The chart updates once data arrives, initially showing a loading message in a `<pre>` element.

May 18, 2022

Loading thumbnail…

Making a Bar Chart with React & D3

This visualization displays the top 10 countries by 2020 population as horizontal bars, with the bar lengths proportional to population values. The React component fetches CSV data from a GitHub-hosted UN Population dataset using D3's `csv` utility. React's `useState` and `useEffect` hooks manage the asynchronous data loading, while D3's `scaleBand` and `scaleLinear` map countries to y-coordinates and populations to bar widths, respectively. Each `<rect>` element renders directly into an SVG canvas via ReactDOM.

May 18, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

May 17, 2022