Mathematical engineer. Software developer at Act Now Coalition.
Public
Edited
Jul 13, 2023
charMap = characterMap(c)
function parseCharacters(csvCharacterInfo) {
// Parse the contents of the character_info.csv file and returns a JSON
// object with the information.
return _.chain(csvCharacterInfo)
.map((item) => ({
id: item["Character ID"],
mainName: item["Main Name"],
gender: item.Gender,
category: item.Category,
aliases: stringToList(item.Aliases)
}))
.value();
}
c = parseCharacters(character_info)
character_info.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
quotations = quotation_info.map(formatQuote)
FileAttachment("quotation_info.csv").csv({typed: true})
function formatQuote(csvQuote) {
const addressees = csvQuote.addressees.replaceAll(`'`, `"`);
return {
quoteID: csvQuote.quoteID,
speaker: csvQuote.speaker,
addressees: JSON.parse(addressees),
quoteText: csvQuote.quoteText
};
}
import {ForceGraph} from "@d3/force-directed-graph"
function buildGraph(quotations) {
// The nodes in the graph are the characters
const nodes = _.chain(quotations)
.flatMap((quote) => quote.addressees.concat([quote.speaker]))
.uniq()
.map((name) => ({ id: charMap[name] }))
.sortBy((node) => node.id)
.value();
// A -> B, B -> A
// Link value counts interactions
const links = _.chain(quotations)
.flatMap((quote) =>
quote.addressees.map((a) => ({
target: charMap[a],
source: charMap[quote.speaker],
value: 1
}))
)
.groupBy((edge) => [edge.source, edge.target].sort().join("-"))
.entries()
.map(([key, items]) => ({
source: items[0].source,
target: items[0].target,
value: items.length
}))
.sortBy((edge) => edge.source)
.value();
return { nodes, links };
}
novel_text = FileAttachment("novel_text.txt").text()
quotation_info.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
const lines = novel_text.split("\n").map((line) => `${line}</br>`);
return html`
<style>
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
.novel-text {
font-family: 'Flow Circular', cursive;
font-size: 4px;
line-height: 3px;
}
</style>
<div class="novel-text">${lines}</div>
`;
}
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.
