makeovermonday - w50

from colab altair to vega-lite - w50 - makeovermonday

A scatterplot displays fast-food chains by total sales against number of locations, with circle size encoding average sales per store and color distinguishing chains. The visualization uses Vega-Lite embedded via vega-embed, built from an inline dataset of 30 chains. Interactive panning and zooming are enabled through an interval selection bound to the scales, and tooltips reveal rank, chain, sales, locations, and average sales per store. The chart originates from a Makeover Monday exercise, adapted from a Colab Altair notebook.

Aaaizemberg

85% match

Top 10

The visualization ranks the top 10 U.S. fast-food chains by 2017 sales and store count, listing each chain’s name alongside two horizontal bars. Red bars encode annual sales in U.S. dollars, while blue bars encode the number of locations, with a linear scale mapping each metric to a fixed pixel width. Tooltips reveal exact values via SVG `title` elements. The code uses d3.v5 with `d3.select`, `d3.scaleLinear`, and data binding to append SVG text and rect elements, sourcing data from a gist.

Aaaizemberg

68% match

Data Visualization Project

This visualization maps fast food restaurant chains across the United States using a topojson file of U.S. states and a CSV dataset of restaurant locations. A dropdown-style color legend filters the map by chain name, while clicking any state triggers a bar chart showing the top five chains in that province. The chart uses d3.scaleBand for bars and animates transitions, with a close button to hide the chart. Map and chart visuals both leverage d3.geoPath, d3.zoom, and d3 transitions for interactivity.

68% match

Data Visualization Project

This interactive visualization maps the locations of major fast food restaurant chains across the United States, with each dot colored by brand. Clicking a state zooms the map and displays a bar chart ranking the top five chains in that state by count, while a color legend filters the map by selected brand. The project uses D3 v5 with `geoAlbersUsa` and `geoPath` for the map, `scaleBand` and `scaleLinear` for the bar chart, and animated transitions for chart updates. Data comes from a CSV of fast food restaurant locations loaded via `d3.csv`, with U.S. state boundaries from a TopoJSON file.

Making a Bar Chart

This bar chart displays the ten largest fast food restaurant chains worldwide, ranking them by number of locations from Subway’s 44,834 down to Hunt Brothers Pizza’s 7,300. The visualization uses D3 version 5, reading the data from a local CSV file via the `csv` import and selecting the SVG element with the `select` method. Each chain is represented as a steel-blue rectangle rendered in an SVG, with the data sourced from Wikipedia’s list of the largest fast food restaurant chains.

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot visualizes nutritional data for McDonald’s menu items, sourced from a CSV hosted on VizHub. Users select which two nutritional attributes (e.g., Calories, Sodium) to compare using dropdown menus, while colored circles represent item categories (Beef, Chicken, etc.). A clickable color legend filters the data, and hovering over a circle reveals a tooltip with the item’s name, category, and values. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition()` for animated circle updates, with SVG rendering and interactive menus.

Wwangjonathan

Data Visualization Project

This interactive visualization maps the locations of fast food restaurant chains across the United States, using a geographic projection with `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to pan and zoom. Clicking a state or a color legend item filters and animates a bar chart showing the top five chains in that region, built with `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`. Points and bars are rendered as SVG elements with smooth `transition()` animations, while a clickable "close chart" button toggles the chart’s visibility.

Fork of Blank Slate with Hot Reloading

This example shows a scatter plot of fast food nutrition data, comparing sodium and cholesterol levels across items from six restaurant chains, with point size encoding calories and color distinguishing companies. The visualization uses an interactive tooltip on hover, revealing details like item name, company, and nutritional values. Built with D3 v7, it leverages scales from `d3-scale`, axis helpers from `@curran/axis-labels`, and a reactive main function that responds to container resizing. Data comes from the `@pbruss/fast-food-nutrition-dataset-v3` package, and the chart is designed for VizHub’s hot-reloading runtime.

Ppbruss@bu.edu