31: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; }32: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; }33: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; }34:[] 2f:{"title":"Visualizing chess games - Part 2","cells":[{"id":0,"value":"md`# Visualizing chess games - Part 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md `## Choose a chess game to be visualized...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof gameInputSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":19,"value":"version18();\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`#### Libraries and imports` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"myChess = require(\"chess.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { colorOfPieces3, squarePadding, squareWidth, squareToPosition } from \"@ee2dev/visualizing-chess-games\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {text, textarea, radio, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`#### Code` ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":61,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}