31:T1967,DiDoesDigital2020Timeline = { const markerDefaultColor = "#9880C2"; const markerSelectedColor = "#9880C2"; const markerFadedColor = "#E4DDEE"; const markerPersonalColor = "#5598E2"; const labelDefaultColor = "#331A5B"; const labelSelectedColor = "#331A5B"; const labelFadedColor = "#E4DDEE"; const labelPersonalColor = "#093B72"; const annotationDefaultColor = "#E4DDEE"; const annotationPersonalColor = "#CADFF7"; const svg = d3.select(DOM.svg(params.svg.width, params.svg.height)) .attr("id", "timeline"); const chartBackground = svg.append("rect") .attr("id", "chart-background") .attr("fill", "#fff") // fallback for CSS .attr("x", 0) .attr("y", 0) .attr("width", params.svg.width) .attr("height", params.svg.height); const byline = svg.append("g") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x * 0.4 : params.event.offset}, ${params.svg.height - (params.margin.bottom / 2)})`); const plot = svg.append("g") .attr("id", "plot") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x : params.smallScreenMargin.left}, ${params.plot.y})`); const gy = plot.append("g") .attr("id", "y-axis") .attr("class", "axis") .call(axis.y) .attr("aria-hidden", "true") .call(g => g.selectAll(".tick text").call(halo)); const annotations = plot.append("g") .attr("class", "annotations") .selectAll("g") .data(lockdownData) .join("g"); const annotationsLeftMargin = params.plot.x + 240 + 24; annotations.append("line") .attr("aria-hidden", "true") .attr("stroke", annotationDefaultColor) .attr("stroke-width", 3) .attr("x1", annotationsLeftMargin + 262) .attr("x2", annotationsLeftMargin + 262) .attr("y1", d => y(d.startDate)) .attr("y2", d => y(d.endDate)); annotations.append("text") .attr("x", annotationsLeftMargin + 282) .attr("y", d => y(d.startDate)) .attr("dy", "0.7em") .style("font-size", 16) .style("font-weight", 600) .text(d => width >= params.mediumScreenSize ? d.name : '') annotations.append("text") .attr("x", annotationsLeftMargin + 282) .attr("y", d => y(d.startDate)) .attr("dy", "2.0em") .style("font-size", 16) .style("font-weight", 400) .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%e %b")(d.startDate) + " – " + d3.timeFormat("%e %b")(d.endDate) : '') const markers = plot.append("g") .attr("class", "markers") .selectAll("circle") .data(data2) .join("circle") .attr("transform", d => `translate(0, ${y(d.date)})`) .attr("aria-hidden", "true") .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .attr("cx", 0.5) .attr("cy", (params.marker.radius / 2) + 0.5) .attr("r", params.marker.radius); const dodgedYValues = dodge(data2.map(d => y(d.date)), labelSeparation); // const dodgedYValues = data.map(d => y(d.date)); // for debugging alignment const eventLabels = plot.append("g") .attr("class", "eventLabels") .selectAll("text") .data(d => d3.zip( data2, dodgedYValues, )) .join("text") .attr("class", "event-title") .style("font-weight", "400") .style("font-size", 14) .style("fill", ([d]) => d.sharedOrPersonal === "Sociology" ? labelDefaultColor : labelPersonalColor) .attr("x", width >= params.smallScreenSize ? params.event.offset : params.smallScreenEvent.offset) .attr("y", ([, y]) => y) .attr("dy", "0.35em"); eventLabels.append("tspan") .text(([d]) => d.eventName); eventLabels.append("tspan") .text(([d]) => ` ${d.eventDescription} ${d3.timeFormat("%A, %e %B")(d.date)}`) .attr("x", width); const tooltip = d3.create("div") .attr("class", "tooltip") .attr("aria-hidden", "true") .html(` `); const rangeY = dodgedYValues.map(x => x + params.plot.y); const rangeY0 = rangeY[0]; const fuzzyTextHeightAdjustment = 16 svg.on("touchend mouseout", function(event) { markers .attr("fill", d => d.sharedOrPersonal === "Sociology" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Sociology" ? markerDefaultColor : markerPersonalColor); eventLabels .style("opacity", 1); }); svg.on("touchmove mousemove", function(event) { const mouseY = d3.pointer(event,this)[1]; const nearestEventY = rangeY.reduce((a, b) => Math.abs(b - mouseY) < Math.abs(a - mouseY) ? b : a); const dodgedIndex = rangeY.indexOf(nearestEventY); const dataEvent = data2[dodgedIndex]; if (mouseY >= rangeY0 - fuzzyTextHeightAdjustment) { eventLabels .filter((d, i) => i !== dodgedIndex) .style("opacity", 0.3); eventLabels .filter((d, i) => i === dodgedIndex) .style("opacity", 1); markers .filter((d, i) => i !== dodgedIndex) .attr("fill", markerFadedColor) .attr("stroke", markerFadedColor); markers .filter((d, i) => i === dodgedIndex) .attr("fill", d => d.sharedOrPersonal === "Sociology" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Sociology" ? markerDefaultColor : markerPersonalColor) .raise(); tooltip.style("opacity", 1); tooltip.style("transform", `translate(${(width >= params.smallScreenSize ? params.plot.x + 8 : 0)}px, calc(-100% + ${nearestEventY}px))`); tooltip.select("#date") .text(d3.timeFormat("%A, %e %B")(dataEvent.date)); tooltip.select("#name") .text(dataEvent.eventName); tooltip.select("#description") .text(dataEvent.contribType + " " + dataEvent.eventDescription); } }); svg.on("touchend mouseleave", () => tooltip.style("opacity", 0)); return html`

${tooltip.node()} ${svg.node()}

`; }32:T4e5,// The dodge function takes an array of positions (e.g. X values along an X Axis) in floating point numbers // The dodge function optionally takes customisable separation, iteration, and error values. // The dodge function returns a similar array of positions, but slightly dodged from where they were in an attempt to separate them out. It restrains the result a little bit so that the elements don't explode all over the place and so they don't go out of bounds. function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) { positions = Array.from(positions); let n = positions.length; if (!positions.every(isFinite)) throw new Error("invalid position"); if (!(n > 1)) return positions; let index = d3.range(positions.length); for (let iter = 0; iter < maxiter; ++iter) { index.sort((i, j) => d3.ascending(positions[i], positions[j])); let error = 0; for (let i = 1; i < n; ++i) { let delta = positions[index[i]] - positions[index[i - 1]]; if (delta < separation) { delta = (separation - delta) / 2; error = Math.max(error, delta); positions[index[i - 1]] -= delta; positions[index[i]] += delta; } } if (error < maxerror) break; } return positions; }33:T530,params = { let output = {}; output["smallScreenSize"] = 768; output["mediumScreenSize"] = 940; output["svg"] = { "width": width, "height": range_h }; output["margin"] = { "top": 40, "right": 96, "bottom": 40, "left": 240, "axisLeft": 144, }; output["plot"] = { "x": output["margin"]["left"], "y": output["margin"]["top"], "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] }; output["smallScreenMargin"] = { "top": 60, "right": 8, "bottom": 192, "left": 8, "axisLeft": 144, }; output["smallScreenPlot"] = { "x": output["margin"]["left"], "y": output["margin"]["top"], "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] }; output["marker"] = { "radius": 4 } output["date"] = { "offset": output["marker"]["radius"] * 2 } output["event"] = { "offset": output["marker"]["radius"] * 6 } output["smallScreenEvent"] = { "offset": output["marker"]["radius"] * 4 } return output; }34:T4a8,tooltipStyles = html` `35:[{"id":"e97d5eb2ae74197c507be97aeb5b115b2702d65374f44910372324b46caaf47c12f3548ac0a1cea1e8aa1a35fe8c0d3dd782e0e9d633ec1a21d3b73197e185a5","href":"https://static.observableusercontent.com/files/e97d5eb2ae74197c507be97aeb5b115b2702d65374f44910372324b46caaf47c12f3548ac0a1cea1e8aa1a35fe8c0d3dd782e0e9d633ec1a21d3b73197e185a5","name":"the_ontology_of_groups@3.csv","type":"text/csv","lastModified":1709570821070.941,"size":7406},{"id":"e0961bb79fe305a34823e685aec0bbc5431f14079832c0da9131f39700e291888f576cef13762a89bf2aae2deeb8e01f696dddf2aca46ecdaa323568ff96f80d","href":"https://static.observableusercontent.com/files/e0961bb79fe305a34823e685aec0bbc5431f14079832c0da9131f39700e291888f576cef13762a89bf2aae2deeb8e01f696dddf2aca46ecdaa323568ff96f80d","name":"the_ontology_of_groups@1.csv","type":"text/csv","lastModified":1695664290013.635,"size":6630},{"id":"2f5be00773ddf9d9f1c18256cd9ce64d7ef59b7dced70fb3d38358807a363b58adbb5c3a8e947191f305a023b876b17f859240954134d2c29fd7b2e87f62754d","href":"https://static.observableusercontent.com/files/2f5be00773ddf9d9f1c18256cd9ce64d7ef59b7dced70fb3d38358807a363b58adbb5c3a8e947191f305a023b876b17f859240954134d2c29fd7b2e87f62754d","name":"the_ontology_of_groups@2.csv","type":"text/csv","lastModified":1699270841272.236,"size":6816},{"id":"87da9d3c0c109c47ae10624767962bb6ec1dc018e4710a911db1c74730bfd8ddc094e12e7e84dce2cba5553c10327b9fdde146153e1473cdee69de6a88a89769","href":"https://static.observableusercontent.com/files/87da9d3c0c109c47ae10624767962bb6ec1dc018e4710a911db1c74730bfd8ddc094e12e7e84dce2cba5553c10327b9fdde146153e1473cdee69de6a88a89769","name":"info_lit_review@8.csv","type":"text/csv","lastModified":1693320004593.417,"size":4414},{"id":"2b98226e97c05c4f642d3f8fb85760beda04f87d1e80cab550abe83c6e30a10b97cbe2b3ef4a1a7d806f6d6295225c4c7a1c0c297964a2a3245b982dd3c6d66c","href":"https://static.observableusercontent.com/files/2b98226e97c05c4f642d3f8fb85760beda04f87d1e80cab550abe83c6e30a10b97cbe2b3ef4a1a7d806f6d6295225c4c7a1c0c297964a2a3245b982dd3c6d66c","name":"info_lit_review@9.csv","type":"text/csv","lastModified":1695168851757.744,"size":6231},{"id":"3158667df4805c4b1bd4b0f8c8d01148320a89cd3df3027d2cda87669adc6288d4cd2954cf9d4fb5e18aa25641b752aaffa6195dfd1830c009a5c40cf1742f7a","href":"https://static.observableusercontent.com/files/3158667df4805c4b1bd4b0f8c8d01148320a89cd3df3027d2cda87669adc6288d4cd2954cf9d4fb5e18aa25641b752aaffa6195dfd1830c009a5c40cf1742f7a","name":"info_lit_review@10.csv","type":"text/csv","lastModified":1695169360502.614,"size":6251},{"id":"5592c9c4dd79691c817ecc1882f58f1d38a8573be16e142fc96698a88436a42699cecd91b7c78d25488dcda4ee40abaee1b4f3993b66bad7e05eaf85844efa5e","href":"https://static.observableusercontent.com/files/5592c9c4dd79691c817ecc1882f58f1d38a8573be16e142fc96698a88436a42699cecd91b7c78d25488dcda4ee40abaee1b4f3993b66bad7e05eaf85844efa5e","name":"the_ontology_of_groups.csv","type":"text/csv","lastModified":1695216490673.845,"size":6335}] 2f:{"title":"Grontology timeline","cells":[{"id":1914,"value":"# Grontology timeline\n## What is the ontological status of groups across fields of studies","pinned":false,"hidden":false,"mode":"md"},{"id":858,"value":"viewof eventsSelection = radio({\n title: '',\n description: 'Please select which field of study to show',\n options: [\n { label: 'Sociology', value: 'S' },\n { label: 'Cultural Group Selection', value: 'CGS' },\n { label: 'Philosophy', value: 'φ' },\n { label: 'Physics', value: 'P' },\n { label: 'All', value: 'all' },\n ],\n value: 'all'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"viewof methodSelection = radio({\n title: '',\n description: 'Please select which method to show',\n options: [\n { label: '📊', value: '📊' },\n { label: '💡', value: '💡' },\n { label: '🗺️', value: '🗺️' },\n { label: '📚', value: '📚' },\n { label: 'All', value: 'all' },\n ],\n value: 'all'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"viewof range_h = Inputs.range([1000,2500], {label: \"Custom height\", step: 10, value: 1800})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"mdAppendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"title = \"Grontology\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"// subtitle = \"What is the ontological status of groups across fields of studies?\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"labelSeparation = 24","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"#### Data wrangling","pinned":false,"hidden":false,"mode":"md"},{"id":951,"value":"// TIME PERIODS\nlockdownData = [\n {name: \"Grontology 1.0\", startDate: new Date(\"1950\", \"2\", \"24\", \"6\"), endDate: new Date(\"1980\", \"5\", \"1\", \"6\"), description: \"\"},\n {name: \"Grontology 2.0\", startDate: new Date(\"1981\", \"6\", \"9\", \"6\"), endDate: new Date(\"2000\", \"9\", \"28\", \"6\"), description: \"\"}, \n {name: \"Grontology 3.0\", startDate: new Date(\"2001\", \"9\", \"28\", \"6\"), endDate: new Date(\"2020\", \"10\", \"8\", \"6\"), description: \"\"}, \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1746,"value":"sourceData = FileAttachment(\"the_ontology_of_groups@3.csv\").csv()\n .then(data => {\n const timeParser = d3.timeParse(\"%d %b %Y\");;\n return data.map(row => ({\n date: timeParser(row.date),\n eventName: row.eventName,\n eventDescription: row.eventDescription,\n sharedOrPersonal: row.sharedOrPersonal,\n contribType: row.contrib_type,\n readLvl: row.read_lvl\n }))\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1755,"value":"data = sourceData.filter(d => {\n if (eventsSelection === \"S\") { return d.sharedOrPersonal === \"S\"; }\n else if (eventsSelection === \"φ\") { return d.sharedOrPersonal === \"φ\"; }\n else if (eventsSelection === \"CGS\") { return d.sharedOrPersonal === \"CGS\"; }\n else { return true };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1833,"value":"data2 = data.filter(d => {\n if (methodSelection === \"💡\") { return d.contribType === \"💡\"; }\n else if (methodSelection === \"🗺️\") { return d.contribType === \"🗺️\"; }\n else if (methodSelection === \"📚\") { return d.contribType === \"📚\"; }\n else if (methodSelection === \"📊\") { return d.contribType === \"📊\"; }\n else { return true };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1879,"value":"#### Marks","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"y = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([params.plot.y, params.plot.height]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"axis = {\n const yAxis = width >= params.smallScreenSize ? \n d3.axisRight(y)\n .tickPadding(-(params.margin.axisLeft))\n .tickSizeOuter(0)\n .tickSizeInner(-(params.margin.axisLeft))\n :\n d3.axisRight(y)\n .tickPadding(-(params.smallScreenMargin.axisLeft))\n .tickSizeOuter(0)\n .tickSizeInner(-(params.smallScreenMargin.axisLeft))\n .tickFormat(d3.timeFormat('%b'));\n\n return {y: yAxis};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"function halo(text) {\n text.clone(true)\n .each(function() { this.parentNode.insertBefore(this, this.previousSibling); })\n .attr(\"aria-hidden\", \"true\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", backgroundColor)\n .attr(\"stroke-width\", 24)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\")\n .style(\"text-shadow\", `-1px -1px 2px ${backgroundColor}, 1px 1px 2px ${backgroundColor}, -1px 1px 2px ${backgroundColor}, 1px -1px 2px ${backgroundColor}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1877,"value":"#### Style","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"typographyStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"chartStyles = html`