2a:null 2b:["$","title",null,{"children":"Backend: Plotting | Miguel Vieira | Observable"}] 30:T588,domains = ({ accidents: { "one article about accidents": defaultColourScheme[0], "more than one article about accidents": defaultColourScheme[1], "too hard to read": defaultColourScheme[2], "no relevant articles": defaultColourScheme[9] }, age: { children: defaultColourScheme[0], "young adults": defaultColourScheme[1], adults: defaultColourScheme[2], elderly: defaultColourScheme[3], "mixed age groups": defaultColourScheme[8], unknown: defaultColourScheme[9] }, gender: { female: defaultColourScheme[0], male: defaultColourScheme[1], "mixed gender groups": defaultColourScheme[8], unknown: defaultColourScheme[9] }, politics: { conservative: "#4e79a7", independent: "#76b7b2", liberal: "#edc949", national: "#332277", neutral: "#bab0ab", religious: "#9966cc", socialist: "#e4003b", unknown: defaultColourScheme[8] }, site: { agricultural: defaultColourScheme[0], air: defaultColourScheme[1], domestic: defaultColourScheme[2], "extractive industry": defaultColourScheme[3], manufacturing: defaultColourScheme[4], rail: defaultColourScheme[5], road: defaultColourScheme[6], "sports and leisure": defaultColourScheme[7], "water transport": defaultColourScheme[8], "not enough information to know": darken(defaultColourScheme[9]), other: defaultColourScheme[9] } })31:T477,newspapersPlot = (data, groupBy, colourBy, colourDomain) => { const color = { legend: true }; if (colourDomain) { color.domain = Object.keys(colourDomain); color.range = Object.values(colourDomain); } else if (domains[colourBy]) { color.domain = Object.keys(domains[colourBy]); color.range = Object.values(domains[colourBy]); } else if (colourBy === "price_range") { color.domain = ["0-4p", "5p-8p", "8p-£2"]; } const y = { tickSize: 0 }; if (groupBy === "year") { y.tickFormat = (d) => formatYear(d); } const sort = ["politics", "price", "price_range"].includes(colourBy) ? "year" : colourBy; return tooltipPlot().plot({ color, inset: 10, marks: [ Plot.barX(data, { x: 1, y: groupBy, fill: colourBy, sort, inset: 0.5, title: (d) => `${d.title}\n${d.year}, ${d.county}\n${d.politics}\n£${d.price}`, marginLeft: calculateMarginLeft(data, groupBy) + 50 }), Plot.axisX({ label: "Number of newspapers articles →" }), Plot.axisY({ label: groupBy, ...y }) ], width: width }); }32:Te4c,/** * Generates a faceted line plot with tooltips. * @param {Array} data - The data array. * @param {Object} options - The configuration options for the plot. * @param {string} options.x - The key for the x-axis values. * @param {string} options.y - The key for the y-axis values. * @param {string} options.fy - The key for the facet values. * @param {Array} options.xDomain - The domain for the x-axis values. * @param {Object} options.fyDomain - The domain for the facet values. * @param {string} [options.curve="monotone-x"] - The curve interpolation type for the line. * @param {number} [options.marginLeft=250] - The left margin of the plot. * @param {function} [options.title] - The tooltip title function. * @param {number} [options.r=3] - The radius of the data points. * @param {boolean} [options.colourBackgroundLines=false] - Indicates whether to colour the background lines in the facet sections. * @param {boolean} [options.colourTrendLines=false] - Indicates whether to colour the trend lines in the facet sections. * @param {boolean} [options.showConfidenceInterval=false] - Indicates whether to show the confidence interval area. * @param {boolean} [options.showLinearRegression=false] - Indicates whether to show the linear regression line. * @returns {Plot} The faceted line plot. */ facetedLinePlot = ( data, { x, y, fy, xDomain, fyDomain, curve = "monotone-x", marginLeft = 250, title = (d) => `${d[fy]}, ${d[x]}\n${d[y]}`, r = 3, colourBackgroundLines = false, colourTrendLines = true, showConfidenceInterval = false, showLinearRegression = false } ) => { const xy = { x, y, fy }; return tooltipPlot().plot({ color: { domain: Object.keys(fyDomain), range: Object.values(fyDomain) }, marginLeft: marginLeft, marks: [ Plot.axisFy({ anchor: "left", fontSize: 12, fontWeight: "bold", label: null, lineWidth: 20 }), Plot.text( data, Plot.selectFirst({ ...xy, dx: -5, frameAnchor: "right", fontWeight: "bold", fill: fy, text: (d) => `${d3.format(".0%")(d[y])}` }) ), Plot.text( data, Plot.selectLast({ ...xy, dx: 5, frameAnchor: "left", fontSize: 12, fontWeight: "bold", fill: fy, text: (d) => `${d3.format(".0%")(d[y])}` }) ), Plot.areaY(data, { filter: (_) => showConfidenceInterval, x: x, y1: "lower", y2: "upper", fy, curve, fill: fy, fillOpacity: 0.2, mixBlendMode: "multiply" }), Plot.line(data, { ...xy, z: fy, curve, fy: null, opacity: colourBackgroundLines ? 0.7 : 0.1, stroke: colourBackgroundLines ? fy : defaultColour }), Plot.line(data, { ...xy, curve, stroke: fy, strokeWidth: 3 }), Plot.linearRegressionY(data, { filter: (_) => showLinearRegression, ...xy, stroke: colourTrendLines ? fy : defaultColour, strokeOpacity: colourTrendLines ? 1 : 0.6, strokeWidth: 2 }), Plot.dot(data, { ...xy, fill: fy, r, stroke: "white", title }) ], r: { range: [1, 5] }, x: { axis: "top", domain: xDomain, label: null, labelArrow: null, tickFormat: (d) => formatYear(d), tickSize: 0 }, y: { axis: null }, width }); }33:T898,/** * Generates a ridgeline plot. * * @param {Array} data - The data array. * @param {Object} options - The options for customizing the plot. * @param {string} options.x - The x-axis property key in the data. * @param {Array} options.xDomain - The domain of the x-axis. * @param {string} options.y - The y-axis property key in the data. * @param {string} options.fy - The property key for the fill color in the data. * @param {Object} options.domain - The color domain for mapping values to colors. * @param {string} options.sort - The property key for sorting the data. * @param {string} options.title - The title of the plot. * @param {number} [options.curve=catmull-rom] - The type of curve for the line. * @param {number} [options.height=400] - The height of the plot. * @param {string} [options.normalise=false] - Apply Plot.normalizeY. * @param {number} [options.overlap=2] - The amount of vertical overlap between ridgelines. * @returns {Object} - The generated ridgeline plot. */ ridgelinePlot = ( data, { x, xDomain, y, fy, domain, sort, title, curve = "monotone-x", height = 400, normalise = null, overlap = 2 } ) => { const xy = normalise ? { ...Plot.normalizeY({ x, y, z: fy }), fy, sort } : { x, y, fy, sort }; return tooltipPlot().plot({ axis: null, color: { domain: Object.keys(domain), range: Object.values(domain) }, fy: { domain: Object.keys(domain) }, height, marks: [ Plot.areaY(data, { ...xy, curve, fill: fy, opacity: 0.7 }), Plot.lineY(data, { ...xy, curve, stroke: defaultColour, strokeWidth: 1 }), Plot.dot(data, { ...xy, fill: defaultColour, r: 1, tip: "xy" }), Plot.text( data, Plot.selectFirst({ x: xDomain[0], fy: fy, frameAnchor: "left", fontSize: 12, fontWeight: "bold", lineWidth: 20, text: fy }) ) ], width, x: { axis: "bottom", domain: xDomain, facetAnchor: "bottom", tickFormat: (d) => `${d}` }, y: { domain: [0, d3.max(data, (d) => d[y]) / overlap] } }); }34:T490,// https://observablehq.com/@tophtucker/interactive-plot-legend interactiveLegend = ( domain, { range = d3.schemeTableau10, display = "flex", initial = undefined } ) => { const values = new Map( domain.map((item) => [item, !initial || initial.includes(item)]) ); const setValues = () => { set( node, Array.from(values.entries()) .filter(([_, checked]) => checked) .map(([value]) => value) ); }; const handleInput = (event) => { const { id, checked } = event.target; values.set(id.split("::")[0], checked); setValues(); }; const checkboxes = domain.map((item, index) => { const id = _.uniqueId(`${item}::`); const style = `accent-color: ${range[index]}`; return htl.html`

${item}

`; }); const node = htl.html`

${checkboxes}

`; setValues(); return node; }35:T6d5,// viewof subjectsTable = { // function link(item, field) { // if (item.img) { // return html`${item[field]}`; // } // return item[field]; // } // const selectedSubjects = subjects.filter((s) => selectedSids.includes(s.sid)); // return Inputs.table(selectedSubjects, { // columns: ["sid", "year", "t", "workflow"], // format: { // sid: (v, i, d) => link(d[i], "sid"), // t: (v, i, d) => link(d[i], "t") // }, // header: { // sid: "Subject ID", // year: "Year", // t: "Snippet", // workflow: "Workflow" // }, // multiple: false, // rows: 5.5, // sort: "sid", // value: selectedSubjects.length === 1 ? selectedSubjects[0] : [], // width: { // sid: "10%", // year: "10%" // } // }); // } // annotationsTable = { // const subject = subjectsTable; // if (!subject) { // return []; // } // const selectedAnnotations = _.sortBy( // annotations // .filter( // (a) => a.sid === subject.sid && a.workflow_id === subject.workflow_id // ) // .flatMap((a) => Object.entries(a.T0)) // .map(([k, v]) => ({ // sid: subject.sid, // workflow: subject.workflow, // annotation: k, // annotation_n: v // })) // ); // return Inputs.table(selectedAnnotations, { // columns: ["annotation", "annotation_n"], // header: { // sid: "Subject ID", // workflow: "Workflow", // annotation: `Annotations for subject ${subject.sid}`, // annotation_n: "Count" // }, // multiple: false, // rows: 5.5, // sort: "sid", // width: { // sid: "10%" // } // }); // }36:[] 2e:{"id":"6909d63a6207bd53","slug":"lwm-backend-plotting","title":"Backend: Plotting","thumbnail":"4e8f5d7650739ff72a1d76e2283072c51529de170b5efbd3683ff6109d051d05","access_level":"public","create_time":"$D2023-05-19T17:31:20.519Z","update_time":"$D2024-09-23T16:23:42.204Z","view_time":null,"first_public_time":"$D2023-05-19T17:31:20.519Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":"starter_2024"},"version":425,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null}],"members":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Backend: Plotting","cells":[{"id":0,"value":"# Backend: Plotting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"## Domains","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":262,"value":"swatches([defaultColour])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"defaultColour = \"#1b1e23\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"swatches(defaultColourScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"defaultColourScheme = d3.schemeTableau10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"domainComparator = (domain, a, b) => {\n if (domains[domain]) {\n const order = Object.keys(domains[domain]);\n\n if (order.indexOf(a) < order.indexOf(b)) {\n return -1;\n } else if (order.indexOf(a) > order.indexOf(b)) {\n return 1;\n } else {\n return 0;\n }\n }\n\n return a - b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"## Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":69,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"newspapersPoliticalDistribution = (data, domain = domains.politics) =>\n tooltipPlot().plot({\n color: {\n domain: Object.keys(domain),\n legend: true,\n range: Object.values(domain)\n },\n height: 80,\n marks: [\n Plot.barX(data, {\n x: \"ratio\",\n fill: \"politics\",\n title: (d) => `${d.politics}\\n${d.ratio.toLocaleString()}%`\n }),\n Plot.textX(\n data,\n Plot.stackX({\n x: \"ratio\",\n text: (d) => (d.ratio > 2.5 ? `${d3.format(\".0f\")(d.ratio)}%` : \"\"),\n fill: \"white\",\n fontSize: 12,\n fontWeight: \"bold\"\n })\n )\n ],\n marginLeft: 0,\n marginRigh: 0,\n width,\n x: { label: \"\", ticks: 0 },\n y: { label: \"\" }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"politicalShiftPlotMarks = (data, y) => {\n const description = (group) =>\n group.details.map((d) => `${d.title}: ${d.politicsShift}`).join(\"\\n\");\n\n return [\n Plot.ruleX(data, {\n x: \"year\",\n y1: 1,\n y2: y,\n stroke: \"brown\"\n }),\n Plot.dot(data, {\n x: \"year\",\n y: y,\n fill: \"brown\",\n r: (d) => 5 * d.count,\n title: (d) => `Political shift, ${d.year}\\n${description(d)}`\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"subjectsPlot = (data, colourBy = defaultColour) =>\n Plot.plot({\n color: { legend: true },\n marks: [\n Plot.rectY(\n data,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"year\",\n fill: colourBy,\n tip: \"x\"\n }\n )\n )\n ],\n x: { tickFormat: (d) => `${d}` },\n width\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"workflowsAnnotationsPlot = (data, domain = [\"active\", \"not active\"]) =>\n tooltipPlot().plot({\n color: { domain: [\"active\", \"not active\"], legend: true },\n marks: [\n Plot.barX(data, {\n x: \"classifications_count\",\n y: \"display_name\",\n fill: (d) => (d.active ? \"active\" : \"not active\"),\n marginLeft: calculateMarginLeft(data, \"display_name\"),\n title: (d) => `${d.display_name}\\n${d.classifications_count}`\n }),\n Plot.axisX({ label: \"Number of annotations →\" }),\n Plot.axisY({ label: \"Workflow\" }),\n Plot.ruleY([0])\n ],\n width: width\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"workflowsParticipantsPlot = (data) =>\n tooltipPlot().plot({\n color: { legend: true },\n marks: [\n Plot.barX(data, {\n x: \"count\",\n y: \"workflow\",\n fill: (d) => (d.loggedIn ? \"logged in\" : \"not logged in\"),\n marginLeft: calculateMarginLeft(data, \"workflow\"),\n title: (d) =>\n `${d.workflow}\\n${d.count} users ${d.loggedIn ? \"\" : \"not\"} logged in`\n }),\n Plot.axisX({ label: \"Number of participants →\" }),\n Plot.axisY({ label: \"Workflow\" }),\n Plot.ruleY([0])\n ],\n width: width\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"## Plot with tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"tooltipPlot = (tooltipStyle = { stroke: \"black\", \"stroke-width\": \"1px\" }) => ({\n ...Plot,\n plot: (...args) => {\n const graph = Plot.plot(...args);\n return addTooltips(graph, tooltipStyle);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"### Plot click event","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":177,"value":"handlePlotClick = (plot, data, annotations, field, callback) => {\n d3.select(plot)\n .selectAll(\".has-title\")\n .on(\"click\", (e, d) => {\n const idx = Array.isArray(d) ? d[0] : d;\n\n const selectedTitle = md`#### Subjects from _${data[idx].year}_, annotated as _${data[idx][field]}_`;\n\n const selectedSids = _.uniq(\n annotations\n .filter(\n (a) => a.year === data[idx].year && a[field] === data[idx][field]\n )\n .map((a) => a.sid)\n );\n\n callback(selectedTitle, selectedSids);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":89,"value":"### Interactive legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":106,"value":"interactiveLegend(\n Object.keys(domains.politics),\n Object.values(domains.politics)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"### Subjects table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":169,"value":"subjectsTable = (title, subjects, selectedSubjectIds) =>\n selectedSubjectIds && selectedSubjectIds.length > 0\n ? html`${title}${subjectsTableView(subjects, selectedSubjectIds)}`\n : md`_Click on a data point to view related subjects_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"subjectsTableView = (subjects, selectsSubjectIds) => {\n function link(item, field) {\n if (item.img) {\n return html`${item[field]}`;\n }\n\n return item[field];\n }\n\n return Inputs.table(\n subjects.filter((s) => selectsSubjectIds.includes(s.sid)),\n {\n columns: [\"sid\", \"year\", \"t\"],\n format: {\n sid: (v, i, d) => link(d[i], \"sid\"),\n t: (v, i, d) => link(d[i], \"t\"),\n year: d => formatYear(d)\n },\n header: {\n sid: \"Subject ID\",\n year: \"Year\",\n t: \"Snippet\"\n },\n multiple: false,\n rows: 5.5,\n sort: \"sid\",\n value: selectsSubjectIds.length === 1 ? selectsSubjectIds[0] : [],\n width: {\n sid: \"10%\",\n year: \"10%\"\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"calculateMarginLeft = (data, key) => {\n const margin = Math.max(...data.map((d) => String(d[key]).length)) * 5.5;\n return margin > 100 ? margin : 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"formatYear = (year) => `${year}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":266,"value":"import { darken, swatches } from \"@d3/working-with-color\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"