├── sample.jpg
├── public
├── robots.txt
├── favicon.ico
└── index.html
├── src
├── index.js
├── App.js
├── components
│ └── Wafermap.js
└── waferdata.json
├── README.md
├── .eslintrc.json
├── package.json
├── LICENSE
└── .gitignore
/sample.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdfordham/react-d3-wafermap/HEAD/sample.jpg
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdfordham/react-d3-wafermap/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 |
5 | ReactDOM.render(
6 |
7 | ,
9 | document.getElementById('root')
10 | )
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # react-d3-wafermap
4 |
5 | React component that uses [D3.js](https://d3js.org/) to generate a wafer map from a json of die data for yield analysis. It will automatically generate a proper border if the wafer is reasonably symmetric. The json should have $(x,y)$ data for each die, as well as color and mouseover text.
6 |
7 | The D3 code can be forked on Observable [here](https://observablehq.com/@sdfordham/simple-wafermap). The component follows the ''lifecycle methods wrapping'' structure due to [Nicolas Hery](https://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/) via Marco Iglesias' great book [Pro D3.js](https://www.apress.com/gp/book/9781484252024). This repo was created with [create-react-app](https://github.com/facebook/create-react-app).
8 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Box, VStack, Center, Button } from '@chakra-ui/react'
3 | import data from './waferdata.json'
4 | import Wafermap from './components/Wafermap.js'
5 |
6 | function App() {
7 | const [waferIdx, setWaferIdx] = useState(0)
8 | var dimensions = {'width': 400, 'height': 400}
9 |
10 | function nextWafer() {
11 | waferIdx === (data.length - 1) ?
12 | setWaferIdx(0) : setWaferIdx(waferIdx + 1)
13 | }
14 |
15 | return (
16 |
17 |
18 |
19 | Next wafer
24 |
25 |
26 |
27 | )
28 | }
29 |
30 | export default App
31 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "extends": [
7 | "eslint:recommended",
8 | "plugin:react/recommended"
9 | ],
10 | "parserOptions": {
11 | "ecmaFeatures": {
12 | "jsx": true
13 | },
14 | "ecmaVersion": 12,
15 | "sourceType": "module"
16 | },
17 | "plugins": [
18 | "react"
19 | ],
20 | "rules": {
21 | "indent": [
22 | "error",
23 | 2
24 | ],
25 | "linebreak-style": [
26 | "error",
27 | "windows"
28 | ],
29 | "quotes": [
30 | "error",
31 | "single"
32 | ],
33 | "semi": [
34 | "error",
35 | "never"
36 | ]
37 | },
38 | "settings": {
39 | "react": {
40 | "version": "detect"
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-d3-wafermap",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@chakra-ui/react": "^1.7.3",
7 | "d3": "^7.2.1",
8 | "react": "^17.0.2",
9 | "react-dom": "^17.0.2",
10 | "react-scripts": "^5.0.0"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "lint": "eslint ."
15 | },
16 | "eslintConfig": {
17 | "extends": [
18 | "react-app",
19 | "react-app/jest"
20 | ]
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | },
34 | "devDependencies": {
35 | "eslint": "^7.32.0",
36 | "eslint-plugin-react": "^7.27.1"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Stiofán Fordham
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/Wafermap.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react'
2 | import PropTypes from 'prop-types'
3 | import * as d3 from 'd3'
4 |
5 | const Wafermap = ({ points, configuration }) => {
6 | const svgRef = useRef(null)
7 |
8 | useEffect(() => {
9 | const max_x = d3.max(points, p => p.x)
10 | const max_y = d3.max(points, p => p.y)
11 | const min_x = d3.min(points, p => p.x)
12 | const min_y = d3.min(points, p => p.y)
13 |
14 | const radius = max_x + 2
15 | const vWidth = 4 * max_x + 1
16 | const vHeight = 4 * max_y + 1
17 | const svg = d3.select(svgRef.current)
18 |
19 | svg.append('circle')
20 | .style('fill', 'gray')
21 | .style('stroke', 'black')
22 | .style('stroke-width', 0.025)
23 | .attr('id', 'd3-outer-circ')
24 | .attr('cx', 0.5)
25 | .attr('cy', 0.5)
26 |
27 | svg.append('circle')
28 | .style('fill', 'gray')
29 | .style('stroke', 'black')
30 | .style('stroke-width', 0.025)
31 | .attr('id', 'd3-inner-circ')
32 | .attr('cx', 0.5)
33 | .attr('cy', 0.5)
34 |
35 | svg.append('g').attr('id', 'd3-die')
36 |
37 | svg.attr('viewBox', [2 * min_x, 2 * min_y, vWidth, vHeight])
38 |
39 | const outer_c = svg.select('#d3-outer-circ')
40 | .attr('r', radius + 0.2)
41 |
42 | const inner_c = svg.select('#d3-inner-circ')
43 | .attr('r', radius)
44 |
45 | function mouseover(d, i) {
46 | svg.select('#d3-die')
47 | .append('text')
48 | .attr('id', 'd3-tooltip')
49 | .attr('x', radius)
50 | .attr('y', radius)
51 | .attr('font-size', '2px')
52 | .text(i.mouseover)
53 | }
54 |
55 | var mouseout = function(d, i) { // eslint-disable-line no-unused-vars
56 | svg.select('#d3-tooltip')
57 | .remove()
58 | }
59 |
60 | const g = svg.select('#d3-die')
61 | .selectAll('rect')
62 | .data(points)
63 | .join('rect')
64 | .attr('x', p => p.x)
65 | .attr('y', p => p.y)
66 | .attr('width', 0.975)
67 | .attr('height', 0.975)
68 | .attr('fill', p => p.color)
69 | .attr('stroke', 'black')
70 | .attr('stroke-width', 0.025)
71 | .on('mouseover', mouseover)
72 | .on('mouseout', mouseout)
73 |
74 | svg.call(d3.zoom()
75 | .extent([[0, 0], [vWidth, vHeight]])
76 | .scaleExtent([1, 8])
77 | .on('zoom', zoomed))
78 |
79 | function zoomed({transform}) {
80 | g.attr('transform', transform)
81 | outer_c.attr('transform', transform)
82 | inner_c.attr('transform', transform)
83 | }
84 | }, [points])
85 |
86 | return 