Skip to main content
SimilarExport ZIP
100%

2015 Seattle House Galaxy

✓ Published0🌍 Public
Aarths-glitch
Last edited May 30, 2020
Created on May 30, 2020

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.

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

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
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
86% 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
85% 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
84% 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
82% match
Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between a house’s year built and its price. The x-axis represents the year of construction, while the y-axis shows the selling price. The code loads a CSV file using `d3.csv`, maps the data, and renders an SVG with `circle` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, using linear scales. The data is sourced from a gist file linked in the code.

Qq4428611@gmail.com
73% 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
73% match