ZHIYI CHEN

@ZhiyiChen-shuai·3 public vizzes

The increment of airbnb over years

The visualization shows the growth of Airbnb listings in New York City boroughs from 2008 to 2020, using a bar chart where the y-axis displays borough names and the x-axis represents the number of houses. Users click year buttons to update the chart, which uses hardcoded data for each period. The visualization is built with React and D3 v6, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars with a yellow highlight on the selected year.

Dec 18, 2020

Loading thumbnail…

The increment of airbnb over years

This bar chart visualizes the increase in Airbnb listings over time, with each bar representing the total count for a given year. The visualization uses a React front-end with D3.js v6 for data loading and scaling, rendering as an SVG. It employs `scaleBand` for the x-axis (years) and `scaleLinear` for the y-axis (totals), with data fetched from a CSV file hosted on GitHub. The bars are drawn using SVG rectangles, and axes are constructed from custom components.

Dec 18, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React and d3.v5, with d3.scaleBand and d3.scaleLinear for positioning, and d3.csv for loading the dataset. Bars are rendered as SVG rectangles with embedded tooltips showing the population value formatted in billions via d3.format. The chart features a Poppins font, teal-colored marks, and styled axes with tick marks and labels.

Dec 16, 2020