100%

Add Interaction OR Iterate Your Work

✓ Published0🌍 Public

Last edited Feb 13, 2024

Created on Feb 13, 2024

This example shows a scatter plot of King County house prices from the kc_house_data CSV, plotting living area in square feet against the number of bedrooms. Hovering over the plot draws crosshair lines that track the mouse position, with the chart updating via a state-based pattern in D3 v7. The visualization uses `scaleLinear` axes from the `@RenoBlitz/responsive-axes` library, along with `selectAll` and `data` joins for rendering circles and lines. The entry point imports `select` from D3 and custom modules, while `observeResize` handles responsive dimensions. The dataset is imported from `@RenoBlitz/dataset01`.

AI-generated description

A simple scatter plot with D3 showing the kc_house_data

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Add Interaction OR Iterate Your Work

This scatter plot visualizes the relationship between the number of bedrooms and living area square footage in the kc_house_data dataset. The visualization uses d3.scaleLinear for both axes and d3.extent to compute the y-domain from the data. Interactive elements track the mouse position using d3.pointer, drawing hover lines across the plot to highlight coordinates. The code imports shared visualization utilities from @curran for axis rendering and resize observation, while circles are rendered with fixed radius and opacity.

JJingxuan Yang

88% match

Loading thumbnail…

Add Interaction OR Iterate Your Work

This interactive scatterplot shows the relationship between number of bedrooms and living area (sqft) for homes in a dataset. Hovering over the plot draws crosshair lines from the cursor to the chart’s margins, while the current mouse coordinates are tracked in state. The visualization uses D3’s `pointer` event handling and `ResizeObserver` to adapt to container size, with axes rendered via `axisBottom` and `axisLeft` from D3. The code structure emphasizes modular, iterable components for axes, labels, and rendering.

JJingxuan Yang

85% match

Loading thumbnail…

Make a Viz Responsive

This example demonstrates a responsive D3.js scatter plot that maps house sale data from the kc_house_data dataset, showing the relationship between the number of bedrooms and living area in square feet. The visualization uses D3's `scaleLinear` and `extent` functions to scale the axes and renders data points as circles with configurable radius and opacity. It leverages the custom `@RenoBlitz/responsive-axes` library and `observeResize` function to dynamically adjust the plot’s dimensions and axis labels based on the container’s size. The axes, labels, and inner rectangle background are all redrawn automatically when the viewport resizes, ensuring the chart remains legible at any screen width.

JJingxuan Yang

79% match

Loading thumbnail…

Fork of Simple Scatter Plot

This fork of a simple scatter plot visualizes housing data from the kc_house_data dataset, plotting bedrooms against living area in square feet. Each circle represents a house, with opacity and radius set to fixed values. Using D3’s `scaleLinear`, `axisLeft`, and selection methods, the visualization renders axes, labels, and points within a gray inner rectangle. The code imports data from a custom module and leverages helper functions like `xAxis` and `yAxisLabel` from the axis-labels library to assemble the chart.

JJingxuan Yang

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

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

73% match

Loading thumbnail…

Hovers

A hoverable scatterplot maps bedroom count to living area square footage, with each point rendered as a semi-transparent circle against a light gray plot background. As the pointer moves over the chart, the code updates the state with the current cursor coordinates and draws two black crosshair lines extending from the hover point to the axes. The visualization uses D3 7.8.5 with a ResizeObserver to adapt the SVG to the container dimensions, and it applies linear scales for positioning.

JJingxuan Yang

73% match

Loading thumbnail…

Interactive Scatter Plot for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, with dropdown menus to select X and Y axes. Points encode Charles River proximity via color and pupil-teacher ratio via size. Hovering over legend items filters and highlights matching points by adjusting opacity (20%, 50%, 80%). Built with React and D3 v5, it uses `scaleLinear` for positioning and size, `scaleOrdinal` for color, and SVG rendering. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Yyuzhang21

72% match