Skip to main content
SimilarExport ZIP
100%

area chart

✓ Published0🌍 Public
TTejasree Reddy
Last edited Mar 27, 2025
Created on Mar 27, 2025
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Area Chart - boston

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.

Aanushapodapati99@gmail.com
74% match
Loading thumbnail…

Massachussetts Top 10 Crime city with margin and axis

This chart visualizes the top 10 Massachusetts cities with the highest crime rates using data from a CSV mapping city crime and population. A bar chart displays each city on the x-axis and its crime rate on the y-axis, with a linear scale correctly inverted to place larger values at the top. Built with React and D3 v5, the code uses `scaleLinear`, `scaleBand`, and `csv` to load and render data as SVG rectangles, alongside gridlines and axis ticks.

CCurran Kelleher
73% match
Loading thumbnail…

DV_Project_13

This dashboard displays Boston incident data through three interactive charts: a horizontal bar chart of the top ten offense types, an area chart showing incident distribution across the 24 hours of the day, and a pie chart of incidents by police district with percentage labels. Built with D3 v7, the code uses `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts respectively, and `d3.area` with `curveMonotoneX` for the hourly trend. A responsive CSS grid arranges the chart cards, with data loaded from a remote CSV file.

GGOPI MUPPURI
73% match
Loading thumbnail…

Boston Crime Reports

A map of Boston displays crime incident reports as semi-transparent circles, colored by the Uniform Crime Report (UCR) part via an ordinal color scale. A linked date histogram below the map shows the total number of incidents over time, with a brush that filters the map’s circles by date range. The visualization uses React, D3’s `geoAlbers` projection, `geoPath`, `scaleOrdinal`, and `brushX`. Data comes from Boston Crime Reports and neighborhood GeoJSON files.

GGeniXiong
73% match
Loading thumbnail…

Boston Crime Reports

This interactive visualization maps Boston crime incident reports by neighborhood, with points colored by Uniform Crime Report category. A linked time-series histogram below the map shows the total number of incidents over time and includes a brush that filters the map to a selected date range. The map uses a D3 geoAlbers projection with geoPath to render TopoJSON neighborhood boundaries, while React manages the state for the brush selection and color legend. Data comes from a CSV of Boston crime reports.

GGeniXiong
73% match
Loading thumbnail…

Use my own Mass Crime data

This example visualizes the ten highest-crime cities in Massachusetts as a simple column chart, with bars sized proportionally to each city’s crime ratio. The chart uses `d3.csv` to load the 2016 city crime dataset and `d3.scaleLinear` and `d3.scaleBand` for positioning, while rendering bars as SVG `<rect>` elements via React. The visualization omits axes and labels, focusing solely on the relative bar heights to compare crime rates across the selected cities.

Wwenleicao
72% match