Kelvin Yuen

@kelvin127·6 public vizzes

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, with countries listed along the y-axis and population values on the x-axis. The chart uses D3 v5 scales, including `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with custom axes created via `axisBottom` and `axisLeft`. The x-axis tick labels are formatted using `format('.3s')` to abbreviate large numbers like billions, while grid lines extend across the plot. Country data comes from a CSV file, and the SVG rendering showcases customized axis labels and styling.

Sep 20, 2019

Loading thumbnail…

Create a bar chart

This bar chart displays estimated 2018 populations for ten countries, using data from the United Nations World Population Prospects 2017, with values in thousands of people. The visualization uses an SVG rendered with D3 v5, employing `d3.csv` to load the data, `scaleLinear` for the x-axis, and `scaleBand` for the categorical y-axis. Bars are appended as `rect` elements, with axes generated via `axisLeft` and `axisBottom`.

Sep 20, 2019

Loading thumbnail…

Lego Sets by Year from Rebrickable

This example visualizes the cumulative number of Lego sets released each year, sourced from Rebrickable. A bar chart shows the running total of sets over time, with a time-scaled x-axis and a linear y-axis. The visualization uses D3 v5, specifically `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, to render SVG rectangles. Data is loaded as CSV and parsed into JavaScript `Date` objects, with bars drawn using D3’s data join and attribute setters.

Sep 18, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black eyes, eyebrows, and a curved mouth forms a simple face on an SVG canvas, centered via a D3-selected group. The eyebrows animate upward and back down using chained `transition.attr` calls over two two-second intervals. The mouth is drawn with the `d3.arc` path generator, while all shapes are appended and styled through D3 v5’s selection and attribute methods.

Sep 17, 2019

Loading thumbnail…

Worldwide Earthquake Multi Chart

This multi-chart visualization displays worldwide earthquake data over time, plotting yearly counts across four magnitude categories. The primary chart shows a yellow line representing earthquakes of magnitude 5–5.9 using d3.line with curveBasis smoothing. The visualization processes CSV data loaded via d3.csv, converting year strings to Date objects and numeric fields for analysis. Scales are created using d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axes rendered using d3.axisBottom and d3.axisLeft. The SVG rendering approach uses D3 v5 selection and append methods to build the chart structure.

Sep 17, 2019

Loading thumbnail…

Worldwide Earthquake stats 2000-2015

This visualization displays worldwide earthquake statistics from 2000 to 2015, comparing the annual frequency of earthquakes across four magnitude categories (5.5–5.9, 6–6.9, 7–7.9, and 8.0+). The chart uses four smoothed line series via d3.line with curveBasis, rendered as SVG paths, with each line color-coded by magnitude bracket. The axes are generated using d3.axisBottom and d3.axisLeft, and the data is loaded from a CSV file using d3.csv. The chart emphasizes relative trends and peaks in seismic activity over the fifteen-year period.

Sep 17, 2019