Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Project Data Science

✓ Published0🌍 Public
HHaili0109
Last edited Dec 1, 2024
Created on Nov 30, 2024

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.

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
92% match
Loading thumbnail…

Project Data Science

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

Kkhongtrunght
90% 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
76% 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
74% match
Loading thumbnail…

Fork of ice5.2

This example visualizes a scatter plot of housing data, with house size on the x-axis and price on the y-axis. Each circle represents a property. The visualization uses the D3.js library, specifically `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for axis rendering. The CSV data is fetched from a remote gist URL. The SVG rendering approach is employed, with circles appended to the SVG container. The code also applies margin conventions to structure the chart layout.

Kktvgs25@gmail.com
74% match
Loading thumbnail…

Fork of 2015 Seattle House Price data

This visualization displays 2015 Seattle house prices as a scatter plot, where each circle represents a house, with circle size encoding living area, color indicating floor count, and position mapping price against year built. It uses vega-lite-api to construct the chart, d3.csv for data loading, and vega-tooltip for hover interactions. The chart applies a logarithmic price scale, zero-suppressed year baseline, and semi-transparent circles to emphasize clustering patterns across the dataset.

BBrian Olczak
74% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between square footage and price, with each point representing a property and tooltips revealing the property type. Built using the Vega-Lite API, it loads CSV data from a GitHub gist and renders an interactive scatterplot. The code registers Vega and Vega-Lite, then configures the visualization with custom axis styling, a point mark with size and opacity settings, and a tooltip handler for interactivity.

JJaswitha09
73% 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
72% match