forkforlinechart

100%

forkforlinechart

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from PIECHART

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

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

87% match

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays country crime indices as a line chart, using a bar-chart-style categorical X axis for countries and a linear Y axis for crime scores. Built with D3 v7, it loads data from a CSV file using `d3.csv`, applies a `scaleBand` for country positioning and `scaleLinear` for the crime index range, and draws the line with `d3.line()`. The SVG chart includes axes, labels, and a thick steel-blue stroke, rendered within a fixed 960×400 pixel canvas and styled with external CSS.

Bbhanuprasadk19

79% match

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes crime indices for ten countries, with each country plotted along a categorical x-axis and its index value on a linear y-axis. The visualization uses D3.js v7, loading data from a local CSV file via `d3.csv`. The chart is rendered as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path with a thick steelblue stroke. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`, while custom CSS styles the axes and line.

Bbhanuprasadk19

78% match

Loading thumbnail…

Fork of Fork of Fork of D3.js Line Chart

This line chart displays the Crime Index for ten countries, using a categorical x-axis and a linear y-axis scaled to the maximum value in the dataset. The visualization is built with D3.js v7, employing `d3.csv` for data loading and `d3.scaleBand` and `d3.scaleLinear` for coordinate mappings. A single SVG path is drawn with `d3.line`, with the line rendered in steel blue and a stroke width of six pixels. The chart includes labeled axes, with the data sourced from the embedded CSV file.

Bbhanuprasadk19

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

77% match

Loading thumbnail…

Fork of D3.js Line Chart

This chart visualizes the Crime Index across 22 countries, using a line to connect each country’s index value along a categorical x-axis. Built with D3.js v7, it loads data from a CSV file using `d3.csv` and renders an SVG line chart with band-scaled x positions and linear y scaling. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct axes, while drawing the line via `d3.line` and styling it with steelblue stroke attributes from CSS. Axis labels are added as SVG text elements.

NNikitha123171

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

75% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works before adjust axis

This interactive visualization displays the top 10 cities in Massachusetts by crime rate, filtered by community type (city, rural, or suburb) through a dropdown menu. Built with React and D3 v5, it renders an SVG bar chart using `scaleBand` and `scaleLinear` to map city names and crime ratios. The bars show tooltips with formatted percentage values, and the y-axis uses `d3.format` for readability. Data comes from a 2016 Massachusetts crime dataset loaded via `d3.csv`. The author notes unresolved issues with axis alignment and label rotation.

Wwenleicao

75% match