Skip to main content
SimilarExport ZIP
100%

Stacked bar chart of food in cities

✓ Published1🌍 Public
MMing Liu
Last edited Nov 10, 2021
Created on Oct 25, 2021

A stacked bar chart displays the number of restaurants by food type across ten cities, excluding Boston. The visualization uses D3.js with an SVG rendering and a categorical color scale from d3-scale-chromatic. Tooltips reveal the exact restaurant count for each food category on hover. The chart is built using D3's stack method to aggregate data from a CSV file, with axes and legends manually positioned.

AI-generated description

Stacked bar chart of food in cities

To address the feedback from the professor of stacked bar chart, I created a stacked bar chart of type of foods in each top cities as below. I didn't include Boston for this time as it has significantly more restaurants than others. Also I added tooltips to present amounts of restaurants of a type of food in a city when you place mouse onto any section on the bar.

Inspired by a great example of a basic stacked bar chart.

*This is a part of week 9 assignment: Address Project Feedback

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked bar Assignemnt 2

This stacked bar chart compares the number of dishes for ten food types across ten Massachusetts cities, excluding Boston. It uses a vertical layout with horizontal bars, where each city is a row and colored segments represent cuisine counts. The visualization includes an interactive tooltip that displays the specific food type and count on hover. Built with D3 and the `d3-scale-chromatic` library, the chart renders as an SVG and uses `scaleLinear` and `scaleBand` for axes, with `scaleOrdinal` for color mapping.

VVishnu Sudireddy
90% match
Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart visualizes the distribution of ten food types (e.g., American, Italian, Mexican) across ten cities, excluding Boston, using Yelp data from a CSV file. Each horizontal bar is segmented by food category, with segment lengths proportional to the count of restaurants per cuisine, enabling quick comparison of culinary profiles between cities. The chart is built with D3.js, using `d3.scaleBand` for the city axis, `d3.scaleLinear` for the count axis, and `d3.scaleOrdinal` with a custom color palette for food types. The `d3.stack()` function transforms the data into stacked segments, and interactive tooltips display exact counts on mouseover via `d3.select` and a `toolTip` div. A legend and title annotate the visualization.

Yyuting89830@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart visualizes the distribution of ten cuisine types across the top ten Yelp cities (excluding Boston), showing the number of four-star-or-above restaurants in each. Each horizontal bar represents a city, segmented by cuisine, with a legend mapping the color scheme. The chart uses d3’s `scaleBand` and `scaleLinear` for axes, `stack` to aggregate data, and `scaleOrdinal` for categorical colors. Tooltips reveal exact counts per segment, and the SVG is rendered with d3’s selection and append methods. Data comes from a CSV file loaded via `csv`.

MMar-99
85% match
Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart displays the count of highly-rated restaurants (4 stars or above) across ten cuisine types for nine Massachusetts cities, excluding Boston. Each horizontal bar represents a city, segmented by food category using distinct colors from a custom ordinal scale via `d3.scaleOrdinal`. The visualization is built with D3.js v7, processing CSV data through `d3.csv` and `d3.stack`. Interactive tooltips appear on mouseover, showing the cuisine and its count, while a manually positioned legend lists food types alongside the axis.

RRahulSai05
85% match
Loading thumbnail…

Fork of Stacked bar chart of Yelp data: top cities

The visualization displays the top food types in the top cities near Boston, excluding Boston itself, based on Yelp restaurant counts. It uses a stacked horizontal bar chart, with each city row segmented by cuisine type, rendered as SVG in D3. The chart employs `d3.scaleLinear` and `d3.scaleBand` for axes, and includes an interactive tooltip that reveals the specific food type and count on hover. Data is loaded from a CSV file, and the color scale is defined manually using `d3.scaleOrdinal`.

AAndrew Petit
85% match
Loading thumbnail…

Interactive bar chart of food categories

This interactive bar chart displays the number of top-rated restaurants in Greater Boston serving different regional food categories, sorted by restaurant count. The visualization uses an SVG-based bar chart built with D3 v5, employing `scaleBand` and `scaleLinear` to map food categories and restaurant counts to screen coordinates. Hovering over a bar reveals a tooltip with the exact restaurant count via mouseover events. Data comes from the public Yelp dataset, filtered to restaurants rated four stars or higher, and is loaded from a CSV file using D3's `csv` function.

MMing Liu
80% match
Loading thumbnail…

Brushable bar chart, try 3...

A brushable bar chart visualizes the number of top-rated restaurants (4+ stars) across Greater Boston cities, sorted from highest to lowest count. The main panel displays the full ranked list, while a small miniature overview enables brushing to zoom the y-axis domain, revealing detailed bars for a selected range of cities. Built with D3 v3 and SVG, the chart uses `d3.scale.ordinal` for city positioning and a linear zoom scale coordinated with a brush on the mini chart. Data comes from the public Yelp dataset, filtered to Greater Boston.

MMing Liu
76% match
Loading thumbnail…

Brushable bar chart of number of top-rated restaurants in GB area

This brushable bar chart displays the number of top-rated restaurants across Greater Boston cities, with Boston’s count of 1,012 dominating the view. Users brush across the mini bar chart on the right to filter which cities appear in the main chart on the left. The implementation uses D3 v3 with SVG rendering, employing `d3.scale.ordinal` for bar positioning and `d3.svg.brush` to capture the brush extents. The y-axis zoom effect is achieved by mapping brush coordinates through `d3.scale.linear` to adjust the main chart’s domain. Data is loaded from a CSV containing city names and restaurant counts.

MMing Liu
76% match