London Borough Profiles Small

100%

London Borough Profiles Small

✓ Published0🌍 Public

Last edited Mar 23, 2015

Created on Mar 22, 2015

This bar chart visualizes population estimates for London’s boroughs using a simple horizontal layout, with each bar’s width proportional to its population value. The population data is loaded from a local CSV file via `d3.csv`, then sorted and scaled using `d3.scale.linear` to map values to pixel widths. Bars are rendered as styled `div` elements inside a `.chart` container, with counts displayed as text labels. The example uses D3 v3 and relies directly on the CSV’s `pop` field, sourced from the London Borough Profiles dataset under the UK Open Government Licence.

AI-generated description

Similar vizzes

Loading thumbnail…

London Borough Profiles

This visualization displays employment trends across London boroughs from the London Borough Profiles dataset, with each borough shown as a separate small-multiple area chart. The code uses d3.csv to load data, d3.nest to group by borough, and d3.time.scale and d3.scale.linear for axes. Each SVG chart renders an area and line path using d3.svg.area and d3.svg.line, with text labels identifying each borough.

SSassOnTheRoad

87% match

Loading thumbnail…

Population Density of London Boroughs

The scatterplot shows the population density of London boroughs by plotting each borough's population (x-axis) against its area in hectares (y-axis) as animated circles that drop into place. The visualization uses D3 v3 to read the CSV data, applies linear scales for both axes, and employs the `d3.csv` parser and `d3.svg.axis` for the chart. Each circle is rendered as an SVG element, with a hover effect that turns it CornflowerBlue. Data is sourced from data.london.gov.uk, and the animation uses sequential delays to drop the circles over two seconds.

SSassOnTheRoad

79% match

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates a bar chart of deliberate fires per London borough for February 2015, sorted in descending order. It uses D3.js v3 to load a CSV file with `d3.csv`, bind the data to SVG groups, and render red rectangles whose widths are scaled by fire counts. Borough names and values are added as SVG text elements, with hover interactions toggling a CSS class that darkens bars and bolds labels. The chart is drawn from the external file `londonfiresfinal.csv`, with all styling and layout handled through inline attributes and stylesheet rules.

BBenHeubl

74% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Ssheafallick

73% match

Loading thumbnail…

Population Bar Graph

This population bar graph displays county population data using a vertical bar chart. The chart encodes each county’s population with the height of a steelblue bar, which turns brown on hover. Built with D3 v4, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` elements for the bars. The data is loaded from a remote CSV file via `d3.csv`.

MMTClass

73% match

Loading thumbnail…

bars!

A horizontal bar chart displays population estimates for ten countries, with bars sorted alphabetically by country name and lengths scaled to population values. The visualization loads data from a CSV file and multiplies the population column by 1,000 during preprocessing. Using D3 v5, the code applies `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and renders bars as SVG rectangles with `axisLeft` and `axisBottom` for tick labels. The chart includes margins and padding, with a fixed width of 960 pixels and height of 500 pixels.

AAveryBurke

72% match

Loading thumbnail…

Countries Population Visualization

This visualization shows the population of various cities using a horizontal bar chart, with each bar’s length proportional to the city’s population. The data is loaded from a CSV file and rendered as SVG rectangles using D3 v5’s `scaleLinear`, `scaleBand`, and `csv` methods. The chart displays the city names on the y-axis and population values on the x-axis, with bars styled without axis labels or gridlines.

Jjohnni2

72% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for 18 countries, with each bar’s length representing population in thousands and countries ordered along the vertical axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to pixel coordinates, while `axisLeft` and `axisBottom` generate the labeled axes. Population data is loaded from a CSV file via `d3.csv`, and rectangles are appended to an SVG canvas, styled with a purple fill. The chart’s margins and inner dimensions are computed dynamically from the SVG’s width and height attributes.

Yyktan89

72% match