2b:null 2c:["$","title",null,{"children":"Alice Character Ranking | Richard Brath | Observable"}] 31:T8b9,chart = { const svg = d3.select(DOM.svg(800, 500)); svg.append("rect").attr("x",0).attr("y",0).attr("width",800).attr("height",500).attr("fill","#fffbeb"); svg.append("text").attr("x",30).attr("y",30).attr("fill","#263c54").attr("font-family","Lato") .text("Rankings of Characters from Wonderland, based on the book and Wikipedia activity 2015-2020") svg.selectAll("myHeaders").data(colHeaders).join("text") .attr("x",(d,i) => i*150+30).attr("y",60) .attr("font-family", "Saira Extra Condensed") .text( (d) => d ) const xpad = 30; const ypad = 70; var plot = svg.append("g").attr("transform", `translate(${xpad},${ypad})`) var table = plot.selectAll("myTable") .data(data) .join("g") // join data on the group, set tesxt params, all following text nodes will inherit .attr("font-weight", (d) => d.SpeakingRank<4? 900 : ( d.SpeakingRank>10?100:500 )) .attr("font-family", (d) => d.ViewRank <4? "Saira": ( d.ViewRank>10?"Saira Extra Condensed":"Saira Condensed")) .attr("fill", (d) => d.NumEditors < 4? "#407" : ( d.NumEditors>10?"#981":"#620" )) .attr("font-variant", (d) => d.PageSizeRank<4? "normal":( d.PageSizeRank>10?"normal":"small-caps")) //column by order of appearance table.append("text") .attr("x",0).attr("y", (d) => d['Order of Appearance']*20 ) .text( (d) => d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) //column by speaking rank table.append("text") .attr("x",150).attr("y", (d) => d.SpeakingRank*20 ) .text( (d) => d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) //sort by page views table.append("text") .attr("x",300).attr("y", (d) => d.ViewRank*20 ) .text( (d) => d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) //sort by numEditors views table.append("text") .attr("x",450).attr("y", (d) => d.NumEditors*20 ) .text( (d) => d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) //sort by article length (caps) views table.append("text") .attr("x",600).attr("y", (d) => d.PageSizeRank*20 ) .text( (d) => d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) return svg.node() }32:T545,chart2 = { const svg2 = d3.select(DOM.svg(1600, 200)); svg2.append("rect").attr("x",0).attr("y",0).attr("width",1600).attr("height",200).attr("fill","#fffbeb"); svg2.append("text").attr("x",25).attr("y",30).attr("fill","#263c54").attr("font-family","Lato") .text("Rankings of Characters from Wonderland, based on the book and Wikipedia activity 2015-2020") const xpad = 10; const ypad = 40; var plot = svg2.append("g").attr("transform", `translate(${xpad},${ypad})`) var sentence = plot.append("text").attr("x",0).attr("y", 100).attr("fill","#247").attr("style", "inline-size: 250px;") .attr("font-size",24) .text("List of characters ") sentence.selectAll("myspans") .data(data) .join("tspan") // join data on the text, set text params, all following text nodes will inherit .attr("font-weight", (d) => d.SpeakingRank<4? 900 : ( d.SpeakingRank>10?100:500 )) .attr("font-family", (d) => d.ViewRank <4? "Saira": ( d.ViewRank>10?"Saira Extra Condensed":"Saira Condensed")) .attr("fill", (d) => d.NumEditors < 4? "#407" : ( d.NumEditors>10?"#981":"#620" )) .attr("font-variant", (d) => d.PageSizeRank<4? "normal":( d.PageSizeRank>10?"normal":"small-caps")) .text( (d) => (d.PageSizeRank<4? d.Character.toUpperCase() : d.Character) + ", " ) return svg2.node() }33:Tea8,data = [ { "Character": "Alice", "Order of Appearance": 1, "SpeakingRank": 1, "ViewRank": 3, "EditRank": 3, "NumEditors": 5, "PageSizeRank": 1, "Avg Rank": 2.6 }, { "Character": "White Rabbit", "Order of Appearance": 2, "SpeakingRank": 4, "ViewRank": 1, "EditRank": 5, "NumEditors": 4, "PageSizeRank": 5, "Avg Rank": 3.8 }, { "Character": "Mouse", "Order of Appearance": 3, "SpeakingRank": 6, "ViewRank": 16, "EditRank": 16, "NumEditors": 16, "PageSizeRank": 17, "Avg Rank": 14.2 }, { "Character": "Lory", "Order of Appearance": 4, "SpeakingRank": 17, "ViewRank": 18, "EditRank": 18, "NumEditors": 18, "PageSizeRank": 18, "Avg Rank": 17.8 }, { "Character": "Duck", "Order of Appearance": 5, "SpeakingRank": 18, "ViewRank": 20, "EditRank": 18, "NumEditors": 18, "PageSizeRank": 18, "Avg Rank": 18.4 }, { "Character": "Dodo", "Order of Appearance": 6, "SpeakingRank": 14, "ViewRank": 12, "EditRank": 11, "NumEditors": 11, "PageSizeRank": 12, "Avg Rank": 12 }, { "Character": "Eaglet", "Order of Appearance": 7, "SpeakingRank": 20, "ViewRank": 19, "EditRank": 18, "NumEditors": 18, "PageSizeRank": 18, "Avg Rank": 18.6 }, { "Character": "Pat", "Order of Appearance": 8, "SpeakingRank": 15, "ViewRank": 17, "EditRank": 17, "NumEditors": 17, "PageSizeRank": 14, "Avg Rank": 16 }, { "Character": "Bill the Lizard", "Order of Appearance": 9, "SpeakingRank": 16, "ViewRank": 14, "EditRank": 13, "NumEditors": 15, "PageSizeRank": 13, "Avg Rank": 14.2 }, { "Character": "Caterpillar", "Order of Appearance": 10, "SpeakingRank": 12, "ViewRank": 6, "EditRank": 7, "NumEditors": 6, "PageSizeRank": 9, "Avg Rank": 8 }, { "Character": "Duchess", "Order of Appearance": 11, "SpeakingRank": 8, "ViewRank": 11, "EditRank": 9, "NumEditors": 10, "PageSizeRank": 7, "Avg Rank": 9 }, { "Character": "Cheshire Cat", "Order of Appearance": 12, "SpeakingRank": 11, "ViewRank": 2, "EditRank": 1, "NumEditors": 1, "PageSizeRank": 2, "Avg Rank": 3.4 }, { "Character": "March Hare", "Order of Appearance": 13, "SpeakingRank": 13, "ViewRank": 7, "EditRank": 8, "NumEditors": 8, "PageSizeRank": 8, "Avg Rank": 8.8 }, { "Character": "Hatter", "Order of Appearance": 14, "SpeakingRank": 3, "ViewRank": 4, "EditRank": 2, "NumEditors": 2, "PageSizeRank": 3, "Avg Rank": 2.8 }, { "Character": "The Dormouse", "Order of Appearance": 15, "SpeakingRank": 10, "ViewRank": 9, "EditRank": 6, "NumEditors": 7, "PageSizeRank": 6, "Avg Rank": 7.6 }, { "Character": "Queen of Hearts", "Order of Appearance": 16, "SpeakingRank": 9, "ViewRank": 5, "EditRank": 4, "NumEditors": 3, "PageSizeRank": 4, "Avg Rank": 5 }, { "Character": "King of Hearts", "Order of Appearance": 17, "SpeakingRank": 5, "ViewRank": 13, "EditRank": 15, "NumEditors": 13, "PageSizeRank": 15, "Avg Rank": 12.2 }, { "Character": "Gryphon", "Order of Appearance": 18, "SpeakingRank": 7, "ViewRank": 15, "EditRank": 14, "NumEditors": 14, "PageSizeRank": 16, "Avg Rank": 13 }, { "Character": "Mock Turtle", "Order of Appearance": 19, "SpeakingRank": 2, "ViewRank": 10, "EditRank": 10, "NumEditors": 9, "PageSizeRank": 10, "Avg Rank": 8.2 }, { "Character": "Knave of Hearts", "Order of Appearance": 20, "SpeakingRank": 19, "ViewRank": 8, "EditRank": 12, "NumEditors": 12, "PageSizeRank": 11, "Avg Rank": 12.4 } ];34:[] 2f:{"id":"c68faf46ae079d5d","slug":null,"title":"Alice Character Ranking","thumbnail":"cf35254ccb8dba9eb810accc067e2b9c5b48d441736f906acacafbe6cd0076a7","access_level":"public","create_time":"$D2021-05-27T21:09:08.600Z","update_time":"$D2024-06-27T10:21:25.533Z","view_time":null,"first_public_time":"$D2024-06-27T10:21:50.713Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8fcdc34ffb173c01","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":"starter_2024"},"version":144,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"79a3bb98f70c0b2a","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":null}],"members":[{"type":"individual","id":"79a3bb98f70c0b2a","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":null,"role":"editor"},{"type":"team","id":"8fcdc34ffb173c01","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Alice Character Ranking","cells":[{"id":0,"value":"md`# Alice Character Ranking`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`There are many kinds of ranking charts, generally showing items in rank order top down. Bump charts are popular, showing change in rank over time. I've used bump charts professionally in a variety of financial applications. \n\nLewis Carrol wrote some very interesting characters. 20 of them have unique web pages on Wikipedia. _How do they stack up?_ \n\nUnlike a bump chart, this isn't a comparison over time, rather a comparison over different ranking metrics. Each metric can map to a different visual typographic attribute, thereby encoding multimetrics per label. Each column ranks the characters based on an attribute. Each column has a unique format, heavy weight for the most talkative, a wider font fo the most page views, dark color for most editted, all caps for the longest articles. None of the characters are consistently in the top three, but the HATTER always makes the top four. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"font = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"colHeaders = [\"Order of Appearance\",\"Most Talkative (weight)\", \"Most Page Views (width)\", \"Most Editors (color)\", \"Longest Article (caps)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"