Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
MMing Liu
Last edited Oct 20, 2021
Created on Oct 20, 2021

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.

AI-generated description

Brushable bar chart of Yelp data: amount of restaurants in cities

This is a brushable bar chart presenting number of top-rated restaurants in Greater Boston cities.

Inspired by a great example of brushabe bar chart.

*This is a part of week 8 assignment: Make Something with Brushing

MIT Licensed

Similar vizzes

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
92% 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
84% match
Loading thumbnail…

Bar plot of Yelp data: top cities

This bar chart displays the top 10 cities in the Greater Boston area by number of Yelp-rated restaurants with four stars or higher, using a horizontal layout where the x-axis shows restaurant counts and the y-axis lists cities. The code loads a pre-filtered CSV dataset derived from the public Yelp dataset and uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG bar chart. Bars are colored purple, with a clear title and labeled axes, highlighting Boston’s dominance with over a thousand qualifying restaurants.

MMing Liu
82% match
Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

This bar chart shows the top ten cities in the Greater Boston area by number of restaurants rated four stars or higher on Yelp, with Boston leading at over 1,000 establishments. The visualization aggregates raw Yelp dataset entries by city using JavaScript’s reduce method, then sorts and filters the results before rendering. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw the axes with custom tick styling. Bars are appended as SVG rectangles with a purple fill, and the data comes from a local CSV file.

Aaniosindustries
80% match
Loading thumbnail…

Interactive map of top-rated restaurants in Greater Boston

This interactive map visualizes the distribution of top-rated restaurants (4 stars or above) across Greater Boston, using data from the public Yelp dataset. A drop-down menu filters the choropleth by cuisine type, while hovering over a town displays its name and restaurant count in a tooltip. The map supports zooming and panning via d3.zoom. It uses d3.geoPath with a geoIdentity projection to render TopoJSON town boundaries, and d3.scaleThreshold to map restaurant counts to a sequential red color scale.

MMing Liu
79% match
Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

This horizontal bar chart ranks the top ten cities in Greater Boston by the number of highly-rated Yelp restaurants (4 stars or above), with Boston leading at 1,011 entries. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map counts and city names, while `axisLeft` and `axisBottom` render the chart’s axes. Data is loaded from a CSV file containing aggregated counts for each city.

UUgin
79% match
Loading thumbnail…

Fork of Bar plot of Yelp data: top cities

This fork of a bar plot visualizes the top ten cities in Greater Boston with the highest number of Yelp restaurants rated four stars or above. Rendered as an SVG, the chart uses horizontal bars to compare city counts, with the x-axis showing the number of restaurants and the y-axis listing city names. The code leverages d3.scaleLinear and d3.scaleBand for axis scaling, and d3.axisLeft and d3.axisBottom to generate the axes. Data is loaded from a local CSV file, with the original source being the public Yelp dataset.

JJaswitha09
78% match
Loading thumbnail…

Map of top-rated restaurants in Greater Boston

This choropleth map visualizes the distribution of top-rated restaurants (4 stars or higher) across Greater Boston municipalities, using a red color scale where darker shades indicate higher restaurant counts and grey represents areas without data. The map is interactive, supporting zooming via d3.zoom and hover tooltips that display each town's name and restaurant count. Built with D3 v5, it uses d3.geoPath with a geoIdentity projection and topojson to render Massachusetts town boundaries. The data comes from the public Yelp dataset, filtered and aggregated by city.

MMing Liu
78% match