Just published an exploration of virtually every Wordle tweet, 15 million over the past 81 days: Wordle, 15 Million Tweets Later / Robert Lesser / Observable
Would love any feedback or questions regarding it!
10 Likes
What a wonderful exploration! Thanks for sharing.
2 Likes
Very nice.
Only tweek is the dates don’t show nicele here
Changing the ‘x’ from -105 to -94 fixed it for me.
Great analysis.
1 Like
A 
on your post is insufficient praise. 10/10 
2 Likes
Really appreciate the kind words everyone!
@hellonearthis, I tried changing the x from -105 to -94, and at least on my chrome browser it ended up like this:
What system are you viewing it on where that works better? Could you share a screenshot of what it looks like to you now?
Sent some tweaks to layout and increased the use of yScale that was defined.
I am using latest chrome and windows 10.
Not sure why it would crop the chart like that, could it be your browser has zoom/magnify set?
Also fixed this display issue:
marginRight:30, works on 1080p but marginRight:40, is needed at 4k
Oh my screenshot was just for the labels, the bars show up normally. When I changed 105->94, the dates and words overlapped a bit, but on your suggestion it shows up nicely thanks to the tick fix. Will merge your change in!
Next thing I need to fix is the dates showing up incorrectly for some: https://twitter.com/infobeautiful/status/1503904803776348161/photo/1
Probably due to me relying on the browser’s default format. Might need to explicitly set it as mm/dd/yy
1 Like
Not sure if this will help as not see that bug tweeted about happen.
I used new Date() on the wordleByHour, it’s still a string, but maybe having JS boop it will help.
I did try mapping the wordleByHour csv data
wordleByHourX = FileAttachment("wordleByHour (4).csv").csv({ typed: true })
wordleByHour = wordleByHourX.map( d => {
d.hour = new Date(d.hour)
return d
})
To be in Date format.
Only needed to change the Wordle Count by Hour and Number plot
x: (d) => new Date(d.hour.replace(" ", "T")), to
x: (d) => d.hour,
And the text is off by 1 pixel
.attr("y", (d) => plot.scale("y").apply(d) + bandwidth / 2-1)
// or this if updated :D
.attr("y", (d) => yScale.apply(d) + bandwidth / 2 -1)
or in the makeRoundBarPlot() add dy: of 1
y: {
dy: 1,
tickFormat: (d) => `${getWord(d)}`,
label: null,
Yes, i’m a little ocd 
1 Like
@RLesser Have you considered using a monospace font? That should make size estimates easier and also provide better alignment.
@hellonearthis I really appreciate the detail! I think the date issue was caused by the toLocaleString function. All my testing was done with en-US, which uses mm/dd/yy by default for the “short” datestyle. en-UK uses mm/dd/yyyy instead, which caused the issue. I’ve replaced my date formatting options to always be 2digit based.
Overall, I made the changes seen here:
- yScale usage fixed
- locale options changed from
dateStyle: "short"toyear: "2-digit", day: "numeric", month: "numeric" - date text x:
-105→-100 - score text x:
-8→-12 - label text y:
n→n - 1 - plot/y/tickPadding:
49→45 - added breakdown chart
marginRight: 50
This new version with these changes is published, let me know if you’re still having issues or see other smaller things.
@mootari I tried out a monospace, but didn’t love how it looked, especially given that everything else in the piece is non-mono:
1 Like