Skip to main content
SimilarExport ZIP
100%

Book LRND3 v4 Chapter 5

✓ Published1🌍 Public
Ssakhabutdinov
Last edited Jan 7, 2020
Created on Jan 4, 2020

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.

AI-generated description

Chapter5 of the book by Rinninsland and Teller

MIT Licensed

Similar vizzes

Loading thumbnail…

Book LRND3 v4 Chapter 5

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.

Ssakhabutdinov
96% match
Loading thumbnail…

EXPLORING BAR CHART

This interactive bar chart visualizes population data for ten countries, displaying values horizontally with a logarithmic scale. The chart uses D3 v5 to render SVG graphics, with mouseover effects that display tooltips showing country names and population figures. Users can click bars to select them, changing their color from green to pink, while the entire visualization updates with smooth transitions. The code references D3's scaleLinear, scaleBand, and axis functions, along with custom mouse event handlers adapted from a Medium tutorial.

GGuillamon
67% 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
67% 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
66% match
Loading thumbnail…

Making a Bar Chart

This bar chart shows the population distribution across age groups (from 0-4 to 95+ years) for a given population. Using D3.js version 5, it employs `d3.scaleLinear` and `d3.scaleBand` to map population values and age categories to the x and y axes, respectively. The SVG includes axes via `d3.axisLeft` and `d3.axisBottom`, with bars rendered as `rect` elements filled in steel blue. The data is loaded from a CSV file containing country and population columns.

Ttkreglhn
66% match
Loading thumbnail…

Q1 graphs

This interactive bar chart visualizes survey responses from incarcerated individuals, showing the percentage of "yes" answers for questions across five categories: Services, Procedure, Economics, Health and Well Being, and Interpersonal. Users select a category from a dropdown menu to filter and display the corresponding questions. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. It loads data from a CSV file and renders in an SVG, dynamically updating the bars and axes in response to menu selections.

CCurran Kelleher
66% 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
66% match
Loading thumbnail…

Population and age

An interactive bar chart displays population distribution across age groups for selected years, with a slider controlling the year from 2015 to 2019. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, and `scaleQuantile` for positioning and color encoding, with SVG rectangles animated via `transition`. Data is loaded from CSV files using `d3.queue` and `d3.csv`, while React state is not actually implemented despite the framework metadata.

Hhamzavg
66% match