Fork of Project Data Science

100%

Fork of Project Data Science

✓ Published3🌍 Public

Last edited Sep 20, 2022

Created on Sep 20, 2022

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.

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

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

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

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

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

75% match

Loading thumbnail…

Untitled

This visualization shows the distribution of housing types in a dataset as a pie chart, with each category represented as a slice colored by a pastel scheme. The code loads CSV data from a remote GitHub gist, counts occurrences of each property type (apartment, house, condo, etc.), and renders the results using the vega-lite-api library. It uses `markArc` for the pie slices, encodes color by the nominal type field, and applies a count aggregation for the theta angle. The chart includes tooltips and a title indicating the number of housing types.

JJaswitha09

74% match