Area Chart

100%

Area Chart - boston

✓ Published0🌍 Public

Last edited Apr 29, 2024

Created on Apr 29, 2024

This area chart visualizes the Boston housing dataset, showing the relationship between the average number of rooms (RM) and the median home value (MEDV) in thousands of dollars. The chart uses a steelblue filled area to depict the trend, with the data sorted by room count. Built with D3 v5, the visualization employs `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to render the SVG. Data is loaded asynchronously via `csv` from a GitHub repository, and axes and a legend are added manually within the SVG container.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart - boston

This pie chart visualizes the distribution of median home values (MEDV) from the Boston housing dataset, grouping prices into $10,000 increments to show frequency counts. Using D3.js v5, it employs the `pie` layout, `arc` generator for SVG paths, and `scaleOrdinal` for categorical color mapping. The chart renders within an SVG canvas, displaying segment labels and counts directly on the slices, with a legend positioned to the right. Data is fetched asynchronously from a raw GitHub CSV.

Aanushapodapati99@gmail.com

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

79% match

Loading thumbnail…

Boston

A pie chart visualizes the distribution of Boston housing prices, categorized into low, medium, and high ranges from the BostonHousing CSV dataset. The SVG chart uses D3.js v5, with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate colored slices and labels. Data is fetched via `d3.csv` and mapped from the `medv` column, with counts computed per category before rendering.

Mmailtomeanusha11@gmail.com

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

76% match

Loading thumbnail…

Housing Values At Boston Suburbs

This visualization displays summary statistics for the Boston Housing dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads a CSV file from a Gist URL using the `d3.csv` API, formats the data with `d3.csvFormat`, and presents the results in a large pre-formatted text element. The example demonstrates basic data loading and parsing with D3.js v5, sourced from the Boston Housing Data repository by selva86.

Yyuzhang21

75% match

Loading thumbnail…

Housing Values At Boston Suburbs

Yyuzhang21

75% match

Loading thumbnail…

This area chart displays the CRIM index for various towns in Boston. The visualization uses a filled area to represent the data values, with town names on the x-axis and the CRIM metric on the y-axis. Built with D3.js v7, the chart loads CSV data from a remote URL, parses it using `d3.csvParse`, and renders the area with a SVG path. The code employs `d3.scaleBand` and `d3.scaleLinear` for axes, with town labels rotated for readability.

TTejasree Reddy

74% match

Loading thumbnail…

Fork of areaChart

This example visualizes the Boston housing dataset, plotting crime rate (CRIM) per town using an area chart. The chart encodes the data with a steelblue filled area, where the x-axis lists town names (rotated for readability) and the y-axis scales CRIM values. Built with D3.js v7, it fetches a CSV, parses it with `d3.csvParse`, and uses `d3.area()` and `d3.scaleBand`/`d3.scaleLinear` to render the SVG path and axes. The code demonstrates a clean, reusable pattern for time-series-like comparisons across categorical labels.

Rranjithkmr598@gmail.com

74% match