Ji Won Yeom

@JiwonYeom·9 public vizzes

Fork of Stylized Bar Chart

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width, with each flower species represented by a circular mark. The chart uses React components to render SVG axes and marks, with d3.scaleLinear handling both spatial scales. D3’s csv loader parses the data, while the d3.format function applies abbreviated tick labels. The visualization demonstrates a clean, styled layout with labeled axes and a tooltip showing the sepal length value on hover.

Jan 26, 2022

Loading thumbnail…

Stylized UN Data

A stylized bar chart displays the populations of the top ten countries from the UN Population 2019 dataset. The visualization uses React to manage state and render SVG elements, while D3's `csv` method loads the data, `scaleBand` positions the country names, and `scaleLinear` maps population values. Custom React components for axes and marks create a clean, minimal layout with left-aligned labels and light gray grid lines.

Jan 26, 2022

Loading thumbnail…

UN Data

This bar chart visualizes the 2020 population estimates for the top 10 countries from the UN Population dataset. Each bar represents a country, with length proportional to population, and the country names are listed on the y-axis to facilitate comparison. The visualization is rendered as SVG using React, with D3's `scaleBand` and `scaleLinear` for coordinate mapping. The code loads the CSV data with `d3.csv`, and the components (`AxisBottom`, `AxisLeft`, `Marks`) generate the chart elements, with React state managing the data lifecycle.

Jan 26, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using rectangles sized by population. The chart loads United Nations World Population Prospects 2019 data via `d3.csv`, then renders SVG bars with React, ReactDOM, and D3 v5. The code uses `scaleBand` for the y-axis positioning and `scaleLinear` for the widths, while `useState` and `useEffect` manage the asynchronous data loading.

Jan 25, 2022

Loading thumbnail…

Loading Data with React & D3

This example visualizes 148 CSS named colors as slices of a pie chart, with each slice filled using the color’s RGB hex value from a CSV dataset loaded via `d3.csv`. The React component uses the `useState` and `useEffect` hooks to fetch the data asynchronously and display a “Loading” message until it arrives. Once loaded, the code builds the chart using D3’s `pie()` and `arc()` generators, rendering SVG paths within a React-managed `<svg>` element. The visualization highlights the integration of D3’s data-loading and layout utilities with React’s declarative state management.

Jan 24, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot Walmart store data, showing the relationship between unemployment rate and weekly sales, with points colored by holiday flag. The scatter plot encodes quantitative fields for both axes and uses a tooltip to display the weekly sales value for each point. The code registers Vega-Lite with a custom configuration for axis styling, loads the dataset via d3’s `csv` function, and renders an SVG that automatically fits the window size.

Jan 24, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by fetching the CSS Named Colors dataset from a GitHub gist and displaying summary statistics about it. The visualization shows the file size in kilobytes, the number of rows, and the number of columns in a large text display. It uses d3.csv to load the remote CSV file asynchronously, then d3.csvFormat to measure the data size. The code also includes commented alternatives using the Fetch API with async/await and d3.csvParse, illustrating different approaches to handling the same data-loading workflow.

Jan 23, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors. It fetches the data from a remote GitHub gist URL using the browser’s built-in `fetch` API with `async` and `await` syntax, then parses the raw text into a tabular format with `d3.csvParse`. The visualization outputs the number of rows, columns, and the file size in kilobytes to the console, highlighting the basic step of converting external data into a structured format for further use in D3 v5.

Jan 23, 2022

Loading thumbnail…

smileyface

A grid of yellow smiley faces is rendered as scalable vector graphics, each face constructed from a black-outlined circle, two eyes, and a pair of curved mouth arcs. The React code composes these facial features from separate component files, using D3's `arc` generator to define the mouth paths with varying radii and stroke widths. Each face is randomly assigned eye radii via `Math.random`, creating slight variation across the repeated 18-face layout, all positioned within an SVG canvas.

Jan 22, 2022