Yujin Chung

@marofmar·4 public vizzes

Bar Chart: 2018 Population Top11

This bar chart visualizes the 2018 population of the top 11 countries, with each bar’s length proportional to population size. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles scaled by population values. Data is loaded from a local CSV file, and population values are multiplied by 1000 to reflect the original source from worldpopulationreview.com. The chart is positioned using a margin transform, though only a subset of the layout is visibly styled.

Aug 9, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes, including formatting tick labels with `d3.format`, adding grid lines via tick sizing, and appending custom axis labels. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with data loaded from a CSV using `d3.csv`. Left axis ticks are removed to reduce clutter, and the x-axis tick format converts values to billions using an abbreviation.

Aug 9, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as SVG shapes uses green for the head, yellow strokes, and animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, building the face from circles, rectangles, and an arc-generated mouth while applying transitions to shift the eyebrow group. Code uses `d3.select`, `attr`, `transition`, and the `arc` generator, with a blue background set on the SVG.

Aug 8, 2019

Loading thumbnail…

SMILE DEAR

This example demonstrates the use of SVG vector graphics within an HTML page, rendering a simple scene with a blue background. The visualization is built using the D3.js library version 5, specifically utilizing the `d3.select` API to target the SVG element and apply styling. The code uses a fixed 960x500 pixel viewport and sets the background color through the `style` method. The project structure includes a separate CSS file that removes default margins, and a bundled JavaScript file (`bundle.js`) that contains the main logic. The SVG canvas provides the rendering surface for whatever graphics are defined in the script.

Aug 8, 2019