Skip to main content
SimilarExport ZIP
100%

Dishes Map for Chinese Cuisines

✓ Published0🌍 Public
Hhenry1987
Last edited Sep 2, 2019
Created on Aug 31, 2019
Forked from Dishes Map

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.

AI-generated description

Initial version of matrix diagram Dishes Map - 2019-08-29 Dishes Map - 2019-08-31 (Add in: stars, sentiment ) Dishes Map - 2019-08-31 (Chinese Cuisines)

MIT Licensed

Similar vizzes

Loading thumbnail…

Dishes Map

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.

Hhenry1987
89% 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
73% match
Loading thumbnail…

heatmap

This heatmap visualizes a co-occurrence matrix of 50 row items by 5 column contrasts, with cell colors encoding log2 ratio values from -3 (blue) to +4 (red). Built with D3 v3 and rendered as SVG with animation, the heatmap supports reordering via hierarchical clustering, probe/contrast name sorting, and interactive row/column label clicks to re-sort cell values. Users can select cells with the mouse, and Alt-clicking enables multiple block selection, with corresponding row and column labels highlighted upon selection.

IIMYin
70% match
Loading thumbnail…

Heat Map

A 5x5 heat map visualizes numeric values from a CSV file as colored squares, using a quantile scale with a sequential orange colormap to encode values from 1 to 20. The SVG rendering employs d3.csv for data loading, d3.scaleQuantile for color mapping, and d3.axisRight and d3.axisBottom to display axes. A tooltip appears on mouseover, showing the exact value of each cell.

CChai94
69% 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
69% match
Loading thumbnail…

Heatmap

This heatmap visualizes the frequency of chess opening moves across a 10x10 grid of board positions, with color intensity representing move popularity. The visualization uses d3.scaleBand for axes, d3.scaleLinear for the color gradient from white to green, and d3.axisBottom/axisLeft for labels. Data loads from a CSV file containing sleep efficiency records, though the grid dimensions and labels are hardcoded. The code includes separate modules for axes and heatmap rendering, with d3.csv fetching and d3.selectAll joining rectangles to render cells.

MMartha Cash
69% match
Loading thumbnail…

Heatmap

This heatmap visualization reorders rows and columns of a binary matrix using the `reorder.v1.js` library. The matrix cells are rendered as SVG rectangles, with fill color intensity mapped through a D3 linear scale. Buttons trigger algorithms like optimal leaf ordering and random permutation, with a D3 transition smoothly animating the reordering over 1.5 seconds. The `table.js` script sets up the grid and labels, while the `science.v1.js` library provides supporting statistical functions.

WWei-Che Chang
68% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes a hierarchical dataset of restaurant categories across multiple U.S. cities, with each ring segment representing a food type and its relative value. Users can click on any segment to re-center the visualization on that node, smoothly animating the repositioning and scaling of all arcs and labels over 750 milliseconds. Built with D3 v5, the implementation uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, `d3.arc` for rendering paths, and `d3.interpolate` within a `transition.attrTween` for seamless zoom transitions. Colors are assigned via a rainbow-interpolated ordinal scale, and the flare dataset is loaded asynchronously from the Observable stdlib.

MMartin Lauf
68% match