Skip to main content
Log in
V

Vincent Ko

@forrany·7 public vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart shows the population of the top 10 most populous countries based on 2018 United Nations estimates, with countries on the y-axis and population values on the x-axis. It uses D3 v5 to load the CSV data, apply a linear scale for population and a band scale for countries, and render SVG rectangles with formatted tick labels via `axisBottom` and `axisLeft`. The chart is drawn inside an 800×480 SVG element with margins, and the axes are customized by removing domain lines and tick lines on the y-axis.

Mar 21, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population estimates for the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map population values and country names to the SVG canvas. Bars are rendered as SVG rectangles, with axes drawn to show the population scale and country labels. The chart is built with D3 v5 and styles the bars in steel blue.

Mar 21, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population estimates for the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map population values and country names to the SVG canvas. Bars are rendered as SVG rectangles, with axes drawn to show the population scale and country labels. The chart is built with D3 v5 and styles the bars in steel blue.

Mar 21, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population estimates for the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map population values and country names to the SVG canvas. Bars are rendered as SVG rectangles, with axes drawn to show the population scale and country labels. The chart is built with D3 v5 and styles the bars in steel blue.

Mar 21, 2019
Loading thumbnail…

Makeing a bar chart!

This bar chart displays population figures for ten countries, sourced from a CSV file. Each rectangle’s width corresponds to the population value, scaled linearly, while the y-axis uses a band scale for country names. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `select`, and `csv` to load data and render SVG rectangles.

Feb 17, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in SVG using D3.js, with circular eyes, rectangular eyebrows, and an arc-based mouth composed via the `d3.arc` helper. The face is centered by translating a group element to the middle of the viewport. The primary behavior is an animated eyebrow raise: the eyebrow group undergoes two sequential 2-second transitions using `transition.duration`, moving upward and then returning to its original vertical offset. The code demonstrates fundamental DOM selection, attribute setting, and chained transitions through D3's select and append methods.

Feb 17, 2019
Loading thumbnail…

Learn to draw smile with d3

This example demonstrates basic SVG shape drawing with D3, showing circles, rectangles, lines, and paths arranged to form a playful smiley composition. The code uses plain D3 selections to append SVG elements inside a `<g>` container with a scale transform, while CSS classes like `.lines` style the stroke properties. A video tutorial link accompanies the code, which uses D3 v3 to manipulate SVG attributes directly without data binding or advanced visualization techniques.

Feb 16, 2019