Skip to main content
SimilarExport ZIP
100%

Dishes Map

✓ Published1🌍 Public
Hhenry1987
Last edited Aug 31, 2019
Created on Aug 29, 2019
Forked from Matrix Diagram

This interactive matrix diagram visualizes relationships between dishes, with colored cells indicating connection strength and hue representing dish group. Users can reorder the matrix by name, count, or group using dropdown controls, triggering animated transitions via `d3.transition()` and `matrixScale.domain()`. The visualization uses D3 v5 with `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for rendering SVG rectangles with opacity mapping link values. Hover interactions highlight row and column labels, while a tooltip displays details.

AI-generated description

Initial version of matrix diagram Dishes Map - 2019-08-29

MIT Licensed

Similar vizzes

Loading thumbnail…

Dishes Map for Chinese Cuisines

A dishes map for Chinese cuisines displays a matrix of dishes as a heatmap, where cell color encodes dish category and opacity encodes similarity strength. Users can reorder the matrix by name, count, stars, sentiment, or group, triggering animated transitions that smoothly rearrange rows and columns. Built with D3 v5, the visualization uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `transition().duration()` to orchestrate the 2-second tweening effect, while SVG rectangles and text labels form the interactive grid.

Hhenry1987
89% match
Loading thumbnail…

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

Hhenry1987
79% match
Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Iimsohandsome123
74% match
Loading thumbnail…

Fork of Force-Directed Graph & Adjacency Matrix- D3.js

This visualization combines a force-directed graph with an adjacency matrix to explore restaurant connections from a CSV file. The node-link diagram uses d3.forceSimulation with drag interactions and animated ticks, while the matrix displays weighted links through cell opacity and tooltips. Both views render as SVG, with the matrix mapping food-related entities and their relationships using data from food.csv.

Rrajugautam
72% match
Loading thumbnail…

Heatmap

This heatmap displays binary matrix values as colored cells, with rows and columns labeled for reference. The visualization supports three ordering strategies: random permutation, optimal leaf ordering, and initial order restoration, all controlled by buttons. Built with D3.js and the reorder library, the SVG renders cells colored on a white-to-orange scale based on value intensity, while the table.js component handles responsive reordering with animated transitions.

Iimsohandsome123
72% match
Loading thumbnail…

D3 - Adjacency Matrix

This example visualizes a dolphin social network as an interactive adjacency matrix. It displays a grid of colored squares where each row and column represents a dolphin, with filled cells indicating connections between individuals. The visualization uses two versions of D3 (v6 and v7) to parse CSV data, construct the matrix from edge lists, and render SVG rectangles with hover effects that highlight entire rows and columns. A tooltip appears on mouseover to show the specific link identifier, while the matrix labels each axis with node IDs.

CChandana Srinivas
71% match
Loading thumbnail…

Co-ocurrence matrix

This co-occurrence matrix visualizes the relationships between academic programs, with cells colored by category and sized by link weight. The visualization uses an interactive SVG heatmap where users can reorder rows and columns by name, count, or group via a dropdown menu. Built with D3 v5, the code employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, while transitions animate the reordering over 2 seconds. A tooltip provides details on hover, and the matrix reads from a JSON file containing nodes and links.

Iimsohandsome123
71% match
Loading thumbnail…

D3 Adjacency Matrix

An adjacency matrix displays 16 nodes from the soc-tribes dataset as a symmetric grid, where hot pink cells indicate connections and white cells represent absent links. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand` for axis positioning and `d3.csv` for data loading. Interactive tooltips highlight rows and columns on mouseover, while the matrix symmetrizes directed links by mapping both directions into a shared `Map` structure.

Mmariahdiaz
71% match