Book LRND3 v4 Chapter 5

100%

Book LRND3 v4 Chapter 5

✓ Published0🌍 Public

Last edited Jan 13, 2020

Created on Jan 8, 2020

This interactive chart shows the UK prison population from 1900 to 2013, using animated bar charts to illustrate changes over time. Buttons allow users to jump between historical periods, with bars highlighting specific years (e.g., wartime) and text providing context. The visualization is built with D3 v5, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with transitions animating bar height and position. Data is loaded from a CSV file via a custom `csvParse` function, and UI elements are added programmatically.

AI-generated description

Chapter5 of the book by Rinninsland and Teller

MIT Licensed

Similar vizzes

Loading thumbnail…

Book LRND3 v4 Chapter 5

This interactive bar chart visualizes the UK prison population from 1900 to 2015, with buttons that let users explore different historical periods (e.g., 1900–1930, 1930–1960). Predefined selections highlight notable years, such as 1993, alongside explanatory text for each era. Built with D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.transition` for animated updates of bar positions and heights, driven by data from `uk_prison.csv`. Buttons load scenes defined in `data.json`, triggering zoom-like range changes and timed transitions.

Ssakhabutdinov

96% match

Loading thumbnail…

Fork of Area Chart of Uk Population

This fork of an area chart displays the population of the United Kingdom as a curve, but the data loaded from `data.csv` actually contains a list of countries and their crime indices, which are multiplied by 1000. The chart plots these values over time, using a smoothed basis curve to create both a line and a filled area beneath it. The visualization is built with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with the SVG output styled via an external CSS file.

NNikitha123171

69% match

Loading thumbnail…

Fork of Area Chart of Uk Population

This example displays the Crime Index of various countries as a smooth area chart, overlaid with a black line for emphasis. Although the heading references UK population, the data comes from an external CSV file. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.area with d3.curveBasis to generate the filled SVG path. Axis ticks are styled with a custom orange color via CSS.

NNikitha123171

67% match

Loading thumbnail…

Fork of Area Chart of Uk Population

This fork of an area chart displays UK population growth from 2010 to 2023, with annual values loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear` and `scaleTime` for axes, `line` and `area` generators with a `curveBasis` smoothing, and renders to SVG. The chart includes labeled axes, gridlines, and a styled area fill, with population values formatted using D3’s `format` function.

VVineela Reddy

66% match

Loading thumbnail…

Final Project Criminality Line Graph

This line chart displays arrests based on criminality by fiscal year, comparing convicted criminals and non-criminals from 2010 to 2025. The red line represents convicted criminals, while the blue line tracks non-criminals, revealing divergent trends over time. The visualization uses D3.js APIs including `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` to load data from the CriminalityLineChart.csv file, scale axes, and generate the SVG paths. Hoverable points and a legend enhance interactivity, while the animated SVG rendering context supports dynamic exploration.

Rronnieferrufino4908@gmail.com

65% match

Loading thumbnail…

Q1 graphs

This interactive bar chart visualizes survey responses from incarcerated individuals, broken down by category (Services, Procedure, Economics, Health and Well Being). A dropdown menu lets users switch between these categories, updating the displayed questions and their corresponding "Yes" percentages. The chart uses a horizontal bar layout where each bar represents a survey question, with length proportional to the affirmative response rate. Built with D3 v5, it leverages `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and `axisLeft`/`axisBottom` for axes, rendering as SVG.

EEvan Misshula

65% match

Loading thumbnail…

D3 Exercise - Bar Chart

This bar chart displays population figures for a country from 2014 through 2019, with the values scaled to represent thousands. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` to map populations to horizontal bars, while `axisLeft` and `axisBottom` generate the chart’s axes. Data is loaded from a CSV file and rendered as SVG rectangles, with the bars colored steelblue and text labels in grey.

Ddavidvanr21

65% match

Loading thumbnail…

Area_Chart_Question2

This area chart displays the population of the United Kingdom from 2010 to 2023. The visualization uses D3.js v5 to render an SVG with a time-scaled x-axis and a linear y-axis for population counts. The chart features a smooth basis-curve line and a filled area beneath it, with data loaded from a local CSV file. Axis labels, tick formatting, and chart styling are all handled through D3's scale, axis, and shape-generator APIs.

Nnaveen.dodda4321@gmail.com

65% match