Fork of ice5.2

100%

Fork of ice5.2

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

Forked from ice5.1

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ice5.1

This bar chart compares house prices across different house sizes, with teal bars representing each category and rotated labels on the x-axis for readability. The visualization uses D3 v7 to load CSV data from a GitHub gist, scales the data with `d3.scaleBand` and `d3.scaleLinear`, and renders the chart as SVG. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the plot area measures 900 by 380 pixels with margins. The code directly binds the data to rectangle elements for each bar.

Kktvgs25@gmail.com

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

80% match

Loading thumbnail…

Fork of Scatter Plot

A scatter plot visualizes house sale prices over time, with each data point colored by property type and bedroom count. Interactive dropdown menus let users choose which columns to map to the X and Y axes. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and d3.transition with attribute tweening for animated circle placement. Data comes from a CSV file containing sale dates, median prices, property types, and bedroom counts.

Ddaniel

78% match

Loading thumbnail…

Fork of Data Visualization Homework 6: ThemeRiver

This visualization displays house property sales trends using a scatter plot, where each point represents a sales record from a CSV file, colored by property type and positioned by median house price (MA) over time. It uses D3 v5 with SVG rendering, including smooth animated transitions that move circles from the center to their final positions. The plot features axis labels, gridlines, and a categorical color legend built with `scaleOrdinal` and `schemeCategory10`. The visualization reads data from `ma_lga_12345.csv` and updates dynamically through a re-rendering function.

YYouSheng-Do

78% match

Loading thumbnail…

Fork of 2015 Seattle House Price data

This visualization displays 2015 Seattle house prices as a scatter plot, where each circle represents a house, with circle size encoding living area, color indicating floor count, and position mapping price against year built. It uses vega-lite-api to construct the chart, d3.csv for data loading, and vega-tooltip for hover interactions. The chart applies a logarithmic price scale, zero-suppressed year baseline, and semi-transparent circles to emphasize clustering patterns across the dataset.

BBrian Olczak

78% match

Loading thumbnail…

Fork of ICE4 cat face

This example shows a scatter plot of country data loaded from a remote CSV file, with circles positioned by country and region values and colored steelblue. The code uses D3 v6’s `d3.csv` to fetch and parse the dataset, then applies `d3.scaleLinear` for both axes and appends circles via `d3.selectAll().data().enter()`. SVG rendering is used, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Ggaddamthanmayeereddy759@gmail.com

78% match

Loading thumbnail…

Fork of Data Visualization ICE5

This example displays a web page titled “ICE 5” with a large heading, a summary message about a CSV dataset, and two static SVG images (a house and a human) positioned side-by-side. It loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s size in kilobytes, row count, and column count in a styled `<pre>` element. The page layout is built with custom CSS, including flexbox for the image row and colored backgrounds for text elements. React is listed as the framework, though the visible code uses plain HTML and JavaScript with D3.

RRevanthGrreddy

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

77% match