Skip to main content
SimilarExport ZIP
100%

Add Interaction OR Iterate Your Work

✓ Published0🌍 Public
JJingxuan Yang
Last edited Feb 13, 2024
Created on Feb 13, 2024
Forked from Axes with Hover

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.

AI-generated description

Adding a hover effect to the inner rectangle to extend lines from the cursor to the axes.

Challenge

  • Show the hovered numbers in place of tick marks on the axes themselves.
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
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
85% 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
78% 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
74% 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…

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
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
70% 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
70% match