Public
Edited
Jun 27, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`## Appendix`
Insert cell
d3 = require('d3@5')
Insert cell
font = html`<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;500;900&family=Saira+Extra+Condensed:wght@100;500;900&family=Saira:ital,wght@0,100;0,500;0,900;1,100;1,500;1,900&display=swap" rel="stylesheet">
`
Insert cell
colHeaders = ["Order of Appearance","Most Talkative (weight)", "Most Page Views (width)", "Most Editors (color)", "Longest Article (caps)"]
Insert cell
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
}
];
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more