2c:null 2d:["$","title",null,{"children":"Visualizing chess games - Part 2 | ee2dev | Observable"}] 32:T780,function version18() { // const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const svg = drawChessboard(); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .append("g") .attr("class", "glow") .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) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", 5) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("id", (d,i) => "move-" + i) .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) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("fill", (d, i) => colorOfPieces3.get(d.piece + d.color)) //.style("stroke-width", 5) .style("stroke-linejoin", "round") //.attr('marker-end','url(' + window.location + '#arrowhead)'); // .style("fill", "none"); d3.select(svg).selectAll(".piece-move") .style("filter","url(" + window.location + "#glow3)"); 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":"d0c89b1b662cd278","slug":"visualizing-chess-games-part-2","title":"Visualizing chess games - Part 2","thumbnail":"257c6dc7e10f250df86a07c2ea5f93e3841207b71faeb182404bc2fbbcbedaf1","access_level":"public","create_time":"$D2019-08-19T16:58:13.818Z","update_time":"$D2026-01-03T00:28:40.875Z","view_time":null,"first_public_time":"$D2019-08-19T17:35:58.573Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":108,"publish_version":108,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"78ddaf6b768fe3d5","slug":"chess","title":"chess","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"type":"notebook","body":{"titling":"auto","title":"Visualizing chess games - Part 2","cells":[{"id":0,"value":"md`# Visualizing chess games - Part 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof gameInputSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"version18();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`#### Libraries and imports` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"myChess = require(\"chess.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import { colorOfPieces3, squarePadding, squareWidth, squareToPosition } from \"@ee2dev/visualizing-chess-games\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {text, textarea, radio, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`#### Code` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"anyPgn = {\n let lichessAPI;\n let ret;\n \n if (window.location.search.length === 0) {\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/\" + window.location.search.slice(-8);\n ret = d3.text(lichessAPI);\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"