2c:null 2d:["$","title",null,{"children":"Untitled | Richard Brath | Observable"}] 32:T446,## Sparklines, sparkwords and word-size glyphs as bullets Sparklines and other word-sized glyphs can be set in the middle of running text. The potential advantage is that you don't have to cross-reference a distant visualization to compare the written text and the data visualization. But, sometimes you just want to read text and ignore the glyphs. However, these glyphs are hard to ignore - they don't follow the same weights as fonts. They are sprinkled throughout text making them disruptive to linear reading. Galileo had sparkline-like visualizations of the moons of Jupiter set on separate lines between paragraphs, making it easier to attend to the visualizations or the text. A modern common convention is the use of bullet points aid visually scanning separate statements. But bullets are just placeholder graphics to draw your eye to the start of each successive statement. Instead, these bullets could be data visualizations - thus providing dual roles of marking the beginning of each successive text statement and providing word-sized data visualizations relevant to the text. 33:T571,{ var filtereddata = data.filter( function(a) { return a.WikiView > 500000;}); // create a table var ht = d3.create('html'); var table = ht.append('table'); var rows = table.selectAll('tr').data(filtereddata).enter().append('tr'); // data here to create columns and create unique ID per column for each cell for later selection var cells = rows.selectAll('td').data([0,1]).enter().append('td') .attr("id", function(d) {return 'cell'+d;}) // now select each column then put contents in table.selectAll('#cell1').data(filtereddata) .text(function (d) {return d.WikiIntro}) // these are some teeny sparkline bar charts table.selectAll('#cell0').data(filtereddata) var svgs= table.selectAll('#cell0').data(filtereddata).text("") .append('svg') .attr('width',50).attr('height',20) svgs.append('line') .attr('x1',0).attr('x2',50).attr('y1',16).attr('y2',16).attr('stroke','black') svgs.selectAll('foo').data( function (d) {return d.OccurPerChapArray;}).enter().append('rect') .attr('height', function(d,i) {return d*.3;}) // scales would be better rather than hardcoded numbers .attr('width', 4) .attr('x', function(d,i) {return i*4;}) .attr('y', function(d,i) {return 15-d*.3;}) .attr('stroke','white') .attr('stroke-width',.5) .attr('fill', 'black') .attr('fill-opacity',0.8) return ht.node(); }34:T89a,{ var filtereddata = data.filter( function(a) { return a.WikiView > 500000;}); var ht = d3.create('html'); var table = ht.append('table'); var rows = table.selectAll('tr').data(filtereddata).enter().append('tr'); // data here to create columns and create unique ID per column for each cell for later selection var cells = rows.selectAll('td').data([0,1]).enter().append('td') .attr("id", function(d) {return 'cell'+d;}) table.selectAll('#cell1').data(filtereddata) .text(function (d) {return d.WikiIntro}) // the rest of this makes the radar glyph. probably better to do in polar layout, but this works var svgs= table.selectAll('#cell0').data(filtereddata).text("") .append('svg') .attr('width',30).attr('height',20) .append('g') .attr('transform','translate(20,10)') .attr('x1',0).attr('y1',0).attr('stroke','red').attr('stroke-width',1) svgs.append('line') // north .attr('x2',0) .attr('y2', function(d) { return -1*starChap(d.NumChap) }) svgs.append('line') // east .attr('x2', function(d) { return starFreq(d.MentionPerChap) }) .attr('y2', 0) svgs.append('line') //south .attr('x2',0) .attr('y2', function(d) { return starView(d.WikiView) }) svgs.append('line') // west .attr('x2', function(d) { return -1*starPagelen(d.WikiLength) }) .attr('y2',0) svgs.append('path') //outline and fill .attr('stroke-width','1') .attr('fill','red') .attr('fill-opacity',0.15) .attr('d', function(d) { return " " + " M 0," + -1*starChap(d.NumChap) + " L " + starFreq(d.MentionPerChap) + ",0" + " L 0," + starView(d.WikiView) + " L " + -1*starPagelen(d.WikiLength) + ",0 Z" }) .append("title") //this is a tooltip .text(function (d) {return "N: Number chapters: " + d.NumChap + "\nE: Mentions per chapter: " + d.MentionPerChap + "\nS: Wikipedia page views: " + Math.trunc(d.WikiView/1000) + "k" + "\nW: Wikipedia page length: " + Math.trunc(d.WikiLength/6) + " words" ;}) return ht.node(); }35:T41f,## So what? Sparklines (and other word size glyphs) can be disruptive to reading when embedded in the middle of a text flow. This disruption can be exacerbated by using weights and densities different that the surrounding text, thereby drawing attention to this difference (much like a bold word popping out in the middle of a paragraph). Even if the density of the sparkline is close to the surrounding text, it is still disruptive to reading as the sparkline literally splits the flow of text. Alternative text layouts that spatially separate the sparkline from the direct text flow can help reading. Then by having the sparkline in close proximity, the reader does not need to search for the matching sparkline. By using sparklines as bullets, we re-use the bullet convention that most readers are already familiar with, from sources such as PowerPoint slides, research papers, or check lists -- where the bullet is a cue to the starting point of each successive text statement. The bullets are made more useful by conveying data in tiny sparklines. 36:T42f5,data = [ { "Character": "Alice", "Total": 392, "1": 27, "2": 24, "3": 23, "4": 31, "5": 35, "6": 43, "7": 51, "8": 39, "9": 52, "10": 29, "11": 15, "12": 23, "NumChap": 12, "FirstChap": 1, "MentionPerChap": 32.67, "WikiView": 910800, "WikiLength": 34409, "WikiViewVsMentions": 2323.5, "WikiLengthVsMention": 87.8, "OccurPerChapStr": "AxwEIQYMZCowl", "OccurPerChapArray": [24,23,31,35,43,51,39,52,29,15,23,12,1], "WikiIntro": "Alice is the main protagonist. A child in the mid-Victorian era, Alice unintentionally goes on an underground adventure after accidentally falling down a rabbit hole into Wonderland; in the sequel, she steps through a mirror into an alternative world.", "LLMdescription": "Alice is an important character that allows the reader to examine the concept of self. The novel is told in first person point of view through the eyes of a little girl named Alice. Throughout the novel Alice goes through a process of identity construction." }, { "Character": "Rabbit", "Total": 47, "1": 6, "2": 4, "3": 0, "4": 14, "5": 0, "6": 0, "7": 0, "8": 6, "9": 0, "10": 1, "11": 8, "12": 8, "NumChap": 7, "FirstChap": 1, "MentionPerChap": 6.71, "WikiView": 1763632, "WikiLength": 21525, "WikiViewVsMentions": 37524.1, "WikiLengthVsMention": 458, "OccurPerChapStr": "fdanaaafaahhg", "OccurPerChapArray": [4,0,14,0,0,0,6,0,1,8,8,7,1], "WikiIntro": "The White Rabbit appears at the very beginning of the book, in chapter one, wearing a waistcoat, and muttering \"Oh dear! Oh dear! I shall be too late!\"", "LLMdescription": "The White Rabbit can be described as both a dream and nightmare. In the nightmare, the White Rabbit reminds Alice of her impermanence and that she is always late, much like our own tendency to live in the future." }, { "Character": "Mouse", "Total": 42, "1": 1, "2": 19, "3": 20, "4": 1, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 1, "NumChap": 5, "FirstChap": 1, "MentionPerChap": 8.4, "WikiView": 62426, "WikiLength": 5359, "WikiViewVsMentions": 1486.3, "WikiLengthVsMention": 127.6, "OccurPerChapStr": "astaaaaaaaaae", "OccurPerChapArray": [19,20,1,0,0,0,0,0,0,0,1,5,1], "WikiIntro": "The Mouse appears in Chapter II \"The Pool of Tears\" and Chapter III \"A Caucus-Race and a Long Tale\". ", "LLMdescription": "The Mouse is the epitome of perfectionism. After all, she is perpetually busy tending to her every detail, even at the risk of neglecting the larger picture." }, { "Character": "Dodo", "Total": 13, "1": 0, "2": 1, "3": 12, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "NumChap": 2, "FirstChap": 2, "MentionPerChap": 6.5, "WikiView": 158802, "WikiLength": 7546, "WikiViewVsMentions": 12215.5, "WikiLengthVsMention": 580.5, "OccurPerChapStr": "aalaaaaaaaaab", "OccurPerChapArray": [1,12,0,0,0,0,0,0,0,0,0,2,2], "WikiIntro": "The Dodo is a caricature of the author. A popular but unsubstantiated belief is that Dodgson chose the particular animal to represent himself because of his stammer, and thus would accidentally introduce himself as \"Do-do-dodgson\".", "LLMdescription": "The Dodo is a symbol of Lewis Carroll's humor and satire. However, its significance is much more than that. It is an example of the presence of child-like qualities, such as innocence and a sense of wonder, in adults. " }, { "Character": "Lory", "Total": 7, "1": 0, "2": 1, "3": 6, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "NumChap": 2, "FirstChap": 2, "MentionPerChap": 3.5, "WikiView": 31508, "WikiLength": 170, "WikiViewVsMentions": 4501.1, "WikiLengthVsMention": 24.3, "OccurPerChapStr": "aafaaaaaaaaab", "OccurPerChapArray": [1,6,0,0,0,0,0,0,0,0,0,2,2], "WikiIntro": "The Lory character was based on Lorina Charlotte Liddell, Alice's older sister reflecting on the Victorian era that older siblings had more power over the younger sibling.", "LLMdescription": "The Lory is a beautiful specimen. Her name is well suited to her appearance, as a lory is a brightly coloured bird with a black beak. " }, { "Character": "Eaglet", "Total": 3, "1": 0, "2": 1, "3": 2, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "NumChap": 2, "FirstChap": 2, "MentionPerChap": 1.5, "WikiView": 19081, "WikiLength": 170, "WikiViewVsMentions": 6360.3, "WikiLengthVsMention": 56.7, "OccurPerChapStr": "aabaaaaaaaaab", "OccurPerChapArray": [1,2,0,0,0,0,0,0,0,0,0,2,2], "WikiIntro": "The Eaglet was also another sister, Edith Liddell.", "LLMdescription": "The Eaglet is an ambitious bird that has never really grown up and always getting into trouble. " }, { "Character": "Duck", "Total": 4, "1": 0, "2": 1, "3": 2, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 1, "11": 0, "12": 0, "NumChap": 3, "FirstChap": 2, "MentionPerChap": 1.33, "WikiView": 16050, "WikiLength": 170, "WikiViewVsMentions": 4012.5, "WikiLengthVsMention": 42.5, "OccurPerChapStr": "aabaaaaaaaaac", "OccurPerChapArray": [1,2,0,0,0,0,0,0,1,0,0,3,2], "WikiIntro": "The Duck was a caricature of Rev. Robinson Duckworth.", "LLMdescription": "The Duck is a bit paranoid and maybe even a bit \"quackers\". " }, { "Character": "Pat", "Total": 2, "1": 0, "2": 0, "3": 0, "4": 2, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "NumChap": 1, "FirstChap": 4, "MentionPerChap": 2, "WikiView": 47147, "WikiLength": 6945, "WikiViewVsMentions": 23573.5, "WikiLengthVsMention": 3472.5, "OccurPerChapStr": "aaabaaaaaaaaa", "OccurPerChapArray": [0,0,2,0,0,0,0,0,0,0,0,1,4], "WikiIntro": "Pat appears in the chapter \"The Rabbit Sends in a Little Bill.\" He works for the White Rabbit like his friend Bill the Lizard. Carroll never gives any description of the character other than being a gardener, and his species has been widely debated, with evidence showing he is likely to be a monkey or a guinea pig", "LLMdescription": "Pat is like a cute bunny, a furry creature with pink fur and an enormous grin. As the story progresses, we see Alice interact with Pat and eventually get to know him better." }, { "Character": "Bill", "Total": 17, "1": 0, "2": 0, "3": 0, "4": 14, "5": 0, "6": 0, "7": 0, "8": 0, "9": 1, "10": 0, "11": 1, "12": 1, "NumChap": 4, "FirstChap": 4, "MentionPerChap": 4.25, "WikiView": 88997, "WikiLength": 7484, "WikiViewVsMentions": 5235.1, "WikiLengthVsMention": 440.2, "OccurPerChapStr": "aaanaaaaaaaad", "OccurPerChapArray": [0,0,14,0,0,0,0,1,0,1,1,4,4], "WikiIntro": "Bill the Lizard is introduced in \"Chapter Four – The Rabbit Sends a Little Bill\". Bill the Lizard is perceived by Alice to be someone who does all of the hard work for the White Rabbit and other Wonderland denizens.", "LLMdescription": "Bill the Lizard is \"cryptic\" as he usually only utters single words, or short phrases that make no sense, like \"lesson learned\" or \"no difference.\"" }, { "Character": "Caterpillar", "Total": 28, "1": 0, "2": 0, "3": 0, "4": 1, "5": 26, "6": 0, "7": 0, "8": 0, "9": 0, "10": 1, "11": 0, "12": 0, "NumChap": 3, "FirstChap": 4, "MentionPerChap": 9.33, "WikiView": 509161, "WikiLength": 9847, "WikiViewVsMentions": 18184.3, "WikiLengthVsMention": 351.7, "OccurPerChapStr": "aaaazaaaaaaac", "OccurPerChapArray": [0,0,1,26,0,0,0,0,1,0,0,3,4], "WikiIntro": "The Caterpillar is also known as the Hookah-Smoking Caterpillar.", "LLMdescription": "The Caterpillar is a surrealist and absurdist character. According to some critics, the Caterpillar represents the use of logic to attack absurdity and nonsense." }, { "Character": "Duchess", "Total": 42, "1": 0, "2": 2, "3": 0, "4": 2, "5": 0, "6": 14, "7": 0, "8": 3, "9": 19, "10": 0, "11": 1, "12": 1, "NumChap": 7, "FirstChap": 2, "MentionPerChap": 6, "WikiView": 167893, "WikiLength": 10559, "WikiViewVsMentions": 3997.5, "WikiLengthVsMention": 251.4, "OccurPerChapStr": "ababanacsaaag", "OccurPerChapArray": [2,0,2,0,14,0,3,19,0,1,1,7,2], "WikiIntro": "The Duchess is not described physically in much detail, although as stated in Chapter 9, \"Alice did not much like keeping so close to her: first, because the Duchess was very ugly; and secondly, because she was exactly the right height to rest her chin upon Alice’s shoulder, and it was an uncomfortably sharp chin.\"", "LLMdescription": "The Duchess is a dignified, decent, mature woman. When Alice gets curious about the world around her, the Duchess teaches her that, even in the most puzzling situations, one can always find a solution, no matter how absurd." }, { "Character": "Cat", "Total": 37, "1": 1, "2": 1, "3": 2, "4": 0, "5": 0, "6": 22, "7": 0, "8": 11, "9": 0, "10": 0, "11": 0, "12": 0, "NumChap": 5, "FirstChap": 1, "MentionPerChap": 7.4, "WikiView": 1746010, "WikiLength": 33247, "WikiViewVsMentions": 47189.5, "WikiLengthVsMention": 898.6, "OccurPerChapStr": "aabaavakaaaae", "OccurPerChapArray": [1,2,0,0,22,0,11,0,0,0,0,5,1], "WikiIntro": "The Cheshire Cat is known for its distinctive mischievous grin. While now most often used in Alice-related contexts, the association of a \"Cheshire cat\" with grinning predates the 1865 book. It has transcended the context of literature and become enmeshed in popular culture, appearing in various forms of media, from political cartoons to television, as well as in cross-disciplinary studies, from business to science.", "LLMdescription": "The Cheshire Cat is the most important, mysterious, and evasive characters in Lewis Carroll's story. The Cheshire Cat can be compared to the famous painter Salvador Dali in that they are both mysterious, elusive, and complex." }, { "Character": "Hatter", "Total": 56, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 2, "7": 33, "8": 0, "9": 0, "10": 0, "11": 21, "12": 0, "NumChap": 3, "FirstChap": 6, "MentionPerChap": 18.67, "WikiView": 826548, "WikiLength": 28656, "WikiViewVsMentions": 14759.8, "WikiLengthVsMention": 511.7, "OccurPerChapStr": "aaaaabGaaauac", "OccurPerChapArray": [0,0,0,0,2,33,0,0,0,21,0,3,6], "WikiIntro": "The Hatter is very often referred to as the Mad Hatter, though this term was never used by Carroll. The phrase \"mad as a hatter\" pre-dates Carroll's works. The Hatter and the March Hare are referred to as \"both mad\" by the Cheshire Cat.", "LLMdescription": "The Hatter is insane madman, but is also wise, educated, polite, and even friendly. The phrase \"mad as a hatter\" originated from the use of mercury in 18th century England, and as a result, hatter's suffered severe neurological damage." }, { "Character": "Hare", "Total": 31, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 4, "7": 21, "8": 0, "9": 0, "10": 0, "11": 5, "12": 1, "NumChap": 4, "FirstChap": 6, "MentionPerChap": 7.75, "WikiView": 385346, "WikiLength": 10058, "WikiViewVsMentions": 12430.5, "WikiLengthVsMention": 324.5, "OccurPerChapStr": "aaaaaduaaaead", "OccurPerChapArray": [0,0,0,0,4,21,0,0,0,5,1,4,6], "WikiIntro": "The March Hare (called Haigha in Through the Looking-Glass) is most famous for appearing in the tea party scene in Lewis Carroll's 1865 book Alice's Adventures in Wonderland.", "LLMdescription": "The March Hare is nonsensical. He's always muttering to himself, as if he has something very important to say, but in fact is talking nonsense." }, { "Character": "Dormouse", "Total": 40, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 27, "8": 0, "9": 0, "10": 0, "11": 13, "12": 0, "NumChap": 2, "FirstChap": 7, "MentionPerChap": 20, "WikiView": 238658, "WikiLength": 11726, "WikiViewVsMentions": 5966.5, "WikiLengthVsMention": 293.2, "OccurPerChapStr": "aaaaaaAaaamab", "OccurPerChapArray": [0,0,0,0,0,27,0,0,0,13,0,2,7], "WikiIntro": "The Dormouse sits between the March Hare and the Mad Hatter. They use him as a cushion while he sleeps when Alice arrives at the start of the chapter.", "LLMdescription": "The Dormouse is a fussy little rodent who sleeps for most of the day and doesn't even bother to put on its glasses before being called out to play croquet. It's a very unpopular creature who has been repeatedly ordered to be executed by the Queen." }, { "Character": "Queen", "Total": 75, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 4, "7": 2, "8": 36, "9": 14, "10": 0, "11": 9, "12": 10, "NumChap": 6, "FirstChap": 6, "MentionPerChap": 12.5, "WikiView": 739562, "WikiLength": 28649, "WikiViewVsMentions": 9860.8, "WikiLengthVsMention": 382, "OccurPerChapStr": "aaaaadbJnaijf", "OccurPerChapArray": [0,0,0,0,4,2,36,14,0,9,10,6,6], "WikiIntro": "The Queen of Hearts is the main antagonist. She is a childish, foul-tempered monarch whom Carroll himself describes as \"a blind fury\", and who is quick to give death sentences at the slightest offense.", "LLMdescription": "The Queen of Hearts is one of the most famous, yet scary, fictional queens of all time. She is, after all, known for yelling \"off with their heads!\" every time she loses her temper. " }, { "Character": "King", "Total": 63, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 13, "9": 2, "10": 0, "11": 26, "12": 22, "NumChap": 4, "FirstChap": 8, "MentionPerChap": 15.75, "WikiView": 121343, "WikiLength": 6767, "WikiViewVsMentions": 1926.1, "WikiLengthVsMention": 107.4, "OccurPerChapStr": "aaaaaaambazvd", "OccurPerChapArray": [0,0,0,0,0,0,13,2,0,26,22,4,8], "WikiIntro": "The King of Hearts is the husband of the Queen of Hearts. When compared to the Queen of Hearts, the King of Hearts appears to be the moderate part of the Wonderland government. ", "LLMdescription": "The King of Hearts is one of the most annoying and absurd characters in the book. Although he is often the only voice of reason in the story, he is seen as quite useless due to his powerlessness and lack of leadership." }, { "Character": "Knave", "Total": 9, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 4, "9": 0, "10": 0, "11": 2, "12": 3, "NumChap": 3, "FirstChap": 8, "MentionPerChap": 3, "WikiView": 254444, "WikiLength": 8777, "WikiViewVsMentions": 28271.6, "WikiLengthVsMention": 975.2, "OccurPerChapStr": "aaaaaaadaabcc", "OccurPerChapArray": [0,0,0,0,0,0,4,0,0,2,3,3,8], "WikiIntro": "The Knave of Hearts is mentioned first in chapter 8, and later in chapters 11 and 12, which deal with his trial for a tart burglary in which the King of Hearts presides as judge.", "LLMdescription": "The Knave of Hearts is an intertextual play with Don Quixote. This character combines Don Quixote's romantic ideals and his idealized view of chivalry with the chivalric features of his original model, Amadis de Gaula." }, { "Character": "Gryphon", "Total": 55, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 20, "10": 31, "11": 2, "12": 2, "NumChap": 4, "FirstChap": 9, "MentionPerChap": 13.75, "WikiView": 84512, "WikiLength": 5519, "WikiViewVsMentions": 1536.6, "WikiLengthVsMention": 100.3, "OccurPerChapStr": "aaaaaaaatEbbd", "OccurPerChapArray": [0,0,0,0,0,0,0,20,31,2,2,4,9], "WikiIntro": "The Gryphon is a fictional character. True to the conventional view of a griffin, he has the head, talons, and wings of an eagle and the body of a lion.", "LLMdescription": "The Gryphon is the image of the day for Sunday, February 4, 2018." }, { "Character": "Turtle", "Total": 58, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 28, "10": 28, "11": 0, "12": 2, "NumChap": 3, "FirstChap": 9, "MentionPerChap": 19.33, "WikiView": 190669, "WikiLength": 9298, "WikiViewVsMentions": 3287.4, "WikiLengthVsMention": 160.3, "OccurPerChapStr": "aaaaaaaaBBabc", "OccurPerChapArray": [0,0,0,0,0,0,0,28,28,0,2,3,9], "WikiIntro": "The Mock Turtle's name is taken from a dish that was popular in the Victorian period, mock turtle soup.", "LLMdescription": "The Mock Turtle is a timid creature with a distinctive long neck." } ]; 37:[{"id":"e2a4dc20c3b553bb2820d299b800358a16b9c38a980450c0730fdf7d3dbbad246d2789f3ff6fa56f50a6620bf93bfc057f8ea90c931a551febdd66ce1fac8fef","href":"https://static.observableusercontent.com/files/e2a4dc20c3b553bb2820d299b800358a16b9c38a980450c0730fdf7d3dbbad246d2789f3ff6fa56f50a6620bf93bfc057f8ea90c931a551febdd66ce1fac8fef","name":"linefont.ttf","type":"font/ttf","lastModified":1669554242466.801,"size":85832},{"id":"52da9333a5650e9bbced1850dc0fccf0b75dfe30fb6621f449aa5dddf6ecde7e1acbd9fcf89b226caaec04c1f968ef7c9a18bb35c8183c2ba35c6608e6c2c543","href":"https://static.observableusercontent.com/files/52da9333a5650e9bbced1850dc0fccf0b75dfe30fb6621f449aa5dddf6ecde7e1acbd9fcf89b226caaec04c1f968ef7c9a18bb35c8183c2ba35c6608e6c2c543","name":"wavefont@1.woff2","type":"font/woff2","lastModified":1669483040515.091,"size":10132}] 30:{"id":"23a2c7194d54f3e6","slug":"sparklines_as_bullets","title":"","thumbnail":"6acae255960c8a26be47af98a59ac451ba6a025e8505fe8ce6092b09a08204fd","access_level":"public","create_time":"$D2022-11-25T19:46:35.932Z","update_time":"$D2022-11-27T23:37:57.072Z","view_time":null,"first_public_time":"$D2022-11-27T23:40:33.849Z","has_unpublished_edits":null,"fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"8fcdc34ffb173c01","login":"richardbrath","name":"Richard Brath","avatar_url":"https://avatars-next.observableusercontent.com/413b7e024af3685a187ad33c160d83abb9678058a4c10ea927dc73247c4cc984","tier":"starter_2024"},"version":790,"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"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":719,"value":"## Simple sparklines (via SVG)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":703,"value":"Starting with an example using sparklines, the following bullets each introduce one of the popular characters from _Alices's Adventures in Wonderland_. The height of each spark bar indicates the number of mentions of the character per each chapter: Alice occurs in all 12 chapters, the Queen occurs in later chapters, the Rabbit occurs in many chapters:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"## Sparklines by font\nIn the previous example, sparklines were created using SVG. In this example, the sparkbars are made with a font, rather than SVG or Canvas. There are a number of sparkline fonts. This example is made with [wavefont](https://v-fonts.com/fonts/wavefont). See also AtF [Sparks](https://github.com/aftertheflood/sparks), which has a wider selection of spark fonts, and an example [notebook](https://observablehq.com/@tomgp/sparks-with-live-data).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"In the previous example, character descriptions were based on the first paragraph for each character from Wikipedia (minus common text such as _\"is a fictional character from Lewis Carroll's Alice's Adventures in Wonderland)\"_. In this example, character descriptions are based on output generated from a large language model (specifically [Cohere](https://cohere.ai/)): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"{\n // filter the data\n var filtereddata = data.filter( function(a) { return a.WikiView > 500000;}); \n // set up a table with num rows set to data, and each column with distinct ID for later selection\n var ht = d3.create('html');\n\tvar table = ht.append('table');\n var rows = table.selectAll('tr').data(filtereddata).enter().append('tr');\n var cells = rows.selectAll('td').data([0,1]).enter().append('td')\n .attr(\"id\", function(d) {return 'cell'+d;})\n // select the column and fill with data\n table.selectAll('#cell1').data(filtereddata)\n .text(function (d) {return d.LLMdescription})\n table.selectAll('#cell0').data(filtereddata)\n .attr(\"class\", \"wavefont\")\n //.text(function (d) {return d.OccurPerChapStr}) // simpler way to set using a text string\n .text(function (d) {return normalise(d.OccurPerChapArray).map(v => String.fromCharCode(0x100 + v)).join('');})\n\n return ht.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"## Star glyphs as bullets\nHere the bullets are data-driven star glyphs (i.e. mini radar charts), showing 4 data attributes: north is number of chapters character is mentioned in (e.g. Alice is in all); east indicates how frequently they are mentioned within their chapters; south is how frequent their Wikipedia page is viewed (the Cat and Rabbit are more popular than Alice); west is the length of their Wikipedia page. Mouse over the glyph for a tooltip.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"\n## SparkWORDs as bullets\n\n Instead of bars, lines, or glyphs; words can be formatted to indicate data. Here the bullets are character names, where font weight indicates the number of chapters the character appears in, and the brightness indicates the character popularity (based on Wikipedia article length). This is very simple to create, simply using font properties mapped to data. \n\n If you have made it this far, here's a longer list of characters, with their descriptions as generated by the large language model. Some descriptions are very accurate, some off-beat (e.g. Pat), or sublime (e.g. the Gryphon mentions a date: the Google doodle on that day was the flag of Sri Lanka which contains a stylized medieval lion that might be mistaken for a gryphon).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"{\n var filtereddata = data.filter( function(a) { return a.WikiView > 0;}); \n var ht = d3.create('html');\n\tvar table = ht.append('table');\n var rows = table.selectAll('tr').data(filtereddata).enter().append('tr');\n // data here to create columns and create unique ID per column for each cell for later selection\n var cells = rows.selectAll('td').data([0,1]).enter().append('td')\n .attr(\"id\", function(d) {return 'cell'+d;})\n .text(function(d) {return d; });\n table.selectAll('#cell1').data(filtereddata)\n .text(function (d) {return d.LLMdescription})\n table.selectAll('#cell0').data(filtereddata)\n .style('text-align','right')\n .style('font-family','Roboto')\n .style('font-weight', function(d) {return fontwgt(d.NumChap)})\n .style('color', function(d) { return fontclr(d.WikiView);})\n .text(function (d) {return d.Character})\n return ht.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"## Functions, fonts, styles and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"starChap = d3.scaleLinear().domain([0,12]).range([0,10]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"starFreq = d3.scaleLinear().domain([0,33]).range([0,10]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"starView = d3.scaleLinear().domain([0,1763632]).range([0,10]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"starPagelen = d3.scaleLinear().domain([0,35000]).range([0,10]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"fontclr = d3.scaleLinear().domain([0,1763632]).range(['black','red']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"fontwgt = d3.scaleLog().domain([1,12]).range(['100','900']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"normalise = function(data){\n const max = d3.max(data);\n return data.map(d=>{\n return Math.floor(d/max * 100);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"wavefont = FileAttachment(\"wavefont@1.woff2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"linefont = FileAttachment(\"linefont.ttf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"html`\n\n

CSS classes in here

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"html`The first character in the data is ${data[0].Character} with ${data[0].WikiView} page views. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"