2f:T200f,chart = { const chart = html`

${style}

Click on a square to select a state and see how it moves.

`; let colIndex = 0; var svg = d3.select(chart).select("#vis") .append("svg") .attr("width", _width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // draw gridlines var grid = svg.append("g") .attr("class", "gridlines") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var row = grid.selectAll(".row") .data(gridData) .enter() .append("g") .attr("class", "row"); var column = row.selectAll(".cell") .data(function(d) { return d; }) .enter() .append("rect") .attr("class", "cell") .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("width", function(d) { return d.width; }) .attr("height", function(d) { return d.height; }) .style("fill", "white") .style("stroke", "lightgrey"); var gridMap = svg.append("g") .attr("class", "gridmap") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); yield chart; // Do the drawing const [data, links] = attachments; // function ready(data, links) { // group data by publication var nest = d3.nest() .key(function(d) { return d.publication; }) .entries(data); // create dropdown menu and populate with publication names var pubMenu = d3.select(chart).select("#pubDropdown"); pubMenu .append("select") .attr("id", "pubMenu") .selectAll("option") .data(links) .enter() .append("option") .attr("value", function(d, i) { return i; }) .text(function(d) { return d.publication; }); // set example link var source = d3.select("#nav-container") .append("div") .attr("id", "source") .html("Example"); function redraw() { // find which publication was selected from dropdown var selectedPub = pubMenu .select("select") .property("value"); source.html("Example") updateGridMap(links[selectedPub].publication); } // loop let i = 0; // Autoupdate the selector const interval = setInterval(() => { const j = Math.floor(Math.random()*(links.length-1)); pubMenu.select("select").property("selectedIndex", i = j + (j >= i)); console.log("interval", j, i); redraw(); }, 1500); // update grid map and example link when dropdown selection changes pubMenu.on("change", () => { clearInterval(interval); redraw(); }); // draw initial grid map drawGridMap(links[0].publication); // function to create initial map function drawGridMap(publication) { // filter data to return the object of publication of interest var selectPub = nest.find(function(d) { return d.key == publication; }); // use a key function to bind rects to states var states = gridMap.selectAll(".state") .data(selectPub.values, function(d) { return d.code; }); // draw state rects states.enter() .append("rect") .attr("class", function(d) { return "state " + d.code; }) .attr("x", function(d) { return (d.col - 1) * cellSize; }) .attr("y", function(d) { return (d.row - 1) * cellSize; }) .attr("width", cellSize) .attr("height", cellSize) // keep track of whether square is clicked through toggling class // cycle through five colours each time square is made active .on("click", function(d) { var square = d3.select(this); square.classed("active", !square.classed("active")); if (square.classed("active")) { square.style("opacity", 1); colIndex++; switch(colIndex%5) { case 0: square.style("fill", highlight[0]) break; case 1: square.style("fill", highlight[1]) break; case 2: square.style("fill", highlight[2]) break; case 3: square.style("fill", highlight[3]) break; case 4: square.style("fill", highlight[4]) break; } } else { square.style("fill", "#c0c0c0").style("opacity", 0.2); } }); var labels = gridMap.selectAll(".label") .data(selectPub.values, function(d) { return d.code; }); // add state labels labels.enter() .append("text") .attr("class", function(d) { return "label " + d.code; }) .attr("x", function(d) { return ((d.col - 1) * cellSize) + (cellSize / 2); }) .attr("y", function(d) { return ((d.row - 1) * cellSize) + (cellSize /2 + 5); }) .style("text-anchor", "middle") .text(function(d) { return d.code; }); } function updateGridMap(publication) { // filter data to return the object of publication of interest var selectPub = nest.find(function(d) { return d.key == publication; }); // update the data and transition var states = gridMap.selectAll(".state") .data(selectPub.values, function(d) { return d.code; }); // update existing states states.transition() .duration(500) .attr("x", function(d) { return (+d.col - 1) * cellSize; }) .attr("y", function(d) { return (+d.row - 1) * cellSize; }) .style("opacity", function(d) { if (d3.select(this).classed("active")) { return 1; } else {return 0.2; } }); // enter extra states states.enter() .append("rect") .attr("class", function(d) { return "state " + d.code; }) .attr("x", function(d) { return (+d.col - 1) * cellSize; }) .attr("y", function(d) { return (+d.row - 1) * cellSize; }) .attr("width", cellSize) .attr("height", cellSize) .on("click", function(d) { var square = d3.select(this); square.classed("active", !square.classed("active")); if (square.classed("active")) { square.style("opacity", 1); colIndex++; switch(colIndex%5) { case 0: square.style("fill", highlight[0]) break; case 1: square.style("fill", highlight[1]) break; case 2: square.style("fill", highlight[2]) break; case 3: square.style("fill", highlight[3]) break; case 4: square.style("fill", highlight[4]) break; } } else { square.style("fill", "#c0c0c0").style("opacity", 0.2); } }); // hide extra state by setting opacity to zero states.exit() .style("opacity", 0); // update labels var labels = gridMap.selectAll(".label") .data(selectPub.values, function(d) { return d.code; }); labels.transition() .duration(500) .attr("x", function(d) { return ((d.col - 1) * cellSize) + (cellSize / 2); }) .attr("y", function(d) { return ((d.row - 1) * cellSize) + (cellSize /2 + 5); }) .style("opacity", 1); labels.enter() .append("text") .attr("class", function(d) { return "label " + d.code; }) .attr("x", function(d) { return ((d.col - 1) * cellSize) + (cellSize / 2); }) .attr("y", function(d) { return ((d.row - 1) * cellSize) + (cellSize /2 + 5); }) .style("text-anchor", "middle") .text(function(d) { return d.code; }); labels.exit() .style("opacity", 0); } // }; // ready chart.redraw = redraw; invalidation.then(() => clearInterval(interval)) return chart; }30:[{"id":"73fd4d245b9e069841566c1cd870ab4bebb6f8b2939fe4a49841041bf9ed6ef7e86d5d23a0a4ebbe3f1a595e1b63c6d8a1c9332100d95427000b8bc25853c141","href":"https://static.observableusercontent.com/files/73fd4d245b9e069841566c1cd870ab4bebb6f8b2939fe4a49841041bf9ed6ef7e86d5d23a0a4ebbe3f1a595e1b63c6d8a1c9332100d95427000b8bc25853c141","name":"publication-grids.csv","type":"text/csv","lastModified":1679597165323.835,"size":22833},{"id":"0db4c3af3686ed368cb50c50c00c96769d7dd145c5cd482ab0bb226b408df53340ffa9e87bec3868bea9b4b08b6a8dc7f976815443076b41b683042a2b8e359f","href":"https://static.observableusercontent.com/files/0db4c3af3686ed368cb50c50c00c96769d7dd145c5cd482ab0bb226b408df53340ffa9e87bec3868bea9b4b08b6a8dc7f976815443076b41b683042a2b8e359f","name":"links.csv","type":"text/csv","lastModified":1679597165323.835,"size":1266}] 2d:{"title":"US grid maps","cells":[{"id":0,"value":"md`# US grid maps\n\nMigrating [Jane Pong's US grid maps bl.ock to observable](https://bl.ocks.org/officeofjane/2c3ed88c4be050d92765de912d71b7c4). Original README:\n\n> Different configurations of the US grid map, based on examples collected from various news sources.\n\n> Inspired by David Yanofsky's [post](http://blog.yanofsky.info/post/117635988235/there-appears-to-be-some-disagreement-on-the).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"margin = ({top:0, right:0, bottom:20, left:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"_width = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"height = width*0.6 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"// highlight colours\nhighlight = [\"#ffd700\", \"#9eebcf\", \"#96ccff\", \"#ff725c\", \"#ffa3d7\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"// calculate cellSize based on dimensions of svg\ncellSize = calcCellSize(width, height, 13, 8)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"// generate grid data with specified number of columns and rows\ngridData = getGridData(13, 8, cellSize)","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"// function to calculate grid cell size based on width and height of svg\n function calcCellSize(w, h, ncol, nrow) {\n // leave tiny space in margins\n var gridWidth = w - 2;\n var gridHeight = h - 2;\n var cellSize;\n\n // calculate size of cells in columns across\n var colWidth = Math.floor(gridWidth / ncol);\n // calculate size of cells in rows down\n var rowWidth = Math.floor(gridHeight / nrow);\n\n // take the smaller of the calculated cell sizes\n if (colWidth <= rowWidth) {\n cellSize = colWidth;\n } else {\n cellSize = rowWidth;\n }\n return cellSize;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":" // function that generates a nested array for square grid\nfunction getGridData(ncol, nrow, cellsize) {\n var gridData = [];\n var xpos = 1; // starting xpos and ypos at 1 so the stroke will show when we make the grid below \n var ypos = 1;\n\n // calculate width and height of the cell based on width and height of the canvas\n var cellSize = cellsize;\n\n // iterate for rows\n for (var row = 0; row < nrow; row++) {\n gridData.push([]);\n\n // iterate for cells/columns inside each row\n for (var col = 0; col < ncol; col++) {\n gridData[row].push({\n x: xpos,\n y: ypos,\n width: cellSize,\n height: cellSize\n });\n\n // increment x position (moving over by 50)\n xpos += cellSize;\n }\n\n // reset x position after a row is complete\n xpos = 1;\n // increment y position (moving down by 50)\n ypos += cellSize;\n }\n return gridData;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// {\n// var j = Math.floor(Math.random() * n);\n// menu.property(\"selectedIndex\", i = j + (j >= i));\n// update(options[i]);\n \n// chart.querySelector(\"#pubDropdown\")\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"attachments = Promise.all(\n [\n\n FileAttachment(\"publication-grids.csv\").text(),\n FileAttachment(\"links.csv\").text(), \n ].map(p => \n p.then(d3.csvParse)\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"style = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}