Skip to main content
SimilarExport ZIP
100%

2015 Seattle House Galaxy

✓ Published0🌍 Public
Pprashant birajdar
Last edited Sep 23, 2019
Created on Sep 23, 2019

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.

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
96% match
Loading thumbnail…

2015 Seattle House Galaxy

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.

CCurran Kelleher
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
82% 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
80% 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…

3D Scatter Plot

A 3D scatter plot displays data points from a CSV dataset, mapping three quantitative dimensions to x, y, and z axes while using color to distinguish categorical groups. The visualization uses Three.js with WebGL rendering to create and animate sphere sprites, and D3.js for data loading, linear scaling, and ordinal color mapping. Points are continuously rotated through a slow animation, and users can pan with mouse interaction to change the viewing angle. The scene uses a perspective camera with sprite-based circle markers for each observation.

Wwaqastufail
71% match