let's make a bar chart.js

100%

let's make a bar chart.js

✓ Published1🌍 Public

Last edited Mar 15, 2020

Created on Mar 15, 2020

Forked from let's make a face with d3.js

This bar chart displays the annual number of asylum seekers arriving in Australia, broken down by country of origin from 1976 to 1995. The chart uses a horizontal bar layout where each bar’s length represents the refugee count for a specific origin in a given year. Built with React and D3 v5, the visualization relies on `d3.csv` to parse the data, `scaleLinear` for the x-axis value mapping, and `scaleBand` for the y-axis categorical placement. All rectangles are rendered as SVG elements within a 960×500 viewport, with bar heights determined by the bandwidth of the band scale.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Final Project: Mini Chart 3: Bar Chart Freq of Nationality_Vertical

This bar chart displays the frequency of asylum cases by nationality, with counts plotted along the y-axis and nationality categories along the x-axis. The visualization uses React with D3 v6 to render SVG elements, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the count values. Data is sourced from a CSV of Defensive Asylum cases, aggregated using `d3.nest()` to count cases per nationality. Custom React components (AxisBottom, AxisLeft, Marks) handle chart rendering, and the dataset is filtered to exclude specific entries before visualization.

GGeri D.

76% match

Loading thumbnail…

Final Project: Mini Chart 3: Bar Chart Freq of Nationality

This bar chart displays the frequency of nationalities among defensive asylum cases, with nationality on the y-axis and case count on the x-axis. The chart uses React with D3.js v6, employing `scaleBand` and `scaleLinear` for the axes and SVG `<rect>` elements for the bars. Data is aggregated from a CSV file using D3's `nest()` and `rollup()` functions, sourced from the United Nations World Population Prospects 2019. Tooltips reveal the exact count for each bar on hover.

GGeri D.

74% match

Loading thumbnail…

Metis Stacked Bar Chart - Refugees 2015

This stacked bar chart visualizes refugee asylum data from 2015, showing the total number of individuals granted affirmative asylum broken down by age group and their relationship to the principal applicant. The chart uses a vertical stacking of colored segments for each age category, with a legend identifying the relationship types. Built with D3 v4, the visualization employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack` to generate the stacked series from the CSV data. An ordinal color scale maps each relationship category to a distinct color, and the chart includes axes with labels and a legend, all rendered as SVG elements.

EElaineYu

73% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart comparing the populations of Australian cities, with each bar’s length proportional to the city’s population. The chart is rendered as SVG using D3 v5, with data loaded from a CSV file and scaled using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The bars are drawn by appending `rect` elements to the SVG, with their widths computed via the linear scale and heights from the band scale.

AAmanda Appiah

73% match

Loading thumbnail…

Making a bar Chart

This example displays a horizontal bar chart of country populations, with bars scaled proportionally to population values and country names on the vertical axis. It uses D3 v5 within a React-like structure, loading data from a local CSV file and rendering to SVG. The code employs D3’s `scaleLinear` for the numeric axis, `scaleBand` for categorical spacing, and `axisBottom` and `axisLeft` to generate tick marks and labels.

Ddamankwah

72% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the number of migrants from 14 countries, using data from a 2018 United Nations population estimate. The visualization sorts countries along the y-axis and represents migrant counts with horizontal bars on an SVG canvas. The code employs D3 v5’s `csv` loader to parse the dataset, `scaleLinear` and `scaleBand` for axes, and `axisLeft`/`axisBottom` for tick generation. Rects are appended to the SVG group, with axes stripped of domain lines for a cleaner presentation.

Ssucotton9

71% match

Loading thumbnail…

Bar chart

This bar chart visualizes the population of a region from 1950 to 2020, with each bar’s height corresponding to the population for a given year. The visualization is rendered as an SVG using D3 v5 within a React framework, loading data from a CSV file. The code employs D3’s `scaleLinear` and `scaleBand` for axes scaling and positioning, with `axisLeft` and `axisBottom` for the chart’s Y and X axes, respectively. Bars are drawn as `rect` elements filled with steelblue.

JJari Sedergren

71% match

Loading thumbnail…

Final Project: Mini Chart 2: Bar Chart Month Of Entry

This histogram displays the distribution of defensive asylum cases by the month of entry. Built with React and D3 v6, it uses `d3.histogram` to bin cases into monthly intervals, with `d3.scaleLinear` mapping the numeric month values to x- and y-axes. The SVG rendering includes custom axis components and purple bars, with tooltips showing the case count for each month. Data comes from a CSV file loaded via `d3.csv` from a GitHub gist.

GGeri D.

71% match