2015 Seattle House Galaxy

100%

2015 Seattle House Galaxy

✓ Published2🌍 Public

Last edited Sep 30, 2019

Created on Sep 20, 2019

This visualization presents 2015 Seattle house prices as an immersive 3D galaxy of glowing sprites, with position encoding price, square footage, and year built, while color represents number of floors. Using Three.js and D3 v5, it generates canvas-based circle sprites with radial gradients inspired by firefly cartography, rendered via WebGL at high pixel density for sharpness on HiDPI screens. The camera automatically rotates and supports drag-based panning to explore the ~7,000 data points loaded from a CSV file.

AI-generated description

A 3D scatter plot using Three.js and D3.

This variant uses the high pixel density Canvas technique described in Scaling HTML canvases for HiDPI screens.

Colors and gradient sprite idea inspired by Firefly Cartography.

This visualization shows 2015 Seattle House Price data (approx. 7,000 rows). It's really more of a test of the technique than a readable visualization. Performance remains decent at this number of sprites.

The data was originally visualized in this 2015 Seattle House Price data by GeniXiong.

MIT Licensed

Similar vizzes

Loading thumbnail…

2015 Seattle House Galaxy

The visualization renders approximately 7,000 rows of 2015 Seattle house price data as a three-dimensional scatter plot of glowing, color-coded sprites. Price, living square footage, and year built map to the x, y, and z axes, while floor count determines color. Built with D3 for data loading and scaling, and Three.js for WebGL rendering, it uses canvas-generated gradient sprites for high pixel density displays. Animated rotation is controlled via D3's zoom behavior, with a slow automatic pan.

Aarths-glitch

95% match

Loading thumbnail…

2015 Seattle House Galaxy

A 3D scatter plot visualizes 2015 Seattle house prices as a rotating galaxy of colored sprites, mapping year built, price, and square footage to spatial axes and floors to color. The Three.js scene renders approximately 7,000 canvas-generated gradient sprites on a WebGL canvas, scaled for HiDPI displays. D3 handles data loading, linear and logarithmic scaling, and category colors, while a d3.zoom interaction with restricted panning enables user rotation alongside continuous automatic animation.

Pprashant birajdar

95% match

Loading thumbnail…

2015 Seattle House Price data

This visualization displays 2015 Seattle house price data as an interactive scatter plot, where each circle represents a home. The x-axis maps year built, the y-axis shows price, circle size encodes living area in square feet, and color indicates the number of floors. The plot uses vega-lite-api to generate the chart, with data loaded via d3.csv from a GitHub-hosted CSV file. Custom axis styling and tooltips are configured through vega, vega-lite, and vega-tooltip, while the visualization renders as a fitted SVG canvas filling the browser window.

GGeniXiong

83% match

Loading thumbnail…

2015 Seattle House Price data

This visualization displays 2015 Seattle house prices as a scatter plot, where each circle represents a home. Circle size encodes square footage of living area, color distinguishes the number of floors, and position shows the relationship between year built and price (with a logarithmic price scale). The code uses the vega-lite-api to construct the chart, d3.csv to load the dataset, and vega-tooltip for interactive hover details. Styling is customized via a config object defined in a separate module.

CCurran Kelleher

83% match

Loading thumbnail…

Seattle House Price Scatter Plot with Menus

This interactive scatter plot visualizes 2015 Seattle house prices, with each circle representing a home colored by number of floors. Users select X and Y axes from dropdown menus to explore relationships between attributes such as year built, price, living area, and lot size. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components handle rendering. The data loads via D3’s `csv` parsing from a GitHub Gist.

GGeniXiong

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

79% match

Loading thumbnail…

2015 Seattle House Price

This example displays basic metadata about the 2015 Seattle house price dataset, showing its size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, which returns a promise, then formats the result with `d3.csvFormat` to calculate the byte size. The code also includes commented-out alternatives using `fetch` with async/await and `d3.csvParse`, illustrating different approaches to loading and parsing CSV data.

GGeniXiong

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

68% match