Huaiyu Sun

@sunhuaiyu·5 public vizzes

World Population by Year

This visualization displays world population trends over time as an area chart, with the y-axis representing population in billions and the x-axis representing the year. It uses D3 v5’s `area` generator with `curveBasis` for smoothing, along with `scaleTime` and `scaleLinear` scales. The SVG rendering includes labeled axes and a title. Data is loaded from a CSV file via `csv` and processed by converting population values to numbers and years to `Date` objects.

Jun 19, 2021

Loading thumbnail…

Area Chart

This area chart visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses a green filled area beneath a blue line, rendered as SVG via d3. The code imports specific d3 modules including `area`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the visualization. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers. The chart includes styled axes, grid lines, and a title, with axis labels rotated for the y-axis.

Jun 19, 2021

Loading thumbnail…

Temperature of San Francisco

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The data comes from a CSV file loaded via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The chart is rendered using SVG, with scales created by `d3.scaleTime` and `d3.scaleLinear`, and the line path generated by `d3.line` with a basis curve. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and styling is applied via CSS classes.

Jun 18, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with position determined by d3.scaleLinear scales and axes rendered via d3.axisBottom and d3.axisLeft. The code loads data with d3.csv, parses numeric fields, and uses d3.select to append SVG circles. Axis labels and a title are added via appended text elements, with styling from CSS classes.

Jun 18, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the population of the top 10 most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. The visualization demonstrates customized axes: the y-axis labels are cleanly rendered without tick lines, while the x-axis uses a custom tick formatter to abbreviate numbers (e.g., converting billions to "B"). The chart is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and the `axisBottom` and `axisLeft` APIs to generate the axes. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population counts.

Jun 18, 2021