2d:null 2e:["$","title",null,{"children":"Wordle helper table | Jason Curtis | Observable"}] 33:T4d2,{ var colorScale = d3.scaleLinear() .range(["white", "blue"]) .domain([1, 100]); // // Commonality // const table = html`

		Placement
Letter	Vowel	1	2	3	4	5

` table.append(... _.map(letterDetails, details=>{ const countCells = details.counts.map(count=>{ const percentage = Math.round(count / details.total * 100); // const color = colorScale(count) return html`${percentage}%` }) const vowelCellClass = details.isVowel ? 'vowel' : 'nonvowel'; const vowelCellContent = details.isVowel ? 'yes' : 'no'; const vowelCell = html`${vowelCellContent}`; return html` ${details.letter} ${vowelCell} ${countCells} ` }) ); return table; }34:T5f6,{ const fullWidth = 450; const fullHeight = 450; const margin = {top: 80, right: 25, bottom: 30, left: 40}; const width = fullWidth - margin.left - margin.right; const height = fullHeight - margin.top - margin.bottom; const boxBorderRadius = 4; const svg = d3.create("svg").attr("width", fullWidth).attr("height", fullHeight); const colorMap = d3.scaleLinear().domain([0, Math.max(..._.map(letterDetails, 'total'))]).range(['white', 'red']); // X scale var x = d3.scaleBand() .range([0, width]) .domain([0, 4]) .padding(0.05); svg.append("g") .style("font-size", 15) .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).tickSize(0)) // .select(".domain").remove() // Y scales and axis: var y = d3.scaleBand() .range([ height, 0 ]) .domain(_.map(letterDetails, 'letter')) .padding(0.05); svg.append("g") .style("font-size", 15) .call(d3.axisLeft(y).tickSize(0)) // .select(".domain").remove() const rects = svg.selectAll() .data(letterDetails) .enter() .append("rect") .attr("x", function(d) { return x(0) }) .attr("y", function(d) { return y(d.letter) }) .attr("rx", boxBorderRadius) .attr("ry", boxBorderRadius) .attr("width", x.bandwidth() ) .attr("height", y.bandwidth() ) .style("fill", d => colorMap(d.counts[0]) ) .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) return svg.node(); }35:Te25,{ // heatmap adapted from https://www.d3-graph-gallery.com/graph/heatmap_style.html // set the dimensions and margins of the graph var margin = {top: 80, right: 25, bottom: 30, left: 40}, width = 450 - margin.left - margin.right, height = 450 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Read the data d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) { // Labels of row and columns -> unique identifier of the column called 'group' and 'variable' var myGroups = d3.map(data, function(d){return d.group;}).keys() var myVars = d3.map(data, function(d){return d.variable;}).keys() // Build X scales and axis: var x = d3.scaleBand() .range([ 0, width ]) .domain(myGroups) .padding(0.05); svg.append("g") .style("font-size", 15) .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).tickSize(0)) .select(".domain").remove() // Build Y scales and axis: var y = d3.scaleBand() .range([ height, 0 ]) .domain(myVars) .padding(0.05); svg.append("g") .style("font-size", 15) .call(d3.axisLeft(y).tickSize(0)) .select(".domain").remove() // Build color scale var myColor = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain([1,100]) // create a tooltip var tooltip = d3.select("#my_dataviz") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") // Three function that change the tooltip when user hover / move / leave a cell var mouseover = function(d) { tooltip .style("opacity", 1) d3.select(this) .style("stroke", "black") .style("opacity", 1) } var mousemove = function(d) { tooltip .html("The exact value of
this cell is: " + d.value) .style("left", (d3.mouse(this)[0]+70) + "px") .style("top", (d3.mouse(this)[1]) + "px") } var mouseleave = function(d) { tooltip .style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 0.8) } // add the squares svg.selectAll() .data(data, function(d) {return d.group+':'+d.variable;}) .enter() .append("rect") .attr("x", function(d) { return x(d.group) }) .attr("y", function(d) { return y(d.variable) }) .attr("rx", 4) .attr("ry", 4) .attr("width", x.bandwidth() ) .attr("height", y.bandwidth() ) .style("fill", function(d) { return myColor(d.value)} ) .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) }) // Add title to graph svg.append("text") .attr("x", 0) .attr("y", -50) .attr("text-anchor", "left") .style("font-size", "22px") .text("A d3.js heatmap"); // Add subtitle to graph svg.append("text") .attr("x", 0) .attr("y", -20) .attr("text-anchor", "left") .style("font-size", "14px") .style("fill", "grey") .style("max-width", 400) .text("A short description of the take-away message of this chart."); return svg }36:[{"id":"658f80732cd3868a55f65da77b0e240af208fb65221ac82e31fe86623c9491e683394fbbed346fcdee5d9226b469fdb08f6f78fe950ef340d9d3725221a6c980","href":"https://static.observableusercontent.com/files/658f80732cd3868a55f65da77b0e240af208fb65221ac82e31fe86623c9491e683394fbbed346fcdee5d9226b469fdb08f6f78fe950ef340d9d3725221a6c980","name":"wordle_words.csv","type":"text/csv","lastModified":1643170979057.78,"size":74599}] 31:{"id":"fdfc552415f59575","slug":"wordle-table","title":"Wordle helper table","thumbnail":"f008ac0f4b72d658b82dfe52ccfbbbc7803e0ae0a70197dfc84b426f28aa876c","access_level":"public","create_time":"$D2022-01-25T23:12:53.672Z","update_time":"$D2022-11-01T16:21:57.050Z","view_time":null,"first_public_time":"$D2022-02-14T02:43:41.201Z","has_unpublished_edits":null,"fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"57eebc71716a99f4","login":"jason-curtis","name":"Jason Curtis","avatar_url":"https://avatars-next.observableusercontent.com/0ff06d86c15d371b8c5b4b4e40cdc1f614b65344e0d6f702fbc6e77936a7b15b","tier":"starter_2024"},"version":633,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e324ad962f33df1f","login":"jason-curtis","name":"Jason Curtis","avatar_url":"https://avatars-next.observableusercontent.com/0ff06d86c15d371b8c5b4b4e40cdc1f614b65344e0d6f702fbc6e77936a7b15b","tier":null}],"members":[{"type":"individual","id":"e324ad962f33df1f","login":"jason-curtis","name":"Jason Curtis","avatar_url":"https://avatars-next.observableusercontent.com/0ff06d86c15d371b8c5b4b4e40cdc1f614b65344e0d6f702fbc6e77936a7b15b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Wordle helper table","cells":[{"id":608,"value":"# Wordle helper table\nWhat are the most common positions for each letter?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Wordle Word analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"# Analysis plan\n\n* 🗹 get all the words\n* 🗹 most common letters\n* 🗹 heatmap of letter locations\n* ☐ words that have letters in these locations","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"wordsRaw = FileAttachment(\"wordle_words.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"words = wordsRaw.split(\"\\r\\n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"countLetterLocations = (counted, word)=>{\n [...word].forEach((letter, index)=>{\n let letterCounts = counted[letter] || [0, 0, 0, 0, 0]\n letterCounts[index] = letterCounts[index] + 1\n counted[letter] = letterCounts\n })\n return counted\n }\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"letterLocations = words.reduce(countLetterLocations, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"\n // like {a: 1234} where 1234 is the most times \"a\" showed up in a particular space (eg. the third space) in the words \n letterLocationMaxPerLetter = _.mapValues(letterLocations, (counts)=>Math.max(...counts));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"\n // maximum across all letters, of times where a particular letter occured in a space\n globalMaxLetterLocation = Math.max(..._.values(letterLocationMaxPerLetter));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"letterDetails = {\n // bag of handy stats per letter\n const letterLocationDetails = _.mapValues(letterLocations, (counts, letter)=>{\n const max = Math.max(...counts);\n const total = counts.reduce((a,b)=>a+b, 0);\n const countsNormalizedByTotalForThisLetter = counts.map(count=>count / total);\n const countsNormalizedByMaxForThisLetter = counts.map(count=>count / max);\n const countsNormalizedGlobal = counts.map(count=>count / globalMaxLetterLocation);\n const mostCommonLocation = _.indexOf(counts, max) + 1;\n const isVowel = _.includes(\"aeiou\", letter);\n \n return {\n letter,\n max,\n total,\n counts,\n isVowel,\n mostCommonLocation,\n countsNormalizedByMaxForThisLetter,\n countsNormalizedByTotalForThisLetter,\n countsNormalizedGlobal,\n }\n });\n\n return _.orderBy(_.values(letterLocationDetails), 'total', 'desc') \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"letterSpaceDetails = _.flatten(\n _.map(\n letterDetails,\n details => _.range(5).map(\n space=>{\n return {\n letter: details.letter,\n isVowel: details.isVowel,\n count: details.counts[space],\n isMostCommonLocation: details.mostCommonLocation === space,\n // countNormalizedByMaxForThisLetter: details.countNormalizedByMaxForThisLetter[space],\n countNormalizedByTotalForThisLetter: details.countsNormalizedByTotalForThisLetter[space],\n countNormalizedGlobal: details.countsNormalizedGlobal[space],\n }\n }\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"