2f:T2416,Constance = function (data) { //// class TreemapHandler { setup() { const TM_PADDING = 1; var nested = d3.group( data, (d) => d.product, (d) => d.id ); const treemap = d3 .treemap() .tile(d3.treemapSquarify) .size([width - 2 * padding, height - 2 * padding]) .padding(TM_PADDING); let hierarchy = d3.hierarchy(nested); hierarchy .sort((a, b) => b.virulence - a.virulence) .sum((d) => d.virulence); let t = treemap(hierarchy); const leaves = hierarchy.leaves(); leaves.forEach((l) => { l.data.x0 = l.x0; l.data.x1 = l.x1; l.data.y0 = l.y0; l.data.y1 = l.y1; }); } getMap() { return new Map() .set("rx", 0) .set("x", (d) => d.x0) .set("y", (d) => d.y0) .set("width", (d) => d.x1 - d.x0) .set("height", (d) => d.y1 - d.y0) .set("fill", colorNode) .set("stroke", strokeNode) .set("stroke-width", strokeWidthNode) .set("opacity", opacityNode); } } class BubbleHandler { #sideNode; #sideRadius; #scaledHorizontal; #scaledVertical; #scaledRadius; setup() { const extentD = d3.extent(data, (d) => d.dstart); const extentV = d3.extent(data, (d) => d.virulence); const radiusFromValue = (value) => Math.sqrt(value) / Math.PI; const maxRadius = 100; this.scaledHorizontal = d3 .scaleTime() .range([margin + maxRadius / 2, width - margin - maxRadius / 2]) .domain(extentD); this.scaledVertical = d3 .scaleLinear() .range([margin + maxRadius / 2, height - margin - maxRadius / 2]) .domain(extentV); this.scaledRadius = d3 .scaleLinear() .range([1, maxRadius]) .domain([0, radiusFromValue(extentV[1])]); this.sideNode = (d) => this.scaledRadius(radiusFromValue(d.virulence)); this.sideRadius = (d) => this.scaledRadius(radiusFromValue(d.virulence)) / 2; } getMap() { return new Map() .set("width", this.sideNode) .set("height", this.sideNode) .set("rx", this.sideRadius) .set("x", (d) => this.scaledHorizontal(d.dstart) - this.sideNode(d)) .set("y", (d) => this.scaledVertical(d.virulence) - this.sideNode(d)) .set("fill", colorNode) .set("stroke", strokeNode) .set("stroke-width", strokeWidthNode) .set("opacity", opacityNode); } } class TimelineHandler { setup() { const TL_PADDING = 3; const TL_MAXBAND_HEIGHT = 20; const dateExtent = [ d3.min(data, (d) => d.start), d3.max(data, (d) => d.end) ]; console.log(dateExtent); const timeline = layoutTimeline() .size([width - 2 * padding, height - 2 * padding]) .extent(dateExtent) .padding(TL_PADDING) .maxBandHeight(TL_MAXBAND_HEIGHT); let accY = 0; if (shouldGroup == "Yes") { // unique products const groups = Array.from(new Set(data.map((d) => d.product))); groups.forEach(function (group, i) { let onlyThisGroup = data.filter(function (d) { return d.product === group; }); let onlyThisTimeline = timeline(onlyThisGroup); let maxY = 0; onlyThisTimeline.forEach(function (d, j) { let src = onlyThisGroup[j]; src.y = d.y + accY; src.dy = d.dy; src.lane = d.lane; src.start = d.start; src.end = d.end; src.originalEnd = d.originalEnd; src.originalStart = d.originalStart; maxY = Math.max(d.y, maxY); }); accY += maxY + TL_MAXBAND_HEIGHT; //selection.datum(onlyThisTimeline, function(d) { return d.id; }); }); } else { let onlyThisTimeline = timeline(data); let maxY = 0; onlyThisTimeline.forEach(function (d, j) { let src = data[j]; src.y = d.y + accY; src.dy = d.dy; src.lane = d.lane; src.start = d.start; src.end = d.end; src.originalEnd = d.originalEnd; src.originalStart = d.originalStart; maxY = Math.max(d.y, maxY); }); accY += maxY + TL_MAXBAND_HEIGHT; } } getMap() { return new Map() .set("rx", (d) => (d.virulence ? 2 : 0)) .set("x", (d) => d.start) .set("y", (d) => d.y) .set("height", (d) => d.dy) .set("width", (d) => d.end - d.start) .set("fill", colorNode) .set("stroke", strokeNode) .set("stroke-width", strokeWidthNode) .set("opacity", opacityNode); } } class BarHandler { #x; #y; setup() { const sumByProduct = new Map(); const byProduct = d3.group(data, (d) => d.product); byProduct.forEach((v, k) => { sumByProduct.set( k, d3.sum(v, (d) => d.virulence) ); }); const domain = shouldGroup == "Yes" ? d3.groupSort( data, // TODO: find a better way to map the product to a value that guarantees the desired order ([d]) => -(sumByProduct.get(d.product) * 100 + d.virulence), (d) => d.id ) : d3.groupSort( data, ([d]) => -d.virulence, (d) => d.id ); this.x = d3 .scaleBand() .domain(domain) // descending virulence .range([margin, width - margin]) .padding(0.1); this.y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.virulence)]) .range([height - margin - padding, margin - padding]); } getMap() { return new Map() .set("width", this.x.bandwidth()) .set("height", (d) => this.y(0) - this.y(d.virulence)) .set("rx", 0) .set("x", (d) => this.x(d.id)) .set("y", (d) => this.y(d.virulence)) .set("fill", colorNode) .set("stroke", strokeNode) .set("stroke-width", strokeWidthNode) .set("opacity", opacityNode); } } //// const vizTypes = new Map() .set("Bubble", new BubbleHandler()) .set("Bar", new BarHandler()) .set("Timeline", new TimelineHandler()) .set("Treemap", new TreemapHandler()); const container = html`

${Array.from( Array.from(vizTypes.keys()), (d) => html`` )}

${tooltipTemplate}

`; const buttons = d3 .select(container) .select("#constance_toolbar") .selectAll("button") .on("click", (ev) => morphToViz(ev.target.value)); const tooltipDiv = d3.select(container).select(".tooltip"); const svg = d3 .select(container) .select("#constance_chart") .append("svg") .attr("width", width - 2 * padding) .attr("height", height - 2 * padding) .style("background", "#FFFFFF") .append("g"); const rects = svg .selectAll("rect") .data(data, (d) => d.id) .enter() .append("rect") .call(tooltip, tooltipDiv); // Eevent handlers function onMouseOver(event, d) { d3.select(event.target).style("cursor", "pointer"); } // function onMouseMove(event, d) { // } function onMouseOut(event, d) { d3.select(event.target).style("cursor", "default"); } // toggling state as opposed to clearing out and selecting allows for multi-select, // which is great for selection // ..or you could do shift-click function onClick(event, d) { if (event.shiftKey) { selectToggle(d); } else { selectOnly(d); } morphToViz(currVizType); } rects .on("click", onClick) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); // .on("mousemove", onMouseMove); function selectOnly(d) { data.forEach((d) => (d.selected = false)); d.selected = true; } function selectToggle(d) { d.selected = !d.selected; } let currSelectMethod = "fade"; function selectMethod(value) { currSelectMethod = value; morphToViz(currVizType); } // "Morhing" engine let currVizType = undefined; function morphToViz(value) { const handler = vizTypes.get(value); if (handler) { currVizType = value; morph(handler); } } function morph(handler) { handler.setup(); rects .transition() .delay(function (d, i) { return i * transitionDelay; }) // stagger .duration(transitionTime) .ease(d3.easeLinear) .call(applyHandler, handler.getMap()); } function applyHandler(selection, handlerMap) { handlerMap.forEach((v, a) => { selection.attr(a, v); }); } function init() { const largestEntry = data.reduce((prev, curr) => { return prev.virulence > curr.virulence ? prev : curr; }); selectOnly(largestEntry); morphToViz(vizTypes.keys().next().value); } init(); return container; }30:Tfb7,layoutTimeline = function () { var timelines = []; var dateAccessor = function (d) { return new Date(d); }; var processedTimelines = []; var startAccessor = function (d) { return d.start; }; var endAccessor = function (d) { return d.end; }; var size = [500, 100]; var timelineExtent = [-Infinity, Infinity]; var setExtent = []; var displayScale = d3.scaleLinear(); var swimlanes = []; var padding = 0; var fixedExtent = false; var maximumHeight = Infinity; function processTimelines() { timelines.forEach(function (band) { var projectedBand = {}; for (var x in band) { if (band.hasOwnProperty(x)) { projectedBand[x] = band[x]; } } projectedBand.start = dateAccessor(startAccessor(band)); projectedBand.end = dateAccessor(endAccessor(band)); projectedBand.lane = 0; processedTimelines.push(projectedBand); }); } function projectTimelines() { if (fixedExtent === false) { var minStart = d3.min(processedTimelines, function (d) { return d.start; }); var maxEnd = d3.max(processedTimelines, function (d) { return d.end; }); timelineExtent = [minStart, maxEnd]; } else { timelineExtent = [dateAccessor(setExtent[0]), dateAccessor(setExtent[1])]; } console.log( `displayScale.domain(${timelineExtent}).range(${[0, size[0]]}); ` ); displayScale.domain(timelineExtent).range([0, size[0]]); processedTimelines.forEach(function (band) { band.originalStart = band.start; band.originalEnd = band.end; band.start = displayScale(band.start); band.end = displayScale(band.end); }); } function fitsIn(lane, band) { if (lane.end < band.start || lane.start > band.end) { return true; } var filteredLane = lane.filter(function (d) { return d.start <= band.end && d.end >= band.start; }); if (filteredLane.length === 0) { return true; } return false; } function findlane(band) { //make the first array if (swimlanes[0] === undefined) { swimlanes[0] = [band]; return; } var l = swimlanes.length - 1; var x = 0; while (x <= l) { if (fitsIn(swimlanes[x], band)) { swimlanes[x].push(band); return; } x++; } swimlanes[x] = [band]; return; } function timeline(data) { if (!arguments.length) return timeline; timelines = data; processedTimelines = []; swimlanes = []; processTimelines(); projectTimelines(); processedTimelines.forEach(function (band) { findlane(band); }); var height = size[1] / swimlanes.length; height = Math.min(height, maximumHeight); swimlanes.forEach(function (lane, i) { lane.forEach(function (band) { band.y = i * height; band.dy = height - padding; band.lane = i; }); }); return processedTimelines; } timeline.dateFormat = function (_x) { if (!arguments.length) return dateAccessor; dateAccessor = _x; return timeline; }; timeline.bandStart = function (_x) { if (!arguments.length) return startAccessor; startAccessor = _x; return timeline; }; timeline.bandEnd = function (_x) { if (!arguments.length) return endAccessor; endAccessor = _x; return timeline; }; timeline.size = function (_x) { if (!arguments.length) return size; size = _x; return timeline; }; timeline.padding = function (_x) { if (!arguments.length) return padding; padding = _x; return timeline; }; timeline.extent = function (_x) { if (!arguments.length) return timelineExtent; fixedExtent = true; setExtent = _x; if (_x.length === 0) { fixedExtent = false; } return timeline; }; timeline.maxBandHeight = function (_x) { if (!arguments.length) return maximumHeight; maximumHeight = _x; return timeline; }; return timeline; }31:Td54,data = { let data = [ { id: "S1117269", status: "O", product: "COMMONSHTML", component: "HTML.OBJECTINSPECTOR", first: "2014-09-15", last: "2015-10-13", virulence: 1 }, { id: "S1123311", status: "O", product: "COMMONSHTML", component: "HTML.OBJECTINSPECTOR", first: "2014-10-08", last: "2015-10-13", virulence: 1 }, { id: "S1124568", status: "D", product: "COMMONSHTML", component: "HTML.THEMES", first: "2014-10-14", last: "2014-11-10", virulence: 1 }, { id: "S1147317", status: "O", product: "COMMONSHTML", component: "HTML.THEMES", first: "2015-01-20", last: "2015-10-13", virulence: 2 }, { id: "S1147340", status: "N", product: "COMMONSHTML", component: "HTML.THEMES", first: "2015-01-20", last: "2015-06-10", virulence: 1 }, { id: "S1147457", status: "D", product: "RDVISUALDESIGN", component: "RDVISUALDESIGN", first: "2015-01-21", last: "2015-02-03", virulence: 10 }, { id: "S1150372", status: "D", product: "FORECASTWEB", component: "FORECASTWEB.TRACKINGNODE.RESULTS", first: "2015-02-02", last: "2015-02-24", virulence: 5 }, { id: "S1164366", status: "F", product: "BIPLATFORM", component: "BIRD.VAV.HTML5", first: "2015-03-18", last: "2015-03-28", virulence: 20 }, { id: "S1168148", status: "F", product: "COMMONSHTML", component: "HTML.RESPONSIVEPOPOVER", first: "2015-03-31", last: "2015-04-23", virulence: 7 }, { id: "S1169125", status: "D", product: "FORECASTWEB", component: "FORECASTWEB.INPUTNODE.RESULTS", first: "2015-04-03", last: "2015-04-07", virulence: 9 }, { id: "S1173252", status: "D", product: "FORECASTWEB", component: "FORECASTWEB.DSW.HIERARCHY", first: "2015-04-20", last: "2015-04-22", virulence: 11 }, { id: "S1182669", status: "O", product: "COMMONSHTML", component: "HTML.OBJECTINSPECTOR", first: "2015-05-29", last: "2015-10-13", virulence: 1 }, { id: "S1185409", status: "O", product: "COMMONSHTML", component: "HTML.OBJECTINSPECTOR", first: "2015-06-11", last: "2015-10-13", virulence: 12 }, { id: "S1203552", status: "D", product: "COMMONSHTML", component: "HTML.THEMES", first: "2015-09-15", last: "2015-10-09", virulence: 1 } ]; function toDate(s) { var dt = s.split(/[: T-]/).map(parseFloat); dt = new Date( dt[0], dt[1] - 1, dt[2], dt[3] || 0, dt[4] || 0, dt[5] || 0, 0 ); console.log(`${s} => ${dt}`); if (dt.getFullYear() == 1969) console.log(`Danger, Will Robinson!!!!`); return dt; } // Cleaning up data => consider changing how it is generated. Use start and end instead of first and last data.forEach(function (d) { d.start = toDate(d.first); d.dstart = d.start; //d.start is changed by timeline d.end = toDate(d.last); }); return data.filter((d) => d.virulence > 0); }32:[{"id":"4c8097acd27dd155998f8895c68edacd48028859a099a496ffb72e4a0691ce13e800f0510ff1427045ad3b37b802e7a8a5f5c8f9bf82a55efa3cf16670fc04b1","href":"https://static.observableusercontent.com/files/4c8097acd27dd155998f8895c68edacd48028859a099a496ffb72e4a0691ce13e800f0510ff1427045ad3b37b802e7a8a5f5c8f9bf82a55efa3cf16670fc04b1","name":"medieval_empires_cleaned@1.json","type":"application/json","lastModified":1698267477482.7,"size":20673},{"id":"d2d70ff6de49f2b04f10a41b2083722c833f1ba6febf38dd7f5a0bc822496e143300bdee6481a3efe4930f3b6380bce4db3ba5020af520f43d3dfb4e4d15ab93","href":"https://static.observableusercontent.com/files/d2d70ff6de49f2b04f10a41b2083722c833f1ba6febf38dd7f5a0bc822496e143300bdee6481a3efe4930f3b6380bce4db3ba5020af520f43d3dfb4e4d15ab93","name":"medieval_empires_cleaned@5.json","type":"application/json","lastModified":1698277830661.233,"size":16452},{"id":"5ffe18fcf77cbacf34679948d763dcd0892e2c41a68eaf6dff75af8df0e1f6251f5c9c981c2f36f66b62090bf86040ce3054232d0e59b75ece73742b75fcab58","href":"https://static.observableusercontent.com/files/5ffe18fcf77cbacf34679948d763dcd0892e2c41a68eaf6dff75af8df0e1f6251f5c9c981c2f36f66b62090bf86040ce3054232d0e59b75ece73742b75fcab58","name":"medieval_empires_cleaned@2.json","type":"application/json","lastModified":1698275816375.993,"size":17074},{"id":"509fc8ddb2de3b55dbc3cfe25ec0a78a37a9d48f19f21631c492048d7f771044ecfca69289cb324c75f8b7f5d7304106d68c5e2c2637996fe5ef4363ae63594d","href":"https://static.observableusercontent.com/files/509fc8ddb2de3b55dbc3cfe25ec0a78a37a9d48f19f21631c492048d7f771044ecfca69289cb324c75f8b7f5d7304106d68c5e2c2637996fe5ef4363ae63594d","name":"medieval_empires_cleaned@3.json","type":"application/json","lastModified":1698276224781.036,"size":16971},{"id":"61638ab1a01d1632e06ec18987c0e987dcc89b19e7aeb64c8c866cb5cb6c727aae14db804d3b791550b7064768ab9a59af5d6b8fe04a115d7e1a8b6700684567","href":"https://static.observableusercontent.com/files/61638ab1a01d1632e06ec18987c0e987dcc89b19e7aeb64c8c866cb5cb6c727aae14db804d3b791550b7064768ab9a59af5d6b8fe04a115d7e1a8b6700684567","name":"medieval_empires_cleaned@4.json","type":"application/json","lastModified":1698277728009.352,"size":16416},{"id":"ea62eaa361db99b627c0c8a9ed25efbd6a3f12950171ecb77b1f87c2dc29cc016b46b30acd3d2031d9817d32fc43939febea61ac080ca0aae40a693c4fc3787c","href":"https://static.observableusercontent.com/files/ea62eaa361db99b627c0c8a9ed25efbd6a3f12950171ecb77b1f87c2dc29cc016b46b30acd3d2031d9817d32fc43939febea61ac080ca0aae40a693c4fc3787c","name":"medieval_empires_cleaned.json","type":"application/json","lastModified":1698101927614.977,"size":20396}] 2d:{"title":"Constance: an Object Constancy experiment","cells":[{"id":0,"value":"# Constance: an Object Constancy experiment ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"A dynamic chart built around [Object Constancy](https://bost.ocks.org/mike/constancy/) principles.\n\nThis is a little experiment based on Mike Bostock's writings about [object constancy](https://bost.ocks.org/mike/constancy/) and Jeffrey Heer's paper on [Animated Transitions in Statistical Data Graphics](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.154.8350&rep=rep1&type=pdf).\n\nThe idea of animating the transition between data visualization types - keeping object constancy as they change - is to allow the user to track elements of interest. The animation allows the user to make a connection between the different facets of the data surfaced by each visualization.\n\nThis technique animates between [D3.js](https://d3js.org/) layout calculations. Rectangles are converted to circles and vice-versa through the manipulation of the rx and ry attributes of the SVG rect element.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"viewof constance = Constance(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof transitionTime = Inputs.range([0, 1000], { step: 10, value: 500, label: \"Transition time\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof transitionDelay = Inputs.range([0, 50], {\n step: 1,\n value: 0,\n label: \"Stagerring delay\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof selectionStyle = Inputs.radio([\"Highlight\", \"Isolate\"], {\n label: \"Selection style\",\n value: \"Highlight\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"viewof shouldGroup = Inputs.radio([\"Yes\", \"No\"], {\n label: \"Sort by Groups\",\n value: \"Yes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"## Visualization Types","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"vizChannels = [\"id\", \"product\", \"virulence\", \"first\", \"last\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"function tooltipContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum))\n .join(\"p\")\n .filter(([key, value]) => vizChannels.includes(key))\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"{\n const sumByProduct = new Map();\n const byProduct = d3.group(data, (d) => d.product);\n\n byProduct.forEach((v, k) => {\n sumByProduct.set(\n k,\n d3.sum(v, (d) => d.virulence)\n );\n });\n return sumByProduct;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"The timeline layout was adapted from ([emeeks/d3.layout.timeline: A layout for band-style timelines](https://github.com/emeeks/d3.layout.timeline)). It was modified to account for API changes since it was last updated (c. D3v4).","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"colorScale = d3.scaleOrdinal(d3.schemeAccent);","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"colorNode = (d) => {\n if (selectionStyle == \"Highlight\") return colorScale(d.product);\n // Isolate\n return d.selected\n ? colorScale(d.product) //\"red\"\n : \"lightgrey\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"strokeNode = (d) => {\n return d.selected ? \"grey\" : \"lightgrey\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"strokeWidthNode = (d) => {\n return d.selected ? 2 : 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"opacityNode = (d) => {\n return d.selected ? 1 : 0.5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"external_padding = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"padding = 5;","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"margin = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"// height = (width * 16) / 9; // problematic on a 49'' monitor...\n// height = 0.75 *\n// (window.innerHeight ||\n// document.documentElement.clientHeight ||\n// document.body.clientHeight) -\n// 2 * padding\nheight = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"{\n let first = \"2015-09-15\";\n let dt = first.split(/[: T-]/).map(parseFloat);\n let start = new Date(\n dt[0],\n dt[1] - 1,\n dt[2],\n dt[3] || 0,\n dt[4] || 0,\n dt[5] || 0,\n 0\n );\n console.log(first, start, new Date(start));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"await FileAttachment(\"medieval_empires_cleaned@5.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"//import { Tooltip } from \"@clhenrick/tooltip-component\"\nimport { tooltip, tooltipTemplate } with {\n dummy as resetStyle,\n dummy as setStyle,\n tooltipContents as setContents,\n height as height\n} from \"@clhenrick/tooltip-d3-convention\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"dummy = function (_) {}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}