100%

Add Interaction OR Iterate Your Work

✓ Published0🌍 Public

Last edited Feb 13, 2024

Created on Feb 13, 2024

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.

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

91% match

Loading thumbnail…

Add Interaction OR Iterate Your Work

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`.

JJingxuan Yang

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

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

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

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

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

69% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Boston housing dataset, comparing median home values against various attributes such as room count, lower status population, and crime rate. Built with D3.js, the visualization cycles through these different x-axis variables every two seconds, dynamically updating the plot and axis labels. The chart uses SVG rendering and employs a custom, reusable scatter plot charting function that leverages D3's linear scales, extent, and axis utilities for data mapping and visual encoding.

Rranjithkmr598@gmail.com

68% match