Loading CSV Data with D3

Loading CSV Data with D3

A bar chart displays the percentage of households below the poverty line for each Chicago community area, sorted in descending order. The visualization uses D3 v3 to load the CSV data with `d3.csv`, then sorts the records numerically using `d3.descending` and renders SVG rectangles whose widths are scaled by the poverty percentage, with a hover tooltip via a `title` element.

JJasonMcGregor

96% match

Loading CSV Data with D3

This example demonstrates how to load a CSV file into a web page using D3 v3’s `d3.csv` method. The page displays a static SVG canvas containing a blue line, a red rectangle, and a violet circle, while the CSV data for Chicago’s socioeconomic indicators is parsed into an array of JavaScript objects and logged to the browser console. No chart is rendered; the focus is solely on verifying successful asynchronous data loading and transformation.

JJasonMcGregor

77% match

CZC Make Bar Chart

This example renders a horizontal bar chart showing the percentage of the population living in poverty for ten countries. Using D3.js v5, it maps country names to the y-axis with `scaleBand` and poverty percentages to the x-axis with `scaleLinear`. The SVG graphic is built by appending rectangles whose width and y-position are computed from the data. Axes are added with `axisLeft` and `axisBottom`. Data is loaded from a CSV file, and the chart is drawn entirely with SVG elements.

Cchristine

73% match

Making a Bar Chart with D3

This horizontal bar chart displays counts of different housing situations, from rough sleeping to private housing, using a CSV data source. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data loads asynchronously via `csv`, then binds to rectangles with heights set by `yScale.bandwidth()` and widths proportional to each count, with maroon fills.

AAloysius

73% match

Chicago Fed Loans to Individuals (in millions)

This example shows a bar chart of Chicago Fed loans to individuals, with each bar’s length proportional to the loan amount in millions. The bars are sorted in descending order by loan value, and hovering reveals the corresponding year and score via a native SVG `<title>` tooltip. The visualization uses D3 v3 to load data from a CSV file, bind it to `rect` elements, and set each bar’s `width` attribute directly from the `individualloans` field. The rendering is done entirely with SVG, with no axes or scales, so the bars are positioned vertically in a simple stacked layout.

Chicago Fed Loans to Individuals (in millions)

This visualization displays Chicago Fed loans to individuals in millions of dollars as a horizontal bar chart, with each bar representing a year's value. The code uses D3 v3 to load data from a CSV file, sorts the values in descending order, and renders SVG rectangles whose widths correspond to the loan amounts. Hovering over a bar reveals a tooltip via the `title` element, showing the year and its corresponding loan figure. The data source is the ChicagoFDIC.csv file.

Chicago Fed Loans to Individuals (in millions)

Chicago Fed Loans to Individuals (in millions)