29:null 2a:["$","title",null,{"children":"Common voice and accent choice: data contributors self-describe their spoken accents in diverse ways - v13 en dataset | Kathy Reid | Observable"}] 2f:T649,A data visualisation based on data from [Mozilla's Common Voice platform](https://commonvoice.mozilla.org), refined using `Python` and `pandas` in [this iPython notebook](https://github.com/KathyReid/cvaccents). This notebook is updated based on v13 of the Common Voice dataset, and you can [find the original notebook here](https://observablehq.com/@kathyreid/phd-mozilla-cv-accent-relationships?collection=@kathyreid/phd-work). The key changes in this version are: * The number of categories identified in the data have increased from 16 in the first version, to 20 in this one. The four additional categories are: - _Linguistic heritage of speaker_ - indicating the speaker's language acquisition or immersion heritage, such as time spent in a location, or being born or raised in a location. - _Socio-economic marker_ - indicating a speaker's association with a socio-economic group or class, such as Middle Class. - _Hybrid dialect - indicating the speaker speaks using a dialect where two languages have come into contact_ - such as Denglish (German - Deutsch - and English) and Hinglish (Hindi and English, spoken in India). - _Generational marker_ - indicating the speaker's association with a generation, belying their age range, such as Gen Z. * The number of individual accents identified has increased from 164 in the first version, to 235 in this one. * The number of relationships between individual accents, which indicate a co-occurrence between speaker-described accents, such as "German" and "England English", has increased from 297 in the first version, to 515 in this one. 30:T55c,// Based on work by Stephen Wood at: https://observablehq.com/@wooduk/creating-legends-for-charts function discreteLegend({ labels, nColumns = 1, colWidth = 320, keySize = 32, margin = 5, textLeft = 40, fontFamily = "Yantramanav", fontSize = 16 } = {}) { let keySpace = keySize / 3; let maxKeysPerCol = Math.ceil((labels.length + 1) / nColumns); let height = maxKeysPerCol * (keySize + keySpace + margin); let textTop = (keySize + keySpace) / 2; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); svg .append("g") .selectAll("rect") .data(labels) .join("rect") .attr("x", (d, i) => Math.floor(i / maxKeysPerCol) * colWidth) .attr("y", (d, i) => (i % maxKeysPerCol) * (keySize + keySpace)) .attr("width", keySize) .attr("height", keySize) .attr("fill", (d) => d.primary); svg .append("g") .selectAll("text") .data(labels) .join("text") .attr("x", (d, i) => Math.floor(i / maxKeysPerCol) * colWidth + textLeft) .attr("y", (d, i) => (i % maxKeysPerCol) * (keySize + keySpace) + textTop) .attr("font-family", fontFamily) .attr("font-size", fontSize) .attr("fill", "black") .text((d) => d.name); return svg.node(); }31:T7ba,colourArray = [ //"#000000", // black // accent changes due to physical //"#cf01ae", // fuschia // accent strength descriptor //"#00bfbf", // turquoise // City // "#3051fe", // dark blue // Country // "#ff4040", // tangerine // First or other language // "#6322f9", // purple // Geographic region // "#cfae01", // mustard // inflection // "#f21676", // vermillion // Mixed or variable accent // "#03680F", // green // Named Accent // "#63f922", // bright lime // register // "#c0dd42", // citron // rhoticity // "#30fe51", // apple green // specific phonetic changes // "#0d89e9", // blue // subnational //"#9c06dd", // violet // supranational // "#f27616", // orange // uncertainty // "#0de989" // jade // vocal quality // needed to use a different palette for this version as it expanded to 20 categories "#000000", // black // ACCENT CHANGES due to physical "#7517f3", // sweet pea purple // ACCENT STRENGTH descriptor "#0fec83", // dark teal // CITY "#2959fc", // darker blue // COUNTRY "#ff4040", // tangerine // FIRST or other language "#f81f67", // geranium red // GENERATIONAL marker "#4c34fe", // another blue // GEOGRAPHIC region "#e40991", // sweet pea pink // HYBRID dialect < NEW CATEGORY IN THIS VERSION "#c5b900", // dark citron // INFLECTION "#f8671f", // dark orange // Linguistic heritage of speaker < NEW CATEGORY IN THIS VERSION "#c500b9", // magenta pink // MIXED OR VARIABLE accent "#9fdb05", // apple green // NAMED accent "#75f317", // bright lime // REGISTER "#4cfe34", // bright green // RHOTICITY "#e49109", // light orange // Socio-economic marker < NEW CATEGORY IN THIS VERSION "#29fc59", // green teal // SPECIFIC PHONETIC changes "#02acd1", // dark duck egg blue // SUBNATIONAL "#0f83ec", // medium blue // SUPRANATIONAL "#D2D3C3", // gray // UNCERTAINTY marker "#9f05db" // bright purple // VOCAL QUALITY //"#2959fc", // darker blue // // "#02d1ac", // darker teal ]32:T449,accentGroupColoursOrdered = [ "#4c34fe", // another blue // GEOGRAPHIC region "#0f83ec", // medium blue // SUPRANATIONAL "#2959fc", // darker blue // COUNTRY "#02acd1", // dark duck egg blue // SUBNATIONAL "#0fec83", // dark teal // CITY "#c5b900", // dark citron // INFLECTION "#75f317", // bright lime // REGISTER "#4cfe34", // bright green // RHOTICITY "#29fc59", // green teal // SPECIFIC PHONETIC changes "#9fdb05", // apple green // NAMED accent "#f81f67", // geranium red // ACCENT STRENGTH descriptor "#9f05db", // bright purple // VOCAL QUALITY "#ff4040", // tangerine // FIRST or other language "#e40991", // sweet pea pink // HYBRID dialect < NEW CATEGORY IN THIS VERSION "#c500b9", // magenta pink // MIXED OR VARIABLE accent "#f8671f", // dark orange // Linguistic heritage of speaker < NEW CATEGORY IN THIS VERSION "#e49109", // light orange // Socio-economic marker < NEW CATEGORY IN THIS VERSION "#f81f67", // geranium red // GENERATIONAL marker "#D2D3C3", // gray // UNCERTAINTY marker "#000000" // black // ACCENT CHANGES due to physical ]33:T1b0b,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph // changes made by Kathy Reid as indicated function ForceGraph( { nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeLabel, // given d in nodes, a title for the label nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke, // given d in nodes, a Boolean to indicate if the node stroke should be differentiated nodeStrokeWidth = 12, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius, // node radius, in pixels collisionOffset, // how much to offset node overlap by, in pixels labelOffset, // how much to offset label placement, in pixels nodeStrength, linkSource = ({ source }) => source, // given d in links, returns a node identifier string linkTarget = ({ target }) => target, // given d in links, returns a node identifier string linkStroke = "#222", // link stroke color linkStrokeOpacity = 0.7, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = colourArray, // an array of color strings, for the node groups width = 3000, // outer width, in pixels height = 4000, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {} ) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const B = nodeLabel == null ? null : d3.map(nodes, nodeLabel); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const R = nodeRadius == null ? null : d3.map(nodes, nodeRadius).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); const S = nodeStroke == null ? null : d3.map(nodes, nodeStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({ id: N[i] })); links = d3.map(links, (_, i) => ({ source: LS[i], target: LT[i] })); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({ index: i }) => N[i]); // Amendment by Kathy Reid to prevent the circles from overlapping const forceCollide = d3 .forceCollide() .radius(({ index: i }) => R[i] + collisionOffset); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3 .forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .force("collision", forceCollide) .on("tick", ticked); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg .append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr( "stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null ) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg .append("g") .attr("fill", nodeFill) //.attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .call(drag(simulation)) // isolate the links of a node for easier exploration .on("mouseenter", (evt, d) => { link .attr("display", "none") .filter((l) => l.source.id === d.id || l.target.id === d.id) .attr("display", "block"); }) .on("mouseleave", (evt) => { link.attr("display", "block"); }); // labels for the nodes const label = svg .append("g") .selectAll("text") .data(nodes) .enter() .append("text") .text(({ index: i }) => T[i]) .attr("class", "labels") .attr("text-anchor", "middle") .attr("dx", 0) .attr("y", ({ index: i }) => R[i] + labelOffset); if (W) link.attr("stroke-width", ({ index: i }) => W[i]); if (L) link.attr("stroke", ({ index: i }) => L[i]); if (G) node.attr("fill", ({ index: i }) => color(G[i])); if (T) node.append("title").text(({ index: i }) => T[i]); // use the predetermined attribute of a node to determine stroke colour if (S) node.attr("stroke", ({ index: i }) => { if (S[i]) { return "#000000"; } else { return "#fefefe"; } }); if (B) label.text(({ index: i }) => B[i]); if (R) node.attr("r", ({ index: i }) => R[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } function ticked() { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); label.attr("dx", (d) => d.x).attr("dy", (d) => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), { scales: { color } }); }34:[{"id":"3ce63c158ceb509bee72ff1ed990aaf04c0637005ca26cb1d8c64778bf6a3e527e7ca767d171c77e38fdeae5cf482a49964c6c01fe4b2134915ea749a9c01676","href":"https://static.observableusercontent.com/files/3ce63c158ceb509bee72ff1ed990aaf04c0637005ca26cb1d8c64778bf6a3e527e7ca767d171c77e38fdeae5cf482a49964c6c01fe4b2134915ea749a9c01676","name":"all_accents@5.json","type":"application/json","lastModified":1679402532859.868,"size":41772},{"id":"16f2f01f2cc8aa73f7b000cac3a4a37140aecb622dd0764a1dadfec77df217e5a472a1129547e4a36c3a5d4571963652af9f3ad5e812b8eb468972ee04cda8ad","href":"https://static.observableusercontent.com/files/16f2f01f2cc8aa73f7b000cac3a4a37140aecb622dd0764a1dadfec77df217e5a472a1129547e4a36c3a5d4571963652af9f3ad5e812b8eb468972ee04cda8ad","name":"accent_edges@2.json","type":"application/json","lastModified":1679402532859.868,"size":15434},{"id":"b237423b50b922e4842ea48a27e8b92f3612e98a8c704fd28ca7c947c9cac8793146193bcbfe75734992202e8671cb174ae0bff8497169e7a486eba004053b8c","href":"https://static.observableusercontent.com/files/b237423b50b922e4842ea48a27e8b92f3612e98a8c704fd28ca7c947c9cac8793146193bcbfe75734992202e8671cb174ae0bff8497169e7a486eba004053b8c","name":"accent_edges_13.json","type":"application/json","lastModified":1679402581025.619,"size":26546},{"id":"548e028110476715aba4ee816385010c98029e686efe5382bb38d7c6c70c8a805851193a53ee3a37c2012ed63f11d32aecbf9cbff4c242d218b0a0c5b0dd7a65","href":"https://static.observableusercontent.com/files/548e028110476715aba4ee816385010c98029e686efe5382bb38d7c6c70c8a805851193a53ee3a37c2012ed63f11d32aecbf9cbff4c242d218b0a0c5b0dd7a65","name":"all_accents_13.json","type":"application/json","lastModified":1679402590545.806,"size":60009},{"id":"8e863861d1e48df66bafbb94a33b1ea52b53a101fc227bbd74e99e8474367f6f3ee81524252a1272b549b05b964714ab861b673349c4ce18fff98ddff48350c0","href":"https://static.observableusercontent.com/files/8e863861d1e48df66bafbb94a33b1ea52b53a101fc227bbd74e99e8474367f6f3ee81524252a1272b549b05b964714ab861b673349c4ce18fff98ddff48350c0","name":"accent_edges_13@1.json","type":"application/json","lastModified":1679998853191.995,"size":26495},{"id":"703c7923fe0418f01ee1cbcee876380e0358840fb6164e63680574c778dddc270aeba9b83220d2eea09d605e708114ca3d5839ec3c68c87f410c1d1ce638d291","href":"https://static.observableusercontent.com/files/703c7923fe0418f01ee1cbcee876380e0358840fb6164e63680574c778dddc270aeba9b83220d2eea09d605e708114ca3d5839ec3c68c87f410c1d1ce638d291","name":"all_accents_13@1.json","type":"application/json","lastModified":1679998862868.668,"size":59755}] 2d:{"id":"311ab174746bfb49","slug":"phd-mozilla-cv-accent-relationships-v13","title":"Common voice and accent choice: data contributors self-describe their spoken accents in diverse ways - v13 en dataset","thumbnail":"9625de0aafd936ebdc063928f65b03f506033cf25558cedc6ed027a36e7bff9a","access_level":"unlisted","create_time":"$D2023-03-21T12:42:12.859Z","update_time":"$D2023-03-28T10:48:39.366Z","view_time":null,"first_public_time":"$D2023-03-21T12:42:12.859Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ebac2067491eabef","login":"kathyreid","name":"Kathy Reid","avatar_url":"https://avatars-next.observableusercontent.com/6bd7dd7bfadb3243e88cebaba2704fa2525d98a0329673dd738717d5268207c2","tier":"starter_2024"},"version":1313,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12a5a4d9cd51f126","login":"kathyreid","name":"Kathy Reid","avatar_url":"https://avatars-next.observableusercontent.com/6bd7dd7bfadb3243e88cebaba2704fa2525d98a0329673dd738717d5268207c2","tier":null}],"members":[{"type":"individual","id":"12a5a4d9cd51f126","login":"kathyreid","name":"Kathy Reid","avatar_url":"https://avatars-next.observableusercontent.com/6bd7dd7bfadb3243e88cebaba2704fa2525d98a0329673dd738717d5268207c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Common voice and accent choice: data contributors self-describe their spoken accents in diverse ways - v13 en dataset","cells":[{"id":918,"value":"# Common voice and accent choice: data contributors self-describe their spoken accents in diverse ways - v13 `en` dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":936,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":991,"value":"## Legend\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"discreteLegend({ labels: accentLegendEntries, nColumns: 3 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"Accents that are available in the Mozilla Common Voice accent drop-down list, and are therefore given _a priori_ are bordered in black. The stroke weight of the link indicates the volume of edges between two nodes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":993,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"chart = ForceGraph(\n { nodes, links },\n {\n nodeId: (d) => d.id,\n nodeGroup: (d) => d.descriptor.name,\n nodeTitle: (d) => `${d.name}\\n${d.descriptor.name}`,\n nodeLabel: (d) => `${d.name}-\\n${d.count}`,\n nodeStroke: (d) => d.predetermined,\n linkStrokeWidth: (l) => l.weight * 0.8,\n nodeRadius: (d) => parseInt(scaleSize(d.count)), // node radius, in pixels\n nodeStrength: 0.00001,\n linkStrength: 0.00001,\n collisionOffset: 20,\n labelOffset: 40,\n height: 4000,\n width: 3000,\n invalidation // a promise to stop the simulation when the cell is re-run\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"## Data preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":940,"value":"### Styling of labels using CSS applied to SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":874,"value":"html`\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"function getMaxCount(theArray) {\n console.log(\"in getMaxCount\");\n var allCounts = [];\n\n let nodeEntries = Object.entries(theArray);\n nodeEntries.forEach(function (node) {\n allCounts.push(node[1].count);\n });\n return Math.max.apply(Math, allCounts);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"### Scale the size of the nodes based on their `maxCount`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"scaleSize = d3\n .scaleLinear()\n .domain([1, getMaxCount(nodeData)])\n .range([20, getMaxCount(nodeData) / 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"### Define colours used\n\nThe order of this `Array` should be in alphabetical by the Descriptor Category name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"### Prepare data from JSON files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"nodeData = FileAttachment(\"all_accents_13@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"convert `nodeData` from an Object of Objects into an Array of Objects to make it iterable, because the `ForceGraph` function expects an iterable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"nodes = {\n var output = [];\n\n let nodeEntries = Object.entries(nodeData);\n nodeEntries.forEach(function (node) {\n // deal with accentDescriptors, which are also an Object of Objects\n var accentDescriptors = [];\n let descriptorEntries = Object.entries(node[1].descriptors);\n descriptorEntries.forEach(function (descriptor) {\n let aDescriptor = {\n id: descriptor[1].id,\n name: descriptor[1].name,\n definition: descriptor[1].definition,\n parent: descriptor[1].parent\n };\n\n let anAccent = {\n id: node[1].id,\n name: node[1].name,\n count: node[1].count,\n locale: node[1].locale,\n predetermined: node[1].predetermined,\n descriptor: aDescriptor\n };\n\n output.push(anAccent);\n });\n });\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"linkData = FileAttachment(\"accent_edges_13@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"convert `linkData` from an Object of Objects into an Array of Objects to make it iterable, because the `ForceGraph` function expects an iterable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"links = {\n var output = [];\n\n let linkEntries = Object.entries(linkData);\n linkEntries.forEach(function (link) {\n //console.log(link);\n\n let aLink = {\n id: link[0],\n source: link[1].source,\n target: link[1].target,\n weight: link[1].weight\n };\n\n //console.log(\"anAccent is: \", anAccent);\n output.push(aLink);\n });\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"extract all the Accent Descriptor Groups to create a legend ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":998,"value":"accentGroups = [...new Set(nodes.map((item) => item.descriptor.name))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"Now we arrange the accents in the order we wish them to appear in the legend ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"accentGroupsOrdered = [\n accentGroups[13], // Geographic region\n accentGroups[2], // Supranational\n accentGroups[0], // Country\n accentGroups[1], // Subnational\n accentGroups[4], // City\n\n accentGroups[18], // Inflection\n accentGroups[11], // Register\n accentGroups[17], // Rhoticity\n accentGroups[16], // Specific phonetic\n accentGroups[7], // Named accent\n accentGroups[9], // Accent strength descriptor\n accentGroups[5], // Vocal quality descriptor\n\n accentGroups[6], // First or other language\n accentGroups[3], // Hybrid dialect\n accentGroups[14], // Mixed or variable\n accentGroups[8], // Linguistic heritage\n accentGroups[12], // Socio-economic marker\n accentGroups[10], // Generational marker\n\n accentGroups[19], // Uncertainty\n\n accentGroups[15] // Accent due to physical changes\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"This is the order that they appear in the legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1024,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"accentLegendEntries = {\n var output = [];\n\n for (let i = 0; i < accentGroupsOrdered.length; i++) {\n let anEntry = {\n name: accentGroupsOrdered[i],\n primary: accentGroupColoursOrdered[i]\n };\n output.push(anEntry);\n }\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"howto(\"ForceGraph\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"