M

Ming Liu

@mingliu815·18 public vizzes

Loading thumbnail…

Map of top-rated seafood in Greater Boston

This choropleth map displays the distribution of top-rated restaurants, defined as four stars or above, across Greater Boston, with deeper reds indicating higher counts per town. It uses D3 v5 with TopoJSON to render town boundaries and a scaleThreshold color scale based on data from the public Yelp dataset. Interactive features include zoom support and hover tooltips that reveal town names and restaurant counts, while a linear gradient legend communicates the numeric scale.

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.

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.

Loading thumbnail…

Stacked bar chart of food in cities

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.

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.

Loading thumbnail…

Yelp data map

This map displays the distribution of top-rated restaurants (4+ stars) across Greater Boston municipalities from the public Yelp dataset, using an SVG rendering of Massachusetts town boundaries. The project loads geographic data via `d3.json` and TopoJSON, projecting it with `d3.geoIdentity` and `d3.geoPath`. Currently, it shows only the empty state map as an intermediate stage; the planned visualization of restaurant counts by town (using color or circle size) is not yet implemented, despite the accompanying data file containing city-wise counts.

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.

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.

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.

Loading thumbnail…

Scatter plot of tobacco control data with menu

This scatter plot shows tobacco control power indicators for Canada, the United States, and Mexico from 2007 to 2018, based on WHO MPOWER data. A menu lets users switch between five control measures, and the y-axis and points update with a smooth transition. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft for scales and axes, with d3.transition for animations. Points are colored by country and rendered as SVG circles with a legend.

Loading thumbnail…

Scatter plot of tobacco control data

This scatter plot displays tobacco control scores for Canada, the United States, and Mexico from 2007 to 2018, based on WHO Global Health Observatory data. The y-axis represents the strength of warning labels about tobacco dangers, ranging from 1 (not reported) to 5 (comprehensive pictorial warnings). The visualization highlights an upward trend, with all three countries improving their warning policies over time. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for the chart's ticks. Circles are rendered in SVG with a radius of 10 pixels, colored by country (red, blue, green) and drawn with 50% opacity.

Loading thumbnail…

Bar plot of Yelp data: review counts vs. stars

This bar chart displays the total number of Yelp reviews for top-rated restaurants (4 stars and above) in Greater Boston, grouped by star rating categories. The plot reveals that restaurants with 4 stars accumulate substantially more reviews than those with 4.5 or 5 stars. Built with D3 v5, the visualization uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and SVG rectangles to encode the data. The chart includes axis labels and a title, with data sourced from the public Yelp dataset.

Loading thumbnail…

Upload tobacco control data

This example displays a textual summary of a tobacco control dataset, reporting its file size, row count, and column count after loading. The visualization uses D3 v5 to fetch the CSV from a GitHub gist via `d3.csv`, then calculates the file’s size with `d3.csvFormat` and displays the statistics inside a styled `<pre>` element. The data originates from the WHO Global Health Observatory repository and covers MPOWER tobacco control indicators for all countries from 2007 to 2018.

Loading thumbnail…

Scatter plot of nutrition data

This scatter plot compares nutrient levels in peanut oil and extra light olive oil, using USDA foundation food data from 2020. The x-axis encodes nutrient ID, the y-axis shows grams per 100g of food, and colored dots distinguish the two oil types based on food ID. It uses D3 v6 with scaleLinear for axes, circle elements rendered in SVG, and csv loading from a GitHub Gist. The code filters data to two specific foods and provides axis labels via axisLeft and axisBottom.

Loading thumbnail…

Upload food nutrition data

This example displays the size and structure of a filtered USDA foundation food nutrition dataset from 2020, showing the file size in kilobytes, the number of data rows, and the number of columns. It fetches a remote CSV file using `d3.csv` and then formats the result with `d3.csvFormat` to calculate the data’s byte length. The output is rendered as large text in a `<pre>` element using the `document.getElementById` and `textContent` API.

Loading thumbnail…

Upload Yelp data

This example displays a minimal text summary of the uploaded Yelp dataset for Greater Boston, showing the file size, row count, and column count in a large violet font. Using D3 v5, the code fetches a CSV file from a GitHub gist via `d3.csv` and processes the parsed tabular data with `d3.csvFormat` and `data.columns` to extract metadata. The visualization itself does not map or plot the restaurant data, instead serving as a load-check for the raw dataset.

Loading thumbnail…

Scatter plot of Yelp data: review counts vs. stars

This scatter plot shows review counts versus star ratings for top-rated restaurants in Greater Boston, drawn from Yelp’s public dataset. It reveals that restaurants with more reviews tend to have slightly lower ratings, as the data clusters at 4, 4.5, and 5 stars. The visualization uses D3 v6 to load CSV data from a GitHub Gist, then creates an SVG with scaleLinear, axisLeft, axisBottom, and circle marks. Each point is rendered as a red semi-transparent circle with a fixed radius, supporting overlapped points.

Loading thumbnail…

A smiley moon with star and cloud

This example depicts a starry night scene featuring a large golden smiley moon, a star, and a cloud. The moon is created using SVG circles with a Gaussian blur filter, while the eye uses a radial gradient. The star is a polygon, and the cloud is drawn with a path using relative arc commands. The SVG code directly defines all shapes and applies the blur effect via the `feGaussianBlur` filter.