Gist 9ddca91496f8e79a0bb5f704f92cea71

100%

Gist 9ddca91496f8e79a0bb5f704f92cea71

✓ Published0🌍 Public

Last edited May 30, 2016

Created on May 30, 2016

This interactive data visualization presents the menu offerings of boba tea shops in San Francisco and San Jose, using a hierarchical JSON file as its data source. The code visualizes each shop’s menu structure—flavors, toppings, and sweetness levels—as an expandable tree or network diagram, with each option rendered as a node. Built with the JavaScript library D3.js, it likely employs `d3.forceSimulation` for layout and `d3.selectAll` for rendering nodes and links, enabling users to explore the distinct offerings and options across multiple shops. The visualization highlights the variety and customization available at each location.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Bubble Chart Visualization

This interactive bubble chart displays the number of boba shops across eleven Bay Area cities, with circle size scaled linearly by shop count. Built with D3 v7, it renders as an SVG where users can drag bubbles to reposition them while a force simulation, using `d3.forceSimulation` with center, charge, and collide forces, arranges the circles and prevents overlap. Hovering reveals a tooltip showing each city’s name and shop total, with data loaded from a remote CSV file.

Wwaterm80

74% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80

72% match

Loading thumbnail…

Fork of Circles with D3

This visualization maps a restaurant menu as an interactive tree diagram using D3.js. It displays the hierarchy of cuisine types, dishes, and their corresponding descriptions like ratings, costs, and sales figures. The code uses `d3.select`, `d3.attr`, and data-join patterns to bind the hierarchical `restaurantData` object to SVG circles and text nodes. Links are rendered as red paths, with canvas styling for thematic clarity.

RRohithNaiduDevareddy@my.unt.edu

71% match

Loading thumbnail…

Fork of Circles with D3

This example visualizes a hierarchical restaurant dataset, showing menu items grouped by cuisine type through a force-directed network of labeled nodes and links. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position elements, while drag interactions let users rearrange the layout. Each node is rendered as a circle with text labels, and the code loads data from a JSON file via d3.json. The visualization highlights the relationships between a central restaurant node, three cuisine categories, and their respective dishes.

RRohithNaiduDevareddy@my.unt.edu

70% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents a summary of a Texas coffee shop dataset, displaying key performance indicators for traffic, staffing, and revenue alongside a bar chart of total monthly revenue by city. The dark-themed interface uses D3.js v7 to load and parse CSV data from a GitHub Gist, calculating aggregates with d3.mean and d3.min. Cards display computed statistics, while an SVG bar chart renders the revenue comparison. The code demonstrates D3's data-loading capabilities, CSS styling for visual design, and programmatic selection and text assignment.

Ddineshsingiri18@gmail.com

70% match

Loading thumbnail…

Tree_Graph_ICE_8

This example presents a restaurant menu as a hierarchical tree visualization, where dishes are organized under cuisine categories and each dish branches into descriptive nodes for rating, cost, and sales. The code builds the tree using D3.js v7’s hierarchical layout and data join methods, rendering nodes as SVG circles and links as red lines on a light brown background. Node styling distinguishes dish circles from analysis diamonds, and the static dataset is defined inline in JavaScript.

RRohithNaiduDevareddy@my.unt.edu

69% match

Loading thumbnail…

Fork of ICE-5-Prathima-coffee

This interactive visualization displays a coffee shop menu with item details, initially hidden until a user types “Menu” into a text input and clicks Execute. Using D3 v7, the page fetches CSV data from a GitHub gist via `d3.csv`, then dynamically renders an SVG table populated with the dataset’s columns and rows. The interface also shows data summary information (file size, row and column counts) and features decorative inline SVG graphics, including coffee cups and stars, alongside styled HTML elements. The visualization combines DOM manipulation with pure D3 data loading to create a simple, command-driven table display.

Ppilliprathimarani@my.unt.edu

68% match

Loading thumbnail…

d3.js experiment - Donuts, Bars and Crime.

The visualization presents crime data across San Francisco neighborhoods for a selected year, combining donut charts for offense type distribution and bar charts for hourly incident patterns. Each donut chart displays the share of crimes by neighborhood, with the total count centered and interactive hover labels revealing specific neighborhood names and values. The bar charts beneath show the frequency of incidents across 24 hours per offense type. Built with CoffeeScript, it uses D3.js primitives including `d3.svg.arc`, `d3.layout.pie`, and `d3.scale.ordinal` for coloring, while the JSON data source is loaded via `d3.json` from the `top-neighborhoods-{year}.json` endpoint.

CCaged

68% match