Skip to main content
SimilarExport ZIP
100%

The increment of airbnb over years

✓ Published0🌍 Public
ZZHIYI CHEN
Last edited Dec 18, 2020
Created on Dec 17, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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.

ZZHIYI CHEN
90% match
Loading thumbnail…

The increment of airbnb over years

This bar chart shows the total number of Airbnb listings over the years, using a dataset from GitHub. The visualization uses React with D3 v6 utilities, employing `scaleBand` for the year axis and `scaleLinear` for the total counts. Data is loaded via `d3.csv`, and `Marks` renders the bars as SVG rectangles. The chart includes labeled axes, with the y-axis showing tick marks and grid lines, emphasizing the growth trend in Airbnb totals.

Vvlad
86% match
Loading thumbnail…

Air bnb

This visualization displays the top 10 most expensive Airbnb listings in New York City as a horizontal bar chart, using React to manage the component state and D3 v5 for scales, axes, and SVG rendering. The code loads CSV data via `d3.csv`, sorts by price, and slices the top 10 entries, then maps them to `scaleBand` and `scaleLinear` ranges. Bars are drawn as SVG `<rect>` elements with a red fill, while custom tick marks and labels are generated from the scales. The chart uses a light gray background and a simple title.

VVenkat-Dhulipalla
79% match
Loading thumbnail…

Customizing Axes

This interactive bar chart displays the number of employed people in New York City across various occupations for each year from 2010 to 2019. Clicking a year button updates the displayed dataset. The visualization uses D3.js with linear and band scales to map values, and axes are customized with tick formats and labels. SVG rectangles represent the data, and transitions animate the updates when switching between years.

Ttracy3057
74% match
Loading thumbnail…

Customizing Axes

This interactive bar chart shows the number of people employed in New York City across various occupations for each year from 2010 to 2019. Users click year buttons to update the visualization, which animates bar widths and the y-axis with smooth transitions. The chart uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, along with `transition` methods for the animation. Data is loaded from CSV files containing occupation and employment figures per year.

Ttracy3057
73% match
Loading thumbnail…

Customizing Axes

This interactive bar chart displays the number of employed people in New York City across 25 occupations, with buttons to switch between years from 2010 to 2019. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with `d3.axisBottom` and `d3.axisLeft` for custom ticks and gridlines. Data comes from local CSV files, and user clicks trigger redrawing of rectangles with updated scales. The SVG rendering includes custom tick formatting with `d3.format` to abbreviate large numbers.

Ttracy3057
73% match
Loading thumbnail…

Horizontal Bar Chart

This horizontal bar chart displays vaccination rates across five New York City boroughs, with radio buttons allowing viewers to switch between eight monthly time points from 2021 to 2022. The visualization uses D3 v7 scales and axes to map percentage values from 0 to 100 on the x-axis, with color-coded bars representing each borough. Interactivity is implemented through click event listeners that rebind bar width and label data based on the selected month. The SVG rendering includes background rectangles, axis groups, and text labels showing exact percentages.

Llinlinlin-yx
72% match
Loading thumbnail…

D3.js Bar Chart

This example displays two bar charts analyzing Airbnb listings in Boston. It shows the number of unique hosts per bed type and per cancellation policy, with each bar representing a category and the y-axis indicating host counts. The visualization uses D3.js v4, loading data from a CSV file with `d3.csv`, grouping entries via `d3.nest` and `rollup`, and counting unique host IDs with `d3.set`. Bar rectangles are appended to an SVG, with axes generated through `d3.axisBottom` and `d3.axisLeft`. The page also includes a separate React component drawing a panda face using D3 arc and ellipse shapes, though it is not integrated with the charts.

CChathurya
72% match