Fork of ICE-6 (airbnb)

100%

Fork of ICE-6 (airbnb)

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This scatter plot visualizes the relationship between accommodation cost and duration in days, with points colored by species (blue, yellow, or red). The data is loaded from a GitHub Gist CSV using D3 v6’s `csv` and parsed into numeric fields. The visualization uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and SVG `circle` elements with per-point `rx` and `ry` attributes. Axis labels are rendered as text elements, all within a full-window SVG.

Ppujitha532

80% match

Loading thumbnail…

Fork ofICE-6 Scatter Plot

This example visualizes the Iris dataset with a scatter plot that maps realSum on the x-axis and PetalWidthCm on the y-axis, coloring each point by species (blue, yellow, or red). It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG circles with `rx` and `ry` attributes that redundantly encode SepalLengthCm and SepalWidthCm. Data loads from a remote Airbnb CSV GitHub gist, with axes labeled "Petal_Length" and "Sepal_Length", and the visualization fills the browser window.

Pprathyusha-reddy-arch

79% match

Loading thumbnail…

AirBnb Data Visualized

This scatterplot displays the relationship between Airbnb listing prices and their reviews per month, with each circle representing a property. The visualization uses D3 v5 to load CSV data and render an SVG. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and appends circles with fixed radius to show the data points. The chart is titled "AirBnb Prices Vs Reviews Per month" and includes axis labels for clarity.

KKishore Thamilvanan

78% match

Loading thumbnail…

Fork of ice5.2

This example visualizes a scatter plot of housing data, with house size on the x-axis and price on the y-axis. Each circle represents a property. The visualization uses the D3.js library, specifically `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for axis rendering. The CSV data is fetched from a remote gist URL. The SVG rendering approach is employed, with circles appended to the SVG container. The code also applies margin conventions to structure the chart layout.

Kktvgs25@gmail.com

77% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

Animated scatter plot of Los Angeles museum attendance data, cycling through four different x-axis variables (Avila Adobe, Firehouse, Chinese American, and America Tropical) while mapping years to colored points. The visualization uses D3 v6 with a reusable `scatterPlot` module, SVG rendering, and `setInterval` to progressively swap the x-axis values. It includes a custom legend with year labels, axis labels, and a title, drawing from CSV data loaded via `d3.csv`.

SSravyaAnnadi

77% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring points by species (blue, yellow, red). It uses D3 v6 scales, axes, and SVG circles to render the data, with the interactive HTML page loading data from a remote CSV URL. The code also includes custom axis labels and larger tick text for readability.

MMgk1255

76% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This dashboard plots country-level data as a scatterplot, using x/y positions to represent two quantitative variables and point color to encode a third. Built with React and D3 v5, the visualization constructs SVG circles from a dataset of countries and marks them with a linear color scale. The code explicitly uses `d3.scaleLinear` to map data values to positions and colors, and `d3.extent` to compute the domain from the underlying CSV data. The page title and data values are rendered directly from the dataset, showing the integration of React’s declarative UI with D3’s quantitative mapping functions.

SSweetierams

76% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot- ICE7

This visualization shows an animated scatter plot of iris data, cycling through four different yield measurements on the x-axis while the y-axis remains fixed. Colored circles represent three sites (StPaul, Duluth, and Morris) with distinct colors, and the chart includes a legend, axis labels, and a title. The plot updates every few seconds using `setInterval`, swapping the x-value mapping among the dataset columns. It uses D3 v6 with the `csv` loader, `scaleLinear`, `axisLeft`, `axisBottom`, and custom reusable chart functions from `scatterPlot.js`, rendering SVG elements with animated transitions.

MMgk1255

75% match