27:null 28:["$","title",null,{"children":"Untitled | atondelier | Observable"}] 2d:T12dc,function drawWithData (data) { const width = window.innerWidth; const height = 400; const margin = 50; const svg = d3.create('svg').attr('id', 'app').attr('width', width).attr('height', height); svg.node().innerHTML = ` `; const xScale = d3.scaleLinear() .domain([0, data.maxSteps]) .range([margin, width - margin]); const yScale = d3.scaleBand() .domain(Object.keys(data.nodes).map(k => +k)) .range([margin, height - margin]); { const linesGroup = svg.append('g').classed('linesGroup', true); const enterNodeLineGroup = enter => enter.append('g').classed('line', true) .call(g => g.append('path')) .call(g => g.append('rect')) .call(g => g.append('text')); const updateNodeLineGroup = g => { g.attr('transform', (node, index) => `translate(${0} ${yScale(index) + yScale.bandwidth() / 2})`); g.select('path') .attr('d', (node) => { const path = d3.path(); path.moveTo(xScale(0), 0); path.lineTo(xScale(data.maxSteps), 0); return path; }); g.select('text').text((node) => node).attr('dx', 0).attr('dy', -10); }; linesGroup.selectAll('g.line') .data(data.nodes) .join(enterNodeLineGroup) .call(updateNodeLineGroup); } { const daysGroup = svg.append('g').classed('days', true); const enterDayGroup = enter => enter.append('g').classed('day', true) .call(g => g.append('text')); const positionDayGroup = g => { g.attr('transform', (day) => `translate(${xScale(day)} ${margin - 20})`); }; const updateDayGroup = g => { g.select('text') .call(text => text.append('tspan').text(messages.time).attr('x', 0).attr('dy', 0)) .call(text => text.append('tspan').classed('figure', true).text(day => day).attr('x', 0).attr('dy', 20)); }; daysGroup.selectAll('g.day') .data(Array.from(new Array(data.maxSteps + 1), (_, i) => i)) .join(enterDayGroup) .call(positionDayGroup) .call(updateDayGroup); } { const lineDrawer = d3.line() .x(d => xScale(d.step)) .y(d => yScale(d.node) + yScale.bandwidth() / 2) .curve(d3.curveBumpX); const colorInterpolator = d3.interpolateRgbBasis(["red", "lightgreen"]); const stepsGroup = svg.append('g').classed('steps', true); const enterStepGroup = enter => enter.append('g').classed('step', true) .call(g => g.append('circle')) .call(g => g.append('text').classed('tags', true)) .call(g => g.append('text').classed('remainingCapacity', true)); const positionStepGroup = g => { g.attr('transform', (step) => `translate(${xScale(step.step)} ${yScale(step.node) + yScale.bandwidth() / 2})`); }; const updateStepGroup = g => { g.select('circle') .attr('cx', 2.5) .attr('cy', 0) .attr('r', 5) .style('stroke', (step) => step.remainingCapacity > 0 ? '' : colorInterpolator(0)) .style('stroke-width', (step) => step.remainingCapacity > 0 ? 1 : 2); g.select('text.remainingCapacity') .attr('dy', 20) .text((step) => step.remainingCapacity > 0 ? '|'.repeat(step.remainingCapacity) : '✕') .style('fill', (step) => colorInterpolator(step.remainingCapacity / data.maxCapacity)) .attr('letter-spacing', -5); g.select('text.tags') .attr('dx', 2.5) .attr('dy', 40) .text((step) => step.tags.map((tag) => messages[tag]).join(' + ')); }; stepsGroup.append('path').datum(data.steps).attr('d', lineDrawer); stepsGroup.selectAll('g.step') .data(data.steps) .join(enterStepGroup) .call(positionStepGroup) .call(updateStepGroup); } { const threatsGroup = svg.append('g').classed('threats', true); const enterThreatGroup = enter => enter.append('g').classed('threat', true) .call(g => g.append('text')); const positionThreatGroup = g => { g.attr('transform', (threat) => `translate(${xScale(threat.step)} ${yScale(threat.node) + yScale.bandwidth() / 2})`); }; const updateThreatGroup = g => { g.select('text') .attr('dx', 2.5) .attr('dy', -12) .text((threat) => '⚔') }; threatsGroup.selectAll('g.threat') .data(data.threats) .join(enterThreatGroup) .call(positionThreatGroup) .call(updateThreatGroup); } return svg.node(); }2e:T4bc,2f:[] 2b:{"id":"9a33f4af37f29e8d","slug":null,"title":"","thumbnail":"a221455281f74d288496229b13b80750109f6794effebedde3fa7ab218e0e143","access_level":"public","create_time":"$D2023-06-06T19:31:13.906Z","update_time":"$D2023-06-08T19:25:27.393Z","view_time":null,"first_public_time":"$D2023-06-06T19:31:13.906Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6583c55d50a93d97","login":"atondelier","name":"atondelier","avatar_url":"https://avatars-next.observableusercontent.com/dfe54cc52cdc5f7e5204083048e55f8c49188c24bd858dfcc660b5ba8f8ab8f3","tier":"starter_2024"},"version":371,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"30eee7a5b186bd97","login":"atondelier","name":"atondelier","avatar_url":"https://avatars-next.observableusercontent.com/dfe54cc52cdc5f7e5204083048e55f8c49188c24bd858dfcc660b5ba8f8ab8f3","tier":null}],"members":[{"type":"individual","id":"30eee7a5b186bd97","login":"atondelier","name":"atondelier","avatar_url":"https://avatars-next.observableusercontent.com/dfe54cc52cdc5f7e5204083048e55f8c49188c24bd858dfcc660b5ba8f8ab8f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":296,"value":"drawWithData({\n nodes: [ 'A', 'B', 'C', 'D' ],\n links: [\n { from: 0, to: 1, weight: 6 },\n { from: 0, to: 2, weight: 6 },\n { from: 1, to: 3, weight: 4 },\n { from: 1, to: 2, weight: 1 },\n { from: 2, to: 3, weight: 1 }\n ],\n lastStep: 9,\n maxSteps: 9,\n maxCapacity: 6,\n threats: [ { step: 6, node: 2 }, { step: 7, node: 2 }, { step: 8, node: 2 } ],\n steps: [\n { step: 0, node: 0, remainingCapacity: 6, threats: 0, tags: [] },\n {\n step: 6,\n node: 1,\n remainingCapacity: 0,\n threats: 0,\n tags: [ 'stepTag.reloading' ]\n },\n {\n step: 7,\n node: 1,\n remainingCapacity: 6,\n threats: 0,\n tags: [ 'stepTag.reloaded' ]\n },\n {\n step: 8,\n node: 2,\n remainingCapacity: 5,\n threats: 1,\n tags: [ 'stepTag.hiding' ]\n },\n { step: 9, node: 3, remainingCapacity: 4, threats: 1, tags: [] }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"drawWithData({\"nodes\":[\"A\",\"B\",\"C\",\"D\"],\"links\":[{\"fromNode\":0,\"toNode\":1,\"cost\":6},{\"fromNode\":1,\"toNode\":3,\"cost\":4},{\"fromNode\":1,\"toNode\":2,\"cost\":1},{\"fromNode\":2,\"toNode\":3,\"cost\":1},{\"fromNode\":0,\"toNode\":2,\"cost\":6}],\"lastStep\":8,\"maxSteps\":8,\"maxCapacity\":6,\"threats\":[{\"step\":6,\"node\":2},{\"step\":7,\"node\":2},{\"step\":8,\"node\":2}],\"steps\":[{\"step\":0,\"node\":0,\"remainingCapacity\":6,\"threats\":0,\"tags\":[]},{\"step\":6,\"node\":2,\"remainingCapacity\":0,\"threats\":1,\"tags\":[\"stepTag.reloading\",\"stepTag.hiding\"]},{\"step\":7,\"node\":2,\"remainingCapacity\":6,\"threats\":2,\"tags\":[\"stepTag.reloaded\",\"stepTag.hiding\"]},{\"step\":8,\"node\":3,\"remainingCapacity\":5,\"threats\":2,\"tags\":[]}]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"messages = {\n return {\n 'stepTag.reloading': 'Reloading',\n 'stepTag.reloaded': 'Reloaded',\n 'stepTag.hiding': 'Hiding',\n 'time': 'Time',\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$2e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"