Polished scatter plot with own data

100%

Polished scatter plot with own data

✓ Published0🌍 Public

Last edited Apr 30, 2024

Created on Apr 29, 2024

Forked from Polished scatterplot with menus

This interactive scatter plot visualizes the Boston housing dataset, allowing users to explore relationships between different housing attributes through dropdown menus that control the x and y axes. The visualization uses React hooks to manage state and D3.js v5’s `scaleLinear`, `extent`, and `csv` methods to load and scale the data. Points are rendered as SVG circles with native `<title>` tooltips, while custom axis components draw ticks and labels, and the plot includes formatted abbreviations for axis values.

AI-generated description

A program that shows scatterplot of the iris dataset

Data: The Iris Dataset

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Scatter Plot with Menus for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, which includes 14 attributes such as crime rate, room count, and median home value. Users select any two variables from dropdown menus to map to the X and Y axes, while point color encodes proximity to the Charles River, size reflects pupil-teacher ratio, and 35% opacity reveals overlapping points. The visualization uses React with d3.scaleLinear and d3.scaleOrdinal for scaling, SVG for rendering, and fetches CSV data via d3.csv, with tooltips showing median home value.

Yyuzhang21

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

83% match

Loading thumbnail…

Polished Scatter Plot with Menus and Color

Interactive scatter plot of the MITx/HarvardX course dataset (a CSV loaded via `d3.tsv`) lets users select X and Y axes from dropdown menus built with `react-dropdown`. Each circle is colored by gender using a `d3.scaleOrdinal` with a three-color range. Axes are drawn with custom React components, and the chart state updates through React hooks like `useState` and `useEffect`, with SVG rendering.

Ssophburke

77% match

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, featuring dropdown menus that allow users to dynamically select which attributes to display on the x- and y-axes. The visualization uses React to manage state and render SVG elements, with D3.js (d3.v5) providing the scaling, axis generation, and data formatting utilities. Points are rendered as circles with tooltips, and the chart includes labeled axes and a clean, polished aesthetic. The data is loaded asynchronously from a CSV file using D3's `csv` function within a custom `useData` hook.

AAndrey Katamanov

77% match

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Boston Housing dataset, showing the relationship between the number of rooms and property tax rates. The visualization loads CSV data via D3's `d3.csv`, then scales both axes using `d3.scaleLinear` with `d3.extent` to determine domains. Circles are rendered with `d3.selectAll` and `.enter()`, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The chart is built with D3 v7, rendering SVG elements within a flex-centered container.

Vvaishalireddy55555@gmail.com

77% match

Loading thumbnail…

Polished Scatter Plot with Menus!!

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which attribute is mapped to the x-axis and y-axis. Built with React and D3.js (v6), it uses `scaleLinear` for axes, SVG circles as marks, and native tooltips for data values. The visualization updates state through React hooks, while `AxisBottom` and `AxisLeft` components render tick marks and labels using D3 scales.

AAndre J Denais

76% match

Loading thumbnail…

Boston Housing Dataset Part I

This visualization presents four scatter plots exploring relationships in the Boston Housing Dataset, focusing on median home value (medv) against variables like lower-status population percentage, pupil-teacher ratio, building age, and nitrous oxide concentration. The plots reveal correlations, such as the strong negative relationship between medv and lstat, while coloring points by additional attributes like indus or ptratio and sizing by the chas binary variable. Built with the vega-lite-api library and D3, the charts load CSV data from a GitHub Gist and render interactively with tooltips and a custom dark-themed configuration.

Yyuzhang21

76% match