29:null 2a:["$","title",null,{"children":"Simple Stocks and Flows | Rick Martin | Observable"}] 2f:T6ab,## Simulation Controls Simulations run in discrete steps. It should be easy for a user to move between steps or reset the simulation. The interface should have two states: **Simulating** and **Editing**. When simulating, the simulation controls will be unlocked, but no editing will be allowed. When editing, the simulation doesn't play. The user will see the initial state of the simulation, and can modify it. Simulation Controls - Toggle Preview/Edit Mode - Step Forward Once - Play - Step forward repeatedly - Step Rate - How long to wait between steps when playing - Pause - Reset Simulation File Controls - New Simulation - Save Simulation ` + ` - Load Simulation Logging Controls - Toggle Logging - Store the values of certain Stock/Flow/Alarm elements for each step - Save Logs Editor Settings - Grid Size - Adjust the grid snapping of the simulation renderer - Reset View - Reset zoom and snap the renderer's view to the center of the simulation's content. - Toggle Simple View - Hide all histograms and any "secondary" pipes. - Close Sidebar - Close the sidebar and all allow the renderer to take up the full page width. Renderer - Click an element to select it. This should open the sidebar and display a form with options for this element. - Drag elements to move them in the renderer. - Drag in a blank space to move the camera. - Scroll to zoom. - New Stock ` + `, then click to place - New Flow ` + `, then click to place - New Alarm ` + `, then click to place Other Controls - Duplicate Element ` + ` - Copy Element ` + ` - Paste Element ` + ` - Delete Element `` - Undo ` + ` - Redo ` + ` 30:T56d,{ const bar_height = 64; const bar_width = 18; const thickness = 4; const accuracy = 0; const units = 'Citizens'; // Convert amount to a percentage var amountPercent = (amount - config.min_amount) / Math.abs(config.max_amount - config.min_amount); var rounded = `${amount.toFixed(accuracy)} ${units}`; const svg = d3.create('svg').attr('viewBox', [-width/2, -50, width, 100]); svg.append('rect') .attr('x', -bar_width / 2) .attr('y', -bar_height / 2) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height) .attr('fill', config.backdrop_color) svg.append('text') .text(rounded) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('y', bar_height/2) svg.append('rect') .attr('x', -bar_width / 2) .attr('y', bar_height / 2 - bar_height * amountPercent) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height * amountPercent) .attr('fill', config.focus_color) svg.append('rect') .attr('x', -bar_width / 2) .attr('y', -bar_height / 2) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height) .attr('fill', 'none') .attr('stroke', config.frame_color) .attr('stroke-width', thickness) return svg.node(); }31:T6a3,{ const radius = 24; const thickness = 4; const degrees = 240; const accuracy = 1; const units = 'mg/s'; // Convert rate to a percentage var ratePercent = (rate - config.min_rate) / Math.abs(config.max_rate - config.min_rate); var rotateBy = -(degrees / 2) + ratePercent*degrees; var rounded = `${rate.toFixed(accuracy)} ${units}`; const svg = d3.create('svg').attr('viewBox', [-width/2, -50, width, 100]); svg.append('text') .text(rounded) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('y', radius) svg.append('circle') .attr('r', radius) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) svg.append('path') .attr('cx', 0) .attr('cy', 0) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'butt') .attr('d', d3.line()([[0, -radius], [0, -radius * 0.75]])) .attr('transform', `rotate(${-(degrees / 2)})`) svg.append('path') .attr('cx', 0) .attr('cy', 0) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'butt') .attr('d', d3.line()([[0, -radius], [0, -radius * 0.75]])) .attr('transform', `rotate(${degrees / 2})`) svg.append('path') .attr('cx', 0) .attr('cy', 0) .attr('stroke', config.focus_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'round') .attr('d', d3.line()([[0, 0], [0, -radius * 0.70]])) .attr('transform', `rotate(${rotateBy})`) svg.append('circle') .attr('r', thickness) .attr('fill', config.focus_color) return svg.node(); }32:T58e,{ const radius = 24; const thickness = 4; const svg = d3.create('svg').attr('viewBox', [-width/2, -50, width, 100]); svg.append('path') .attr('d',' M 30 10 A 32 32 0 0 1 0 32') .attr('stroke', config.frame_color) .attr('fill', 'none') .attr('stroke-width', thickness); svg.append('circle') .attr('r', thickness) .attr('cx', 30) .attr('cy', 10) .attr('fill', config.frame_color); svg.append('rect') .attr('x', -12) .attr('y', 0) .attr('rx', 8) .attr('width', 24) .attr('height', 36) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) var bell = svg.append('circle') .attr('r', radius) .attr('fill', alarms[0] ? config.focus_color : config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) svg.append('circle') .attr('r', thickness) .attr('fill', config.frame_color) // This function will animate the bell over and over again, if the alarm is active. function animateAlarm() { if (alarms[0]) { bell.attr('cx', '1') .transition() .ease(d3.easeLinear) .attr('cx', -1) .duration(100) .on('end', () => setTimeout(animateAlarm, 0)); } else { bell.attr('cx', '0') setTimeout(animateAlarm, 1000); } }; animateAlarm(); return svg.node(); }33:T702,{ const thickness = 4; const svg = d3.create('svg').attr('viewBox', [-width/2, -50, width, 100]); const curve = d3.line().curve(d3.curveBundle.beta(1)); const points = [[-50, 10], [-30, 10], [30, -10], [50, -10]] var pipe = svg.append('path') .attr('d', curve(points)) .attr('opacity', config.pipe_opacity) .attr('stroke', config.secondary_color) .attr('stroke-width', thickness) .attr('fill', 'none') .attr('stroke-linecap', 'round') // The following are example components which represent potential start and finish locations. svg.append('rect') .attr('x', points[0][0] - 40) .attr('y', points[0][1] - 24) .attr('rx', 8) .attr('width', 48) .attr('height', 48) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) svg.append('rect') .attr('x', points[points.length - 1][0] - 8) .attr('y', points[points.length - 1][1] - 24) .attr('rx', 8) .attr('width', 48) .attr('height', 48) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness); // This function will animate the path over and over again function animatePipe() { // let length = pipe.node().getTotalLength(); // Length can be used to stretch the animation across the whole pipe // Transitioning from high to low moves "forward" along the path. pipe.attr('stroke-dasharray', '1 7') .attr('stroke-dashoffset', 32) // This initial offset must be a multiple of the sum of the dash array. .transition() .ease(d3.easeLinear) .attr('stroke-dashoffset', 0) .duration(6000) .on('end', () => setTimeout(animatePipe, 0)); }; animatePipe(); return svg.node(); }34:T9b9,{ const thickness = 4; const slotHeight = 24; const pipRadius = 8; const bankWidth = 200; const label = "Example Bank"; const exampleBank = { stringValue: "Test", initialSize: 400, decayRate: 5.1, objectValue: { test: 'Obj' }, arrayValue: [1, 2, 3], functionValue: () => { return 1; }, nullValue: undefined }; const exampleBankSlots = Object.keys(exampleBank); const svg = d3.create('svg').attr('viewBox', [-width/2, -120, width, 240]); // Create a bounding rect to contain the slots. svg.append('rect') .attr('x', -bankWidth / 2) .attr('y', -((exampleBankSlots.length + 1) * slotHeight) / 2) .attr('rx', 8) .attr('width', bankWidth) .attr('height', (exampleBankSlots.length + 1) * slotHeight) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness); svg.append('text') .text(label) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('y', ((exampleBankSlots.length + 1) * slotHeight) / 2) // Each key in the bank represents a slot, which will be visually represented as a key/value pair in text, and a circle for interactions. for (let i = 0; i < exampleBankSlots.length; i++) { let key = exampleBankSlots[i]; let value = exampleBank[key]; svg.append('text') .text(`${key}`) .attr('text-anchor', 'beginning') .attr('dy', '1em') .attr('x', -bankWidth / 2 + thickness) .attr('y', (-(exampleBankSlots.length * slotHeight) / 2) + i * slotHeight) let valueText = `${value}`; if (typeof value === 'object' && !Array.isArray(value)) valueText = `Object`; if (typeof value === 'function') valueText = `Function`; if (value == void 0 || typeof value == 'null' || typeof value == 'undefined') valueText = `Null`; svg.append('text') .text(`${valueText}`) .attr('text-anchor', 'end') .attr('dy', '1em') .attr('x', (bankWidth / 2) - (pipRadius + thickness)) .attr('y', (-(exampleBankSlots.length * slotHeight) / 2) + i * slotHeight) svg.append('circle') .attr('r', pipRadius) .attr('cx', bankWidth / 2) .attr('cy', (-(exampleBankSlots.length * slotHeight) / 2) + i * slotHeight + (slotHeight / 2)) .attr('fill', valueText == `Null` ? config.backdrop_color : config.focus_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) } return svg.node(); }35:T647,{ const thickness = 4; const units = 'Citizens'; const chart_width = 120; const chart_height = 80; const history = [[0, 50], [1, 56], [2, 22], [3, 35], [4, 48], [5, 10], [6, 25], [7, 27], [8, 23], [9, 40]]; const svg = d3.create('svg').attr('viewBox', [-width/2, -100, width, 200]); const timeSeries = svg.append('g') .attr('transform', `translate(${-chart_width/2}, ${-chart_height/2})`); var xScale = d3.scaleLinear() .domain(d3.extent(history, function(d) { return d[0] })) .range([0, chart_width]) function padLinear([x0, x1], k) { const dx = (x1 - x0) * k / 2; return [x0 - dx, x1 + dx]; } var yScale = d3.scaleLinear() .domain(padLinear(d3.extent(history, function(d) { return d[1] }), 0.3)) .rangeRound([chart_height, 0]) var line = d3.line() .x(function(d) { return xScale( d[0]) }) .y(function(d) { return yScale( d[1]) }) timeSeries.append('g') .attr("class", "histogram-axis") .call(d3.axisLeft(yScale).ticks(5)) timeSeries.append('g') .attr("class", "histogram-axis") .call(d3.axisBottom(xScale).ticks(5)) .attr('transform', `translate(0, ${chart_height})`) timeSeries.append('path') .attr('d', line(history)) .attr('stroke', config.secondary_color) .attr('stroke-width', thickness - 1) .attr('fill', 'none') .attr('stroke-linecap', 'round'); timeSeries.append('text') .attr("class", "histogram-axis") .text(`${units} / time`) .attr('text-anchor', 'middle') .attr('y', -5) .attr('x', chart_width/2) return svg.node(); }36:Tbc4,exampleDefinition = { return { name: 'Example Simulation', timeUnit: 'Year', elements: [ { name: "Stock A", id: 1, type: 'stock', units: "Citizens", min: 0, max: 1000, value: 200, x: 0, y: 300, accuracy: 0, }, { name: "Stock B", id: 2, type: 'stock', units: "Houses", min: 0, max: 100, value: 15, x: 100, y: 300, accuracy: 0 }, { name: "Deaths", id: 3, type: 'stock', units: "Citizens", min: 0, value: 20, x: 200, y: 300, }, { name: "Flow A", id: 4, type: 'flow', fn: (state) => { let deaths = Math.floor(Math.random() * 2); let actualDeaths = state.stocks["Stock A"].take(deaths); state.stocks["Deaths"].give(deaths); let births = Math.floor(Math.random() * 3); let remainder = state.stocks["Stock A"].give(births); let actualBirths = births - remainder; let rate = actualBirths - actualDeaths; return rate; }, rate: 0, displayMin: -5, displayMax: 5, units: "Citizens", x: 100, y: 500, }, { name: "Population Failure", id: 5, type: 'alarm', fn: (state) => { return state.stocks["Stock A"].value < 2; }, stopSimulation: true, x: 100, y: 100, active: false }, { name: "Housing Failure", id: 6, type: 'alarm', fn: (state) => { return state.stocks["Stock A"].value / state.banks["Housing"].citizensPerHouse > state.stocks["Stock A"].value; }, stopSimulation: false, x: -400, y: 100, active: false }, { name: "Housing", id: 7, type: 'bank', values: { citizensPerHouse: 4, deathRate: 2.0, birthRate: 3.0 }, x: -300, y: 500 } ], histograms: [ { source: 4, x: 450, y: 450, data: [[0, 50], [1, 56], [2, 22], [3, 35], [4, 48], [5, 10], [6, 25], [7, 27], [8, 23], [9, 40]] }, { source: 1, x: -200, y: 350, data: [[0, 50], [1, 56], [2, 22], [3, 35], [4, 48], [5, 10], [6, 25], [7, 27], [8, 23], [9, 40]] } ], pipes: [ // It would be rough to require the user to input each pipe... Maybe we can calculate it using the references from each flow's fn? { from: 1, to: 4, points: [], }, { from: 4, to: 2, points: [], }, { from: 1, to: 5, points: [], }, { from: 1, to: 6, points: [], }, { from: 2, to: 6, points: [], } ] }; }37:T4ca,## Blind First Stab at Rendering Since this type of simulation can be quite large, I'll need to allow the user to move their view around. For this, we use d3.zoom. I'm just going to copy/paste the examples as functions, then call them while looping through the example schema. Each element and histogram is drawn inside a `` element. A reference to that element is stored in the schema. I then use d3.drag to allow each element to be moved around on the canvas. We can apply d3.drag to the group, and update both the definition's x and y, and the ``'s translation x and y. This way I don't need to move each shape individually. When an object is dragged, I will also need to update/redraw every pipe and histogram attached to it. (In this case, I just redraw every pipe and histogram in the simulation.) When the user releases an element, I snap that element to a grid, which can be configured. This makes the resulting diagrams look much cleaner. I would usually draw this grid for the user, however in this case, I think that would add too much visual noise. To help enforce the different visual layers, histograms and pipes exist inside of their own groups, which are rendered beneath all of our other elements.38:T4402,{ function handleZoom(e) { console.log('zoom', e); d3.select('svg.simulation-render g').attr('transform', e.transform); } let zoom = d3.zoom() .scaleExtent([0.25, 2]) .on('zoom', handleZoom); const svg = d3.create('svg') .classed('simulation-render', true) .attr('viewBox', [-width/2, -50, width, 640]) .call(zoom); const content = svg.append('g'); const pipes = content.append('g').classed('pipes', true); const histograms = content.append('g').classed('histograms', true); function drawHistogram(definition, simulationDefinition) { const thickness = 4; const chart_width = 120; const chart_height = 80; var sourceDefinition = getDefinitionByID(definition.source); var title = `${sourceDefinition.units} / ${simulationDefinition.timeUnit} / ${simulationDefinition.timeUnit}` if (sourceDefinition.type == 'stock') title = `${sourceDefinition.units} / ${simulationDefinition.timeUnit}` // Draw a line from the histogram to the source of the data. // This line should try not to directly touch either element. // It should also "lean" toward the source, as it can cause visual confusion if it touches the chart. var length = Math.sqrt(Math.pow(definition.x - sourceDefinition.x, 2) + Math.pow(definition.y - sourceDefinition.y, 2)); histograms.append('line') .classed('histogram-line', true) .attr('x1', definition.x) .attr('y1', definition.y) .attr('x2', sourceDefinition.x) .attr('y2', sourceDefinition.y) .attr('stroke', config.frame_secondary_color) .attr('stroke-dasharray', `${ length / 2 }, ${ length / 2 }`) .attr('stroke-dashoffset', `${ (length * 2.5 / 4) }`) const timeSeries = histograms.append('g') .classed('histogram draggable', true) .attr('transform', `translate(${definition.x - (chart_width/2)}, ${definition.y - (chart_height/2)})`); definition.el = timeSeries; var xScale = d3.scaleLinear() .domain(d3.extent(definition.data, function(d) { return d[0] })) .range([0, chart_width]) function padLinear([x0, x1], k) { const dx = (x1 - x0) * k / 2; return [x0 - dx, x1 + dx]; } var yScale = d3.scaleLinear() .domain(padLinear(d3.extent(definition.data, function(d) { return d[1] }), 0.3)) .rangeRound([chart_height, 0]) var line = d3.line() .x(function(d) { return xScale( d[0]) }) .y(function(d) { return yScale( d[1]) }) timeSeries.append('rect') .attr('width', chart_width) .attr('height', chart_height) .attr('fill', config.backdrop_color) timeSeries.append('g') .attr("class", "histogram-axis") .call(d3.axisLeft(yScale).ticks(5)) timeSeries.append('g') .attr("class", "histogram-axis") .call(d3.axisBottom(xScale).ticks(5)) .attr('transform', `translate(0, ${chart_height})`) timeSeries.append('path') .attr('d', line(definition.data)) .attr('stroke', config.secondary_color) .attr('stroke-width', thickness - 1) .attr('fill', 'none') .attr('stroke-linecap', 'round'); timeSeries.append('text') .attr("class", "histogram-axis") .text(title ? title : 'Histogram') .attr('text-anchor', 'middle') .attr('y', -5) .attr('x', chart_width/2); timeSeries.call(d3.drag() .subject((e) => { // Find the nearest group in our definition to the mouseclick event. return findClosestHistogramDefinition(e.x, e.y); }) .on('start', dragStart).on('drag', drag).on('end', dragEnd)); } function drawStock(definition, simulationDefinition) { const bar_height = 64; const bar_width = 18; const thickness = 4; // Convert amount to a percentage var valuePercent = (definition.value - definition.min) / Math.abs(definition.max - definition.min); var rounded = `${definition.value.toFixed(definition.accuracy)} ${definition.units}`; const stock = content.append('g') .classed('stock draggable', true) .attr('transform', `translate(${definition.x}, ${definition.y})`); definition.el = stock; stock.append('text') .text(rounded) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('y', bar_height / 2) stock.append('rect') .attr('x', -bar_width / 2) .attr('y', -bar_height / 2) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height) .attr('fill', config.backdrop_color) stock.append('rect') .attr('x', -bar_width / 2) .attr('y', bar_height / 2 - bar_height * valuePercent) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height * valuePercent) .attr('fill', config.focus_color) stock.append('rect') .attr('x', -bar_width / 2) .attr('y', -bar_height / 2) .attr('rx', Math.min(bar_width/2, bar_height/2)) .attr('width', bar_width) .attr('height', bar_height) .attr('fill', 'none') .attr('stroke', config.frame_color) .attr('stroke-width', thickness) stock.call(d3.drag() .subject((e) => { // Find the nearest group in our definition to the mouseclick event. return findClosestDefinition(e.x, e.y); }) .on('start', dragStart).on('drag', drag).on('end', dragEnd)); } function drawFlow(definition, simulationDefinition) { const radius = 24; const thickness = 4; const degrees = 240; const accuracy = 1; const units = 'mg/s'; // Convert rate to a percentage var ratePercent = (definition.rate - definition.displayMin) / Math.abs(definition.displayMax - definition.displayMin); var rotateBy = -(degrees / 2) + ratePercent*degrees; var rounded = `${definition.rate.toFixed(accuracy)} ${definition.units} / ${simulationDefinition.timeUnit}`; const flow = content.append('g') .classed('flow draggable', true) .attr('transform', `translate(${definition.x}, ${definition.y})`); definition.el = flow; flow.append('text') .text(rounded) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('x', 0) .attr('y', radius) flow.append('circle') .attr('r', radius) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) flow.append('path') .attr('stroke', config.frame_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'butt') .attr('d', d3.line()([[0, -radius], [0, -radius * 0.75]])) .attr('transform', `rotate(${-(degrees / 2)})`) flow.append('path') .attr('stroke', config.frame_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'butt') .attr('d', d3.line()([[0, -radius], [0, -radius * 0.75]])) .attr('transform', `rotate(${degrees / 2})`) flow.append('path') .attr('stroke', config.focus_color) .attr('stroke-width', thickness) .attr('stroke-linecap', 'round') .attr('d', d3.line()([[0, 0], [0, -radius * 0.70]])) .attr('transform', `rotate(${rotateBy})`) flow.append('circle') .attr('r', thickness) .attr('fill', config.focus_color) flow.call(d3.drag() .subject((e) => { // Find the nearest group in our definition to the mouseclick event. return findClosestDefinition(e.x, e.y); }) .on('start', dragStart).on('drag', drag).on('end', dragEnd)); } function drawAlarm(definition, simulationDefinition) { const radius = 24; const thickness = 4; const alarm = content.append('g') .classed('alarm draggable', true) .attr('transform', `translate(${definition.x}, ${definition.y})`); definition.el = alarm; alarm.append('path') .attr('d',' M 30 10 A 32 32 0 0 1 0 32') .attr('stroke', config.frame_color) .attr('fill', 'none') .attr('stroke-width', thickness); alarm.append('circle') .attr('r', thickness) .attr('cx', 30) .attr('cy', 10) .attr('fill', config.frame_color); alarm.append('rect') .attr('x', -12) .attr('y', 0) .attr('rx', 8) .attr('width', 24) .attr('height', 36) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) var bell = alarm.append('circle') .attr('r', radius) .attr('fill', definition.active ? config.focus_color : config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) alarm.append('circle') .attr('r', thickness) .attr('fill', config.frame_color) alarm.append('text') .text(definition.name) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('x', 0) .attr('y', radius + 12) alarm.call(d3.drag() .subject((e) => { // Find the nearest group in our definition to the mouseclick event. return findClosestDefinition(e.x, e.y); }) .on('start', dragStart).on('drag', drag).on('end', dragEnd)); // This function will animate the bell over and over again, if the alarm is active. function animateAlarm() { if (definition.active) { bell.attr('cx', '1') .transition() .ease(d3.easeLinear) .attr('cx', -1) .duration(100) .on('end', () => setTimeout(animateAlarm, 0)); } else { bell.attr('cx', '0') setTimeout(animateAlarm, 1000); } }; animateAlarm(); } function drawBank(definition, simulationDefinition) { const thickness = 4; const slotHeight = 24; const pipRadius = 8; const bankWidth = 200; const slots = Object.keys(definition.values); const bank = content.append('g') .classed('bank draggable', true) .attr('transform', `translate(${definition.x}, ${definition.y})`); definition.el = bank; // Create a bounding rect to contain the slots. bank.append('rect') .attr('x', -bankWidth / 2) .attr('y', -((slots.length + 1) * slotHeight) / 2) .attr('rx', 8) .attr('width', bankWidth) .attr('height', (slots.length + 1) * slotHeight) .attr('fill', config.backdrop_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness); bank.append('text') .text(definition.name) .attr('text-anchor', 'middle') .attr('dy', '1em') .attr('y', ((slots.length + 1) * slotHeight) / 2) // Each key in the bank represents a slot, which will be visually represented as a key/value pair in text, and a circle for interactions. for (let i = 0; i < slots.length; i++) { let key = slots[i]; let value = definition.values[key]; bank.append('text') .text(`${key}`) .attr('text-anchor', 'beginning') .attr('dy', '1em') .attr('x', -bankWidth / 2 + thickness) .attr('y', (-(slots.length * slotHeight) / 2) + i * slotHeight) let valueText = `${value}`; if (typeof value === 'object' && !Array.isArray(value)) valueText = `Object`; if (typeof value === 'function') valueText = `Function`; if (value == void 0 || typeof value == 'null' || typeof value == 'undefined') valueText = `Null`; bank.append('text') .text(`${valueText}`) .attr('text-anchor', 'end') .attr('dy', '1em') .attr('x', (bankWidth / 2) - (pipRadius + thickness)) .attr('y', (-(slots.length * slotHeight) / 2) + i * slotHeight) bank.append('circle') .attr('r', pipRadius) .attr('cx', bankWidth / 2) .attr('cy', (-(slots.length * slotHeight) / 2) + i * slotHeight + (slotHeight / 2)) .attr('fill', valueText == `Null` ? config.backdrop_color : config.focus_color) .attr('stroke', config.frame_color) .attr('stroke-width', thickness) bank.call(d3.drag() .subject((e) => { // Find the nearest group in our definition to the mouseclick event. return findClosestDefinition(e.x, e.y); }) .on('start', dragStart).on('drag', drag).on('end', dragEnd)); } } function drawPipe(definition, simulationDefinition) { const thickness = 4; const clearance = 48; var from = getDefinitionByID(definition.from); var to = getDefinitionByID(definition.to); const curve = d3.line().curve(d3.curveBundle.beta(1)); const points = [ [from.x, from.y], [from.x + clearance, from.y], [to.x - clearance, to.y], [to.x, to.y] ]; // If the pipe needs to backtrack, we should add extra clearance points. if (from.x + clearance > to.x) { // We are backtracking. Do we need 'up' or 'down' control points? if (from.y > to.y) { points.splice(2, 0, [from.x + clearance, from.y - clearance*2]); points.splice(3, 0, [to.x - clearance, to.y + clearance*2]); } else { points.splice(2, 0, [from.x + clearance, from.y + clearance*2]); points.splice(3, 0, [to.x - clearance, to.y - clearance*2]); } } var pipe = pipes.append('path') .attr('d', curve(points)) .attr('opacity', config.pipe_opacity) .attr('stroke', to.type == 'alarm' ? config.frame_secondary_color : config.secondary_color) .attr('stroke-width', to.type == 'alarm' ? thickness / 2 : thickness) .attr('fill', 'none') .attr('stroke-linecap', 'round') .attr('stroke-dasharray', '1 7') // This function will animate the path over and over again function animatePipe() { // let length = pipe.node().getTotalLength(); // Length can be used to stretch the animation across the whole pipe // Transitioning from high to low moves "forward" along the path. pipe.attr('stroke-dashoffset', 32) // This initial offset must be a multiple of the sum of the pipe's dash array. .transition() .ease(d3.easeLinear) .attr('stroke-dashoffset', 0) .duration(6000) .on('end', () => setTimeout(animatePipe, 0)); }; if (to.type != 'alarm') animatePipe(); } function getDefinitionByID(id) { let definition = exampleDefinition.elements.find((s) => { return s.id == id; }); if (definition) return definition; throw new Error(`No such ID in definition: ${id}`); } function findClosestDefinition(x, y) { var closestDist = Number.MAX_VALUE; var closest = undefined; exampleDefinition.elements.forEach((d) => { let dist = (x - d.x) ** 2 + (y - d.y) ** 2; if (dist < closestDist) { closest = d; closestDist = dist; } }); return closest; } function findClosestHistogramDefinition(x, y) { var closestDist = Number.MAX_VALUE; var closest = undefined; exampleDefinition.histograms.forEach((d) => { let dist = (x - d.x) ** 2 + (y - d.y) ** 2; if (dist < closestDist) { closest = d; closestDist = dist; } }); return closest; } function dragStart(e) { } function drag(e) { // Update the definition, and then update the group transform to match it. e.subject.x += e.dx; e.subject.y += e.dy; e.subject.el.attr('transform', `translate(${e.subject.x}, ${e.subject.y})`); // Move the associated pipes and histogram pointers. redrawPipes(exampleDefinition); redrawHistograms(exampleDefinition); } function dragEnd(e) { // Snap to grid. e.subject.x = Math.round(e.subject.x / config.grid) * config.grid; e.subject.y = Math.round(e.subject.y / config.grid) * config.grid; e.subject.el.attr('transform', `translate(${e.subject.x}, ${e.subject.y})`); redrawPipes(exampleDefinition); redrawHistograms(exampleDefinition); } function redrawPipes(simulationDefinition) { pipes.selectAll('path').remove(); simulationDefinition.pipes.forEach((definition) => { drawPipe(definition, simulationDefinition); }); } function redrawHistograms(simulationDefinition) { histograms.selectAll('*').remove(); simulationDefinition.histograms.forEach((definition) => { drawHistogram(definition, simulationDefinition); }); } function drawSimulation(simulationDefinition) { // Draw all of the pipes. redrawPipes(simulationDefinition); // Draw all of the histograms. redrawHistograms(simulationDefinition); // Draw all of the elements. simulationDefinition.elements.forEach((definition) => { switch(definition.type) { case 'stock': drawStock(definition, simulationDefinition); break; case 'flow': drawFlow(definition, simulationDefinition); break; case 'alarm': drawAlarm(definition, simulationDefinition); break; case 'bank': drawBank(definition, simulationDefinition); break; default: console.error('Invalid Element Definition:', definition); } }); } drawSimulation(exampleDefinition); return svg.node(); }39:T417,## Simulation Now we have a visualization, but parts of that visualization should be automatically derived from the user-defined simulation definition. Above, we hand-wrote an array of pipes, but we don't want to make the user provide this. Pipes can (and should) be derived from the references to stocks that a user makes in their flows. If a user calls `take()` on a stock, that stock can be considered an input. If they call `give()` it can be considered an output. We can use this same data to help solve an additional problem; concurrency. If, in the same step, one flow gives to an empty stock, and another flow takes from it, the success of the simulation depends on the order that each flow is processed. If the 'giving' flow is processed first, the stock will have some value in it when the 'taking' flow is processed. But if the taking flow goes first, it will find an empty stock. To help with this, we build a dependency tree and try to process from the "giving" side first. This won't solve every case, but it helps for simple ones.3a:T762,class Simulation { constructor() { this.definition = {}; this.elements = []; this._lastId = 1; } load(definition) { this.definition = definition; this.reset(); // Read in all of the definitions to create elements. this.elements = []; for (let i = 0; i < definition.elements.length; i++) { try { this.elements.push(this._processElementDefinition(definition.elements[i])); } catch (err) { console.warn('Skipping invalid element definition', err, definition); } } // Build a dependency Tree, and use that to determine the order that the flows will take steps this.steppable = []; } _processElementDefinition(definition) { // Accept an element definition and return an instantiated element. if (typeof definition == 'string') definition = JSON.parse(definition); switch (definition.type) { case 'stock': return new Stock(definition, this); break; case 'flow': return new Flow(definition, this); break; case 'alarm': //return new Alarm(definition, this); //break; case 'bank': //return new Bank(definition, this); //break; default: console.warn(`Unknown Element Type '${definition.type}':`, definition); throw new Error('Unknown Element type'); } } reset() { this.state = this.definition(); } step() { } getState() { } getElementById(id) { return this.elements.find((e) => { return e.id == id; }); } getUniqueId() { // Not efficient, but makes pretty IDs. while (typeof this.getElementById(this._lastId) != 'undefined') this._lastId += 1; return this._lastId; } determineOrder(elements) { // Take the list of all elements, and return an ordered list of stocks, alarms, and other steppable elements. } }3b:[] 2d:{"id":"e0563095c4ffdbb6","slug":"simple-stocks-and-flows","title":"Simple Stocks and Flows","thumbnail":"c92a952ec64331611b88199d37116af36e3f3c595501c3dd539f6f937bf95ec1","access_level":"public","create_time":"$D2021-04-09T02:26:11.113Z","update_time":"$D2026-04-09T02:33:14.452Z","view_time":null,"first_public_time":"$D2021-05-09T21:09:24.135Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3d7535b4ad979a57","login":"martin-pi","name":"Rick Martin","avatar_url":"https://avatars-next.observableusercontent.com/a13d596c4e162d5af1526a474e6cf6db62a235aec2094a699c2329df5200fa0c","tier":"starter_2024"},"version":1176,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"09a9ff3d030f86ac","login":"martin-pi","name":"Rick Martin","avatar_url":"https://avatars-next.observableusercontent.com/a13d596c4e162d5af1526a474e6cf6db62a235aec2094a699c2329df5200fa0c","tier":null}],"members":[{"type":"individual","id":"09a9ff3d030f86ac","login":"martin-pi","name":"Rick Martin","avatar_url":"https://avatars-next.observableusercontent.com/a13d596c4e162d5af1526a474e6cf6db62a235aec2094a699c2329df5200fa0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Simple Stocks and Flows","cells":[{"id":0,"value":"md`# Simple Stocks and Flows\nJust playing with the idea of visually representing dynamic systems, or stocks and flows. This is by no means a guide, but includes some helpful examples.\n\nEach stock is a variable, each flow a function. We will represent both using indicators, connected by pipes.\n\nTo keep things simple and understandable, indicators will be represented as simplified skeumorphic gauges and instruments. These are our primary elements, and we will use thick lines to make it clear to the user. There are also secondary elements, such as the connections between indicators, and supplemental information about each indicator. These should be accessible, but not emphasized.\n\nAccuracy is way more important than style. Indicators can be rounded, but way we represent data should not be. Every indicator should also be accompanied by a readout of the current value. When data changes, indicators should snap to the new value, without animation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"## Stocks\n\nShould display current value, as well as a line chart of that value. Maybe a prediction of that value's future?\nShould have incoming flows and outgoing flows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"viewof amount = Range([config.min_amount, config.max_amount], { value: (config.max_amount - config.min_amount) / 2 + config.min_amount, label: 'Citizens', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`\n## Flows\n\nShould accept a number of inputs from stocks, and be configurable. Should represent a \"rate\" of some kind.\n\nIdeally, flows would include a way to modify the function that defines the rate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof rate = Range([config.min_rate, config.max_rate], { value: (config.max_rate - config.min_rate) / 3 + config.min_rate, label: 'Flow Rate'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"## Alarms\nA user may want to set \"Watchers\" on their simulation in order to pause things when certain conditions are met. An Alarm represents one of these watchers, which will inspect the state of the simulation after each step, and can be configured to activate under certain conditions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":737,"value":"viewof alarms = Inputs.checkbox([\"Active\"], {label: \"Alarm State\", value: [true]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"## Sensors (TODO)\nSome data may not be calculated at runtime. A simulation may be need to respond to real world input. Sensors represent a set of existing data points that has been collected in the past. Essentially, an array of numbers. Each step in the simulation will read the next number from the array.\n\nEventually, a simulation may replace this read operation with a function to take a live measurement from some real sensor in order to run predictive simulations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"{\n const radius = 24;\n const thickness = 4;\n \n const svg = d3.create('svg').attr('viewBox', [-width/2, -50, width, 100]);\n \n \n svg.append('rect')\n .attr('x',-24)\n .attr('y', -18)\n .attr('rx', 8)\n .attr('width', 48)\n .attr('height', 36)\n .attr('fill', config.backdrop_color)\n .attr('stroke', config.frame_color)\n .attr('stroke-width', thickness)\n \n svg.append('path')\n .attr('d','M -15 -16 L -10 -10 L 10 -10 L 15 -16 ')\n .attr('stroke', config.frame_color)\n .attr('fill', config.focus_color)\n .attr('stroke-width', thickness)\n \n svg.append('circle')\n .attr('cx', -10)\n .attr('cy', 4)\n .attr('r', thickness)\n .attr('fill', config.frame_color)\n\n svg.append('circle')\n .attr('cx', 10)\n .attr('cy', 4)\n .attr('r', thickness)\n .attr('fill', config.frame_color)\n\n svg.append('text')\n .text('15 m/s')\n .attr('text-anchor', 'middle')\n .attr('dy', '1em')\n .attr('y', 20)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`\n## Connections\n\nRepresent connections between flows and stocks as pipes. Pipes are less important visually than the actual flows/stocks, and should have thinner lines or a lighter pallette.\n\nConnections are explored further in [*Draggable Pipe Connectors*](https://observablehq.com/@martin-pi/draggable-pipe-connectors).\n\nIncoming connections should connect to the top or left side of an indicator. Outgoing connections should connect to the right or bottom.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"## Configuration Banks (In Progress)\nSome variables aren't really meant to be stocks, more like constant configuration values. In these cases, we should create a Map that can be referenced by our flows.\n\nBanks are collections of key/value pairs, represented as a list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`\n## Sparklines / Histograms / TimeSeries\n\nIf a user wants more detail about either a stock or a flow, they will most likely want a history of that value. The default indicators will only show the current value, but some interaction should be able to reveal that history.\n\nIdeally, a sparkine should appear near the relevant indicator, with a line between the two elements.\n\nTime series/Sparklines have been pretty well explored at this point, we aren't doing anything new here.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"## Simulation State Schema\nEach simulation can be defined by 3 collections: **Elements**, **Histograms**, and **Pipes**. Simulations also need a name, and a basic unit of time. Each simulation step represents the passing of one time unit.\n\n```json\n{\n \"name\": \"My Simulation\",\n \"timeUnit\": \"Step\",\n \"elements\": [],\n \"histograms\": [],\n \"pipes\": []\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":819,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1115,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"class Element {\n // Defines a simulation element.\n constructor(definition, simulation) {\n // All elements will have an id, and may have a name and units.\n this.id = definition.id ?? simulation?.getUniqueId();\n this.name = definition.name ?? 'Element';\n this.units = definition.units ?? 'Units';\n }\n\n draw() {\n console.warn(`Classes which inherit from Element must override the draw() method.`)\n }\n\n step(state) {\n\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"class Stock extends Element {\n constructor(definition, simulation) {\n super(definition, simulation);\n this.value = definition.value;\n this.max = definition.max;\n this.min = definition.min;\n }\n\n take(amount) {\n \n }\n\n give(amount) {\n \n }\n\n read() {\n return this.value;\n }\n\n readAsPercent() {\n if (typeof this.min != 'number' || typeof this.max != 'number') {\n return undefined;\n }\n return (this.value - this.min) / (this.max - this.min);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"class Flow extends Element {\n constructor(definition, simulation) {\n super(definition, simulation);\n }\n\n step() {\n \n }\n\n getDependencies() {\n // Return all of the flows that this stock takes from.\n return [];\n }\n\n getDependents() {\n // Return all of the flows that this stock gives to.\n return [];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"config = {\n return {\n frame_color: '#2c2c2c',\n frame_secondary_color: '#888888',\n focus_color: '#ff6666',\n secondary_color: '#ff9999',\n backdrop_color: '#ffffff',\n thickness: 4,\n grid: 16,\n\n\n \n pipe_opacity: 1,\n min_rate: 20,\n max_rate: 100,\n min_amount: 0,\n max_amount: 1234\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 2e:"$2d:body"