CS725 HW 4 BAR CHART

100%

CS725 HW 4 BAR CHART

✓ Published0🌍 Public

Last edited Feb 7, 2018

Created on Feb 7, 2018

This bar chart displays the frequency of foreign aid donations by 18 countries between 2000 and 2010, with bar heights mapped to donation counts and each bar colored via a rainbow sequential scale. The y-axis ranges from 0 to 60 with 15 ticks, while the x-axis lists country names. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleSequential` with `interpolateRainbow` for coloring. Data comes from a TSV file processed with OpenRefine.

AI-generated description

Built with blockbuilder.org

Jamie Gibbs

HW-4 Barchart

Bar Chart to Track Frequency of Foreign Aid Donations per Country

This bar chart was designed to show the number of times each country donated foreign aid between the years 2000 to 2010. I used OpenRefine to edit an excel spread sheet that contained the aid data. I then filtered out any countries that had less then 10 total donations and deleted all other information including dollar amounts, reasons for donation, aid ID, and the recipient of the aid until I had just the country names that donated and the total number of donations per country. I then converted it to a data.tsv file which is listed below.

Marks, Channels, Data Attributes and explanation of Bar Chart

The mark in this chart is a line. The chart has two channels which are mapped to two attributes. The vertical spatial channel is mapped to the Frequency of Donations attribute and the horizontal spatial channel is mapped to the Countries that Donated attribute. The Y-Axis or Frequncy of Donations attibute has 15 tics running from a range of 0 to 60. The X-Axis displays the Countries that Donated attribute and has 18 different countries labeled each with donations, from 10 for Australia, up to 58 for the United States. Each country's bar represents a different color of the rainbow.

Insights

Some of the countries with frequent donations really surprised me like Spain for example They have a lot of issues with their economy and high unemployment so I was surprised by the amount and frequency of their donations to other countries. I was further surprised by how infrequently the United Kingdom donated. I really thought they were more generous.

Links that helped in the making of this bar chart

https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateCool http://d3indepth.com/scales/ https://bost.ocks.org/mike/bar/

mit Licensed

Similar vizzes

Loading thumbnail…

bar

A horizontal bar chart displays population counts for six countries, with bars scaled linearly and labeled by country name. The visualization loads data from a CSV file and renders it as SVG rectangles with steelblue fill. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, appending axes and bars to a grouped SVG element within a 960×500 viewport.

HHillKinsh

75% match

Loading thumbnail…

Making a Bar Chart

A bar chart displays population estimates for thirteen countries and two placeholder entries, with bars sized by population and colored on a red gradient. Hovering over a bar updates an HTML overlay with the country name and value. A green circle toggles an animation that transitions all bar widths between zero and their original lengths using a custom `transitionWidth` function. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `.transition()`, with SVG rendering and data loaded from a local CSV file.

Jjonsch1

74% match

Loading thumbnail…

bar

A horizontal bar chart displays population figures for ten countries, sorted by value, with each bar’s length proportional to its population. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles and axes. Data is loaded from a CSV file and parsed with `csv`. After initial rendering, the chart animates by applying a `transition` with a staggered `delay` to reposition the bars, though the animation targets undefined scales and does not visibly alter the chart.

Aabcz1234

74% match

Loading thumbnail…

Making Bar Charts

A horizontal bar chart displays population figures for ten countries, with bars sorted alphabetically by country name. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load data from a local CSV file. Data values are converted from strings to numbers and scaled to fit an SVG canvas, with custom tick formatting replacing "G" with "B" for billion. The chart renders blue rectangles via SVG, with margins applied to accommodate axis labels, and removes default domain lines from the y-axis.

Mmesclics

74% match

Loading thumbnail…

Bar chart hw1

This bar chart displays the population of ten countries, sorted by country name, with horizontal bars scaled by population in thousands. It uses a linear population scale and a band scale for countries, rendering via SVG through D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The axis labels and tick formatting use `format('.3s')` to abbreviate large numbers. The visualization loads data from a CSV file using D3’s `csv` function, then applies the scales and axes to draw the chart with a clear margin-based layout.

王王神鐸

74% match

Loading thumbnail…

HW 4 Line chart

This line chart shows the total amount of United States foreign aid spending per year from 2002 to 2010, highlighting a sharp increase in 2009–2010. The chart uses a single teal line connecting points, with a time-scaled x-axis for years and a linear y-axis for dollar amounts. It is built with D3 v4, using `d3.tsv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with SVG paths for rendering.

LLecy277

74% match

Loading thumbnail…

S18 - HW 3 - Bar Chart

Two bar charts display the frequency of letters in English, with the first using a categorical color scale and the second using a color-saturation scale tied to frequency bins. The charts load tab-separated data with `d3.tsv`, map letter categories to `d3.scaleBand` positions and frequency values to `d3.scaleLinear`, and render SVG rectangles. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while bar colors are set via conditional logic in the `fill` attribute, using named CSS colors and hex codes.

LLecy277

74% match

Loading thumbnail…

Bar Chart

A bar chart displays population counts for four countries, with horizontal bars ordered by country name and a log-free linear scale. The visualization uses D3 v7’s `csv` loader to parse `data.csv`, `scaleLinear` and `scaleBand` for axes, and `axisBottom` with a custom tick formatter to abbreviate numbers. Rendered as SVG rectangles filled with steelblue, the chart maps population values to bar widths and country names to row positions, with axes and margins computed from the viewport dimensions.

Oorihash

74% match