Wafer Map

100%

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 10, 2021

This visualization displays the spatial distribution of defect values across a semiconductor wafer, with each cell representing a coordinate from a CSV dataset. The code renders an SVG grid using D3 v6, where `d3.scaleLinear` maps x and y coordinates to pixel positions and axes are added via `d3.axisLeft` and `d3.axisBottom`. Rectangles are positioned with inverted y-scaling to match Cartesian orientation, and the steelblue fill is applied uniformly through CSS, though the value column remains unused in the current rendering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Wavy treemap

This visualization shows the D3.js source code as a treemap where rectangular cells are distorted into a wavy, custom shape. The layout uses a standard `d3.treemap` with `d3.stratify` to structure the data, then applies custom distortion functions to the computed rectangles, converting them into SVG paths. The wavy warping is animated over five seconds using a transition, with the final shape approximating the D3 logo. Hovering a cell reveals its file path and line count in a tooltip.

KKcnarf

66% match

Loading thumbnail…

Fault Localization 2

This visualization displays three horizontally stacked bar charts comparing fault-localization metrics for Java source code lines, using suspiciousness, recency, and line complexity as measured values. Each chart shares the same y-axis ordering by line ID, with the next two panels omitting the left labels to emphasize differences. Built with D3 v5, the code loads data from a CSV file and renders SVG rectangles using scaleLinear, scaleBand, axisLeft, and axisBottom functions, applying steelblue bars across three separate chart regions.

KKanagaraj-NN

65% match

Loading thumbnail…

Waffles

Three waffle charts compare party percentages, each rendered as a 10-by-10 grid of 100 squares, with filled cells in party colors (steelblue, red, green) and unfilled cells in gray. Each chart labels its party and value, such as “M 72%,” using d3 v4 selections to append SVG `<rect>` elements and `<text>` labels. The code derives square positions via nested `for` loops and applies CSS classes for coloring, with the source data hardcoded in a `scores` array.

PPatrick Wojda

64% match

Loading thumbnail…

Fault Localization

A horizontal bar chart visualizes fault localization data from a CSV file, showing suspiciousness scores for lines of code in two Apache Commons Java files, with each row labeled by identifier. The chart uses D3 v5's `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Steelblue rectangles are appended to an SVG canvas, sized by each line's suspiciousness value, providing a quick comparison of which code lines are most likely responsible for faults.

KKanagaraj-NN

64% 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

63% match

Loading thumbnail…

Fault Localization 5

This visualization presents a tri-panel view of fault localization data for 25 source code lines, showing suspiciousness, recency, and line complexity as horizontal bar charts. Each panel shares the same y-axis ordering by line ID, enabling cross-comparison of metrics. The charts are rendered as SVGs using D3 v5, with the third panel featuring a sort button that reorders bars by line complexity. The suspiciousness and recency panels use `d3.scaleLinear` for x-axes, while all panels employ `d3.scaleBand` for categorical y-axis spacing. Data originates from a CSV file containing Apache Commons source file references.

KKanagaraj-NN

63% match

Loading thumbnail…

Wavy treemap

A wavy treemap displays the hierarchical structure of the flare.csv dataset, with each rectangular cell distorted by sinusoidal waves along both axes to create an undulating, artistic surface. The visualization transitions smoothly from a standard nested treemap to the wavy form. Using D3 v4, it applies `d3.treemap` for layout, `d3.stratify` for hierarchy, and custom path interpolation via `transition.attrTween` to morph rectangular boundaries into curved paths. Hovering highlights a cell and shows its ID and value via a native title tooltip.

KKcnarf

63% match

Loading thumbnail…

Visualization_D3

This example visualizes the CSS named colors dataset as a radial burst, with each color represented by a wedge-shaped slice arranged around a central point. The visualization loads color data from a CSV file using D3’s `csv` utility, then renders the chart as an SVG using React components. D3’s `pie` and `arc` functions compute the angular layout and path geometry, while each path’s fill is set directly from the color’s hex value. The chart displays all named colors in a circular, pie-like arrangement without any interactivity.

JJustin Joseph

63% match