Project Data Science

100%

Project Data Science

✓ Published2🌍 Public

Last edited Dec 31, 2021

Created on Dec 23, 2021

This visualization combines a scatter plot and a bar chart to explore Hanoi real estate data. The scatter plot shows price per square meter against distance to hospital, with point size encoding number of bedrooms; the bar chart displays counts of house types. Users can brush an interval along the x-axis of the scatter plot to filter the bar chart, or click a histogram bar to select a house type, which highlights matching points. Built using D3.js v7 and the Vega-Lite API, it loads CSV data from a GitHub repository and renders interactive selections via `vl.selectInterval()` and `vl.selectPoint()`.

AI-generated description

I try to use d3.js a very powerful and simple library for interactive visualization

In this viz, above is the scatter plot to show the relationship between area(m2) and price per m2. the below is the barplot of the number of each house type

We can use the interval select in scatter plot to select the interval(price per m2) and can click the mouse to select the type of house to view in the bar plot

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Project Data Science

This visualization, built with D3.js and the Vega-Lite API, combines a scatter plot and a bar chart to explore Hanoi real estate data. The scatter plot displays price per square meter against distance to a hospital, with point size encoding the number of bedrooms. A brushing interval selector on the x-axis filters the bar chart, while clicking a bar highlights a specific house type in both panels. The bar chart shows the count of each property type, with colors representing the categorical house types. The data is loaded from a remote CSV file, and the visual styling, including axis colors and guide fonts, is defined in a separate configuration module.

SStíofán ♔ Ó Conchubhair

90% match

Loading thumbnail…

Fork of Fork of Project Data Science

This visualization presents housing data from Hanoi, combining a scatter plot of price per square meter against distance to hospital with a bar chart of house type counts. An interval selection on the scatter plot’s x-axis filters both views by price, while a point selection on the bar chart’s color encoding filters the scatter plot by house type. Built with Vega-Lite API and d3.v7, it uses `vl.selectInterval` and `vl.selectPoint` for linked interactions. The custom color scale maps six house types, with point size encoding bedroom count. Data is loaded asynchronously from a GitHub CSV.

HHaili0109

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

70% match

Loading thumbnail…

Activity6_Q3

This scatter plot visualizes the relationship between square footage and price for real estate properties across various European cities, with each point colored by city and a tooltip revealing detailed property information. Built with D3.js v7, it renders as an SVG using `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `d3.schemeSet2` for color encoding, and interactive mouseover events to show tooltips. The visualization also includes a legend listing all cities, with data loaded from the local `data.csv` file.

Ggouthamigongidi2457@gmail.com

70% match

Loading thumbnail…

Activity6_Question3

This interactive scatter plot shows the relationship between square footage and price for real estate listings across multiple cities, with each city assigned a distinct color in a legend. Built with D3 v7 and SVG, the visualization includes labeled axes and hover tooltips that display property details. The code uses `d3.csv` to load the in-memory data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for city-based coloring. Circle elements represent individual properties, and mouseover events trigger a transition-based tooltip update.

Kkamalini.ponnuru11@gmail.com

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

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

69% match

Loading thumbnail…

ICE-7-Assignment-7

This scatter plot visualizes the relationship between average housing prices and square footage across 50 randomly generated data points. The visualization uses a blue circle for each data point, positioned along the X-axis for average price and the Y-axis for average square footage. The code constructs the chart using D3.js version 6, employing `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.select`/`d3.append` for SVG element creation. Axis labels are added to clarify the data dimensions.

Ssowmyakancharla01@gmail.com

69% match