Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot

✓ Published0🌍 Public
Ddaniel
Last edited Oct 27, 2023
Created on Oct 27, 2023
Forked from 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.

AI-generated description

2023/9/22 daniel chen scatter plot with menus and colors An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

FP: Scatter Plot

FP: Scatter Plot is an interactive scatter plot of house sale data, rendered as an animated SVG visualization. Users can independently select which variable (price, bedrooms, bathrooms, or living area) is mapped to the x- and y-axes using two dropdown menus. The chart uses D3’s data join with a staggered 1-second transition to animate circles to their new positions when the axis mapping changes, and circles grow into view when first rendered. Both axes animate smoothly alongside the data, providing immediate visual feedback as the user changes the plot’s dimensions.

JJingxuan Yang
83% 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
79% 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
79% 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
78% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot displays the relationship between house size in square feet and the number of bedrooms, using data from a Boston Houses dataset loaded as a CSV. It first shows the positive correlation between the two variables, with each point representing a house. The visualization is built with D3 v7, using `d3.csvParse` to parse the data and `d3.scaleLinear` for the x and y axes, while SVG circles are appended to render the points. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Sshailajat1998@gmail.com
78% match
Loading thumbnail…

My Scatter Plot!

This scatter plot visualizes the relationship between ground living area and sales price for apartments, with each data point rendered as a semi-transparent green circle. The chart uses D3 v5’s `scaleLinear` for both axes, `extent` to compute domains, `axisLeft` and `axisBottom` for labeled axes with gridlines, and an SVG group to position the marks. Data is loaded from a CSV hosted on GitHub via `d3.csv`, with numeric conversion applied before rendering.

NNathan Cheever
78% match
Loading thumbnail…

Untitled

A scatter plot displays the relationship between ground living area in square feet and sale price for individual properties. Each black circle represents a home, with position encoding both variables along linear axes. The visualization uses D3 v4’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart in SVG within a React framework. Data loads from an external CSV file via `d3.csv`, plotting 1.5-pixel-radius circles without additional encoding.

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