Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 9, 2025

Created on Apr 8, 2025

This circular packing chart visualizes Airbnb NYC listings, hierarchically nested by borough, neighborhood, and room type. The code uses d3.hierarchy, d3.pack, and d3.scaleOrdinal with d3.schemeSet3 to structure and color the data from AB_NYC_2019.csv. Interactive zooming via d3.transition and interpolateZoom allows navigation through the nested circles, while hover tooltips display the full path and listing count. Labels fade in and out during zoom transitions, and a legend identifies the three hierarchical levels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of Airbnb listings in New York City, organized by room type, borough, and neighborhood, with node labels sized by depth. It uses d3.tree and d3.hierarchy to compute the layout, d3.linkHorizontal for curved link paths, and d3.zoom for panning and scaling the SVG. The data comes from a JSON file containing house counts and average prices. Text shadows and a serif font improve readability, while node positions reflect the tree structure rather than geographic location.

SSourav Sarker

79% match

Loading thumbnail…

Fork of ICE-6 (airbnb)

This interactive scatter plot displays Airbnb listings based on distance to the city center and metro distance, with point color encoding species (Adelie, Gentoo, or other). Built with D3 v5, it loads CSV data and maps values to an SVG canvas using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Each point uses `circle` elements with a fixed radius, while custom labels, tick styling, and explicit axis titles highlight the plot. The visualization emphasizes geographic proximity patterns against guest satisfaction metrics from the Airbnb dataset.

Pprathyusha-reddy-arch

76% match

Loading thumbnail…

A Map for New York Airbnb

This map visualizes the distribution of Airbnb room types across New York City, with each circle representing a listing and color encoding room type. Hovering reveals the price via tooltip. Built with the vega-lite-api, it reads CSV data from a GitHub gist and renders an interactive scatterplot using latitude and longitude fields. The visualization uses vega-lite’s markCircle, d3.csv for data loading, and vega-tooltip for hover interactions, with a custom config to adjust axis and label styling.

XXinting Yao

74% match

Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot of housing data, mapping living area (GrLivArea) on the x-axis against sale price (SalePrice) on the y-axis. Each data point is rendered as a small green circle using D3.js selections and the `append("circle")` method. The visualization loads a CSV dataset from a remote URL via `d3.csv`, and constructs linear scales with `d3.scaleLinear` to position the circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`. The plot is embedded within an HTML page styled with large, centered text.

Mmuzzheng

73% match

Loading thumbnail…

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.

ZZHIYI CHEN

73% match

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Boston Housing dataset, showing the relationship between the number of rooms and property tax rates. The visualization loads CSV data via D3's `d3.csv`, then scales both axes using `d3.scaleLinear` with `d3.extent` to determine domains. Circles are rendered with `d3.selectAll` and `.enter()`, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The chart is built with D3 v7, rendering SVG elements within a flex-centered container.

Vvaishalireddy55555@gmail.com

73% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

73% 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

73% match