Gist c22c3354ee89f6f6c8d7c1f9358e6299

100%

Gist c22c3354ee89f6f6c8d7c1f9358e6299

✓ Published0🌍 Public

Last edited Feb 17, 2018

Created on Feb 17, 2018

This visualization compares consumer expenditure patterns across four Midwestern U.S. cities—Chicago, Detroit, Minneapolis–St. Paul, and St. Louis—using data from the Consumer Expenditure Survey. It shows categorical spending differences (e.g., food, housing, transportation) through a horizontal bar chart layout, with each city’s values encoded as bar lengths. The code uses D3.js (d3.scaleBand, d3.scaleLinear) to map categories and values, and d3.axisBottom for the value axis. Data comes from the CSV file `midwest_flatten_3.csv`, which contains income and spending figures per city.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 78d997d4b70284eab2159645ba587f1f

This visualization compares consumer expenditure and demographic data across four Midwestern U.S. cities—Chicago, Detroit, Minneapolis–St. Paul, and St. Louis—using data from a flattened CSV file. It presents the information as a series of horizontal bars or numeric tables grouped by spending categories like food, housing, and transportation, with each city’s values displayed side-by-side for direct comparison. The rendering relies on a JavaScript library to parse and display the structured data from the provided file, likely using a data-driven approach to map the tabular values into visual elements, though no specific graphing API is named in the source.

JJustinGOSSES

95% match

Loading thumbnail…

Gist ac4a02b526cdd611b46159cb475c24e9

This visualization compares consumer expenditures across five Midwestern U.S. cities (Chicago, Detroit, Minneapolis-St. Paul, and St. Louis) using multi-column data from a flat CSV file. It displays a table-like layout where each row represents a spending category, and each column shows the dollar amounts or demographic statistics for that city. The rendering uses D3.js with a `d3.forceSimulation` algorithm to manage the positioning of data elements, making the comparison of values and category hierarchies visible at a glance. The data structure features three levels of headers, allowing users to trace broad categories like Food or Housing down to specific subcategories.

JJustinGOSSES

94% match

Loading thumbnail…

Gist 9e143987ca94c3ea3cbbcd28943d7096

This visualization compares consumer expenditure patterns across four Midwest U.S. cities using a force-directed network layout. The code employs `d3.forceSimulation` to arrange nodes by category and city, with `d3.geoPath` absent, instead relying on SVG circles and lines to encode spending amounts. Data comes from a flattened CSV (midwest_flatten_3.csv) listing income and expense categories like housing, food, and transportation. Each city’s values are shown as labeled clusters, with node size and link thickness reflecting dollar figures, rendered via D3’s `enter`/`update` selections and `transition.attrTween` for smooth positioning.

JJustinGOSSES

90% match

Loading thumbnail…

Fork of D3.js Bar Chart

This example shows a bar chart of the 15 most expensive cities by average cost of living index, with a bold title and hover tooltips revealing each city’s exact value. It loads CSV data from a GitHub gist via `d3.csv`, filters and aggregates it with `d3.nest()` and `d3.mean()`, then renders an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Bars highlight orange on mouseover, with a tooltip appended dynamically to the page.

Kkottenikhil

68% match

Loading thumbnail…

D3.js Bar Chart

This bar chart displays the top 15 most expensive cities by their mean cost of living index, sourced from a CSV file. Using D3 v4, the code filters data by rank, nests entries by city, and computes averages with `d3.nest().rollup()`. It renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes, while interactive tooltips appear on mouseover via `d3.select` and style changes.

Kkottenikhil

68% match

Loading thumbnail…

Untitled

This stacked bar chart displays categorical spending data from a CSV file, grouping values by year and showing the breakdown of components such as "Função" and "Subfunção" with amounts for "Empenhado" and "Pago". The visualization uses D3 v4’s `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to render a 460-by-400 pixel SVG, with axes, color-coded segments, and a filter button in the accompanying HTML page.

WWilliam Niemiec

66% match

Loading thumbnail…

D3.js Bar Chart

This bar chart visualizes the 15 most expensive cities by their mean cost of living index, using data filtered from a CSV file loaded via `d3.csv`. Each bar represents a city, with values aggregated through `d3.nest()` and `d3.mean`, and rendered as an SVG via `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear on mouseover, driven by D3 v4 event handlers. The chart includes rotated x-axis labels and a bold title, with bars colored steelblue by default and highlighted orange on hover.

EElvis Araka

66% match

Loading thumbnail…

Loading CSV Data with D3

A horizontal bar chart shows the percentage of households living below the poverty line for each Chicago community, sorted in descending order from Riverdale to Lincoln Park. The visualization uses D3 v3’s `d3.csv` to load the data from a CSV file, `d3.scale.linear` for the x-axis, `d3.scale.ordinal` with `rangeRoundBands` for the y-axis, and SVG `rect` elements to render the bars. Hovering over a bar reveals a tooltip via an appended `title` element. The data originates from the City of Chicago, data.gov.

JJasonMcGregor

66% match