Scatter Plot with Menus for Boston Housing Dataset

100%

Scatter Plot with Menus for Boston Housing Dataset

✓ Published1🌍 Public

Last edited Oct 2, 2019

Created on Oct 1, 2019

Forked from Polished Scatter Plot with Menus

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.

AI-generated description

A scatter plot of any two variables in Boston Housing Dataset.

In this dataset, the target variable is: "medv", which is the median value of owner-occupied homes. Because there are total 14 columns, we need to see the correlation among different variables to make sense of the data. Selection menus for both X and Y offers an excellent way for us to review the correlation between any two variables. Not only for the relationship to the target variable, but also for any pair of variables. In addition to X, Y channels, the point color is fixed to use "chas" variable, which indicates whether the house is near Charles river. And point size is mapped to "ptratio" - the pupil-teacher ratio of the town. Point transparency is set to 35% so that overlapping can be revealed by the darkness of the color. Also tooltips is set to target variable, which is the medium home value. Here we only allow menu to make changes to X, Y channels. But other channels can be changed in the similar way if we connect them with the menus.

The original data comes from the github: Boston Housing Data

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

93% match

Loading thumbnail…

Polished scatter plot with own data

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.

Mmartinbirch@outlook.dk

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

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

85% match

Loading thumbnail…

Fork of Boston Housing Dataset Part I

This visualization displays four scatter plots exploring correlations in the Boston Housing Dataset, with median home value (medv) plotted against lstat, pupil-teacher ratio, age, and industrial character (indus/nox). Each plot uses color and size encodings for additional variables, revealing relationships such as the strong negative correlation between housing price and lower-status population percentage. Built with the vega-lite-api library, the code fetches CSV data via d3.csv and renders interactive SVG charts with custom tooltips, axis styling, and a dark color scheme through the vega-tooltip handler and vega-lite configuration.

Llimenzi

83% match

Loading thumbnail…

Boston Weather Data with Menus

A scatter plot of daily Boston weather observations shows how users can select any two weather attributes from the dataset—such as temperature, humidity, wind speed, or snowfall—to compare and discover relationships. Two dropdown menus control which attribute maps to the x- and y-axes, updating the D3 linear scales and plotted circles accordingly. The chart uses React with D3 v5, reading the CSV data via D3’s `csv` function and rendering the plot as an SVG with custom axis and mark components.

JJacklyn Turner

81% match

Loading thumbnail…

Boston Housing Dataset Part II

This visualization explores the Boston Housing dataset by splitting it according to the `rad` variable (accessibility to highways), which clusters at values 1–8 or 24. Four scatterplots compare house price (`medv`) against `rad` and lower-status population percentage (`lstat`), with circle size encoding proximity to the Charles River (`chas`) and color indicating average room count (`rm`). Built with the `vega-lite-api` and rendered using Vega-Lite, the plots load CSV data from a Gist and are configured via a custom `config.js`. The author uses `vl.markPoint`, `vl.markSquare`, and `vl.markCircle` to distinguish the visualizations.

Yyuzhang21

80% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays U.S. metro area crime statistics, with dropdown menus letting users independently select which two attributes (e.g., violent crime, homicide, robbery, year) map to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear`, `extent`, `csv`, and SVG circles to render the marks. A color legend highlights specific values on hover. Data comes from a CSV file loaded via D3’s `csv` function.

Ssophburke

79% match