Fork of areaChart

100%

Fork of areaChart

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

forkforlinechart

This line chart visualizes crime rates across different towns, using a filtered subset of the Boston housing dataset. The chart shows a single steelblue line connecting points for each town, with rotated x-axis labels for readability. The visualization is built with D3 v7, using `d3.csvParse` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and a `d3.line` generator to draw the path. The SVG is rendered directly in the browser, with margins and axes configured manually. The chart highlights per-town variation in per-capita crime, ordered alphabetically along the horizontal axis.

Rranjithkmr598@gmail.com

87% match

Loading thumbnail…

area chart

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

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

78% match

Loading thumbnail…

Scatterplot of Boston Crime Data

A scatterplot displays Boston crime data for theft-type offenses, plotting the hour of day on the x-axis against the offense code on the y-axis. Each grey, semi-transparent circle represents an individual crime, with opacity revealing overlapping points. The data loads from a CSV file and is processed via `d3.csv` with a parsing function that converts numeric fields. Using d3.v6, the visualization employs `scaleLinear` for the axes, `axisLeft`, `axisBottom`, and SVG `circle` elements within a full-window rendered chart.

LLeah Mitchell

76% match

Loading thumbnail…

Fork of Viz Function Concept

This dashboard visualizes Boston incident data from a CSV file using three D3.js v7 charts: a bar chart of offense types, an area chart showing hourly incident distribution, and a pie chart of incidents by district. The code uses `d3.rollup` to aggregate the data, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts, and `d3.area` with `d3.curveMonotoneX` for the hourly trend. Each chart renders as SVG within responsive cards that update their layout at different screen sizes.

BBharath kumar

76% match

Loading thumbnail…

Fork of Area Death's

This visualization displays the Crime Index across different countries using an area chart, with countries on the x-axis and crime index values on the y-axis. The code uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with `curveBasis` to render the smooth filled path in SVG. Data is loaded from a CSV via `d3.csv` and converted from strings to numbers and dates. The chart includes labeled axes, grid lines, and a red title, with orange fill styling applied through CSS.

NNikitha123171

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

75% match

Loading thumbnail…

Fork of Area Chart

This fork of an area chart displays yearly sales data from an embedded sample dataset using D3 v6. It renders a steelblue area path with an SVG canvas, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an `d3.area` generator. The chart includes labeled axes and axis ticks via `d3.axisBottom` and `d3.axisLeft`, with margins defining the plot area.

Nnishanththouta16@gmail.com

75% match