2c:null 2d:["$","title",null,{"children":"Visualizing chess games - Interactive design board | ee2dev | Observable"}] 32:T1578,function version18() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = drawChessboard({white: lightSquares, black: darkSquares} ,0, 80); const dataArray = currentGame.slice(0, moveNumber); if (showPath) { // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") //.style("fill", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") .style("stroke", "black") //.style("stroke", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); } // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") // .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") //.style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") //.style("stroke-width", d => d.captured ? 6 : 2) .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); // show chess pieces on board /* const pieceWidth = squareWidth * .7; const sel3 = d3.select(svg) .selectAll("image.board") .data(positionAt(40)); for (let i = 0; i < 10; i++) { sel3 .join("circle") .attr("class", "piece-background board at glow") .style("fill", d => colorOfPieces3.get(d.piece)) .style("opacity", 0.2) //.style("stroke-width", 3) //.style("stroke", "black") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", pieceWidth/2); }; sel3 .join("image") .attr("class", "piece board at") .attr("xlink:href", d => d.pieceLink) .attr("x", d => d.x - pieceWidth / 2) .attr("y", d => d.y - pieceWidth / 2) .attr("height", pieceWidth) .attr("width", pieceWidth); */ // show all pieces at the bottom const pieceKeys =[ ...colorOfPieces3.keys() ]; const imageWidth = squareWidth * .5; const sel4 = d3.select(svg) .append("g") .attr("transform", "translate(" + (20 + squareWidth * 2)+ ", " + (w-40) +")") .selectAll("image.legend") .data(pieceKeys); sel4 .join("rect") .style("fill", (d, i) => colorOfPieces3.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", imageWidth / 2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); sel4 .join("image") .attr("class", "piece-square legend") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("height", imageWidth) .attr("width", imageWidth); // add glow effect d3.select(svg).selectAll(".glow") .style("filter","url(" + window.location + "#glow)"); return svg; }33:T61c,function getDefsForSVG(svg){ const defs = d3.select(svg) .append("defs"); const filter = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow"); // glow filter as proposed by Nadieh Bremer filter.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5") .attr("result","coloredBlur"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode") .attr("in","coloredBlur"); feMerge.append("feMergeNode") .attr("in","SourceGraphic"); // simple alternative glow filter const filter2 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow2"); filter2.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5"); const filter3 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow3"); filter3.append("feGaussianBlur") .attr("class", "blur3") .attr("stdDeviation","3.5"); /* filter2.append("feColorMatrix") .attr("type", "matrix") .attr("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.5 0"); */ defs .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') // .attr('viewBox', '-0 0 10 15') .attr('refX', 13) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); return svg; }34:T4b7,function drawChessboard( squareColors = {white: "#030", black: "black"}, paddingX = 0, paddingY = 0) { const squareColorWhite = squareColors.white; const squareColorBlack = squareColors.black; const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + paddingX; const h = squareTotal * 8 + squarePadding + paddingY; const svg = DOM.svg(w, h); // specify defs getDefsForSVG(svg); d3.select(svg).append("rect") .style("fill",squareColorBlack) .attr("width", w) .attr("height", h); const numSquares = d3.range(64); // draw squares d3.select(svg) .append("g") .attr("transform", "translate(" + squarePadding + ", " + squarePadding + ")") .selectAll("rect.square") .data(numSquares) .join("rect") .attr("class", "square") .style("fill", d => (d % 16 < 8) ? ((d % 2) ? squareColorBlack : squareColorWhite) : (!(d % 2) ? squareColorBlack : squareColorWhite)) .style("stroke", "none") .attr("x", d => (d % 8) * squareTotal) .attr("y", d => Math.floor(d / 8) * squareTotal) .attr("width", squareWidth) .attr("height", squareWidth); return svg; }35:[] 30:{"id":"dff556bddc65dc74","slug":"visualizing-chess-games-interactive-design-board","title":"Visualizing chess games - Interactive design board","thumbnail":"234f85f07d1cf2019fc4de9607821cc26e6f3c3353d7280714516255822c2e64","access_level":"public","create_time":"$D2019-08-20T19:00:54.973Z","update_time":"$D2022-11-03T00:51:37.394Z","view_time":null,"first_public_time":"$D2019-08-20T20:57:30.604Z","fork":{"id":"d0c89b1b662cd278","slug":"visualizing-chess-games-part-2","title":"Visualizing chess games - Part 2","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":284,"publish_version":284,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Visualizing chess games - Interactive design board","cells":[{"id":0,"value":"md`# Visualizing chess games - Interactive design board`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md `## Choose a chess game to be visualized`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof gameInputSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof myGame = {\n if (gameInputSelection[\"game input\"] === \"lichess\") {\n return form(html``)\n } else if (gameInputSelection[\"game input\"] === \"pgn\") { \n return textarea({\n title: \"Chess game to be visualized\", \n placeholder: \"Insert game in PGN format here...\", \n width: \"100%\",\n rows: 10,\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟♟`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof showPath = checkbox({\n options: [ {value: \"show\", label: \"show paths\" }],\n value: \"show\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof moveNumber = slider({\n min: 0, \n max: currentGame.length, \n step: 1, \n value: currentGame.length, \n title: \"Move number (half moves)\", \n description: \"adjust the slider to change to that half move number\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"version18();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`#### Libraries and imports` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"myChess = require(\"chess.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {squarePadding, squareWidth, squareToPosition } from \"@ee2dev/visualizing-chess-games\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {text, textarea, radio, slider, color, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"import { bind } from \"@mbostock/inline-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`#### Code` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof lightSquares = new View(\"#030000\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof darkSquares = new View(\"#000000\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"anyPgn = {\n let lichessAPI;\n let ret;\n const params = new URL(document.baseURI).searchParams;\n \n if (!params.has(\"id\")) {\n if (typeof myGame.message !== \"undefined\") {\n lichessAPI = \"https://lichess.org/game/export/\" + myGame.message.substr(20, 8);\n ret = d3.text(lichessAPI);\n } else {\n ret = myGame;\n }\n } else {\n lichessAPI = \"https://lichess.org/game/export/\" + params.get(\"id\").slice(-8);\n ret = d3.text(lichessAPI);\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"currentGame = {\n const chess = new myChess();\n chess.load_pgn(anyPgn);\n \n /*\n // make some moves\n chess.move('e4');\n chess.move('c5');\n chess.move('Nf3');\n chess.move('Nc6');\n chess.move('d4');\n chess.move('cxd4');\n */\n \n return chess.history({ verbose: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"colorOfPieces3 = { \n const p = \"#e41a1c\";\n const r = \"#377eb8\";\n const n = \"#4daf4a\";\n const b = \"#984ea3\";\n const q = \"#ff7f00\";\n const k = \"#ffff33\";\n \n const myMap = new Map();\n myMap.set(\"pw\", p);\n myMap.set(\"rw\", r);\n myMap.set(\"nw\", n);\n myMap.set(\"bw\", b);\n myMap.set(\"qw\", q);\n myMap.set(\"kw\", k);\n \n myMap.set(\"pb\", p); \n myMap.set(\"rb\", r);\n myMap.set(\"nb\", n);\n myMap.set(\"bb\", b);\n myMap.set(\"qb\", q);\n myMap.set(\"kb\", k);\n \n return myMap;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"