31:T988,md`I am truly amazed by the possibilities given by Observables for scientific research. If you don't know what an Observable is, well, you are looking at one! Observables are notebooks that can be used to prototype visualisation ideas, algorithms, and (as this example shows) even mathematical programming models. In a way, they are very similar to [Jupyter Notebooks](https://jupyter.org/). Apart from the programming language used (Observables use JavaScript instead of Python), there are two main differences: First, users do not need to install any software in order to edit and run an Observable. You can just send a link to supervisors, students, reviewers, fellow researchers, as well as your parents, and they can have a look at your notebook and play around with it! Even using their phones and tablets! Second, the cells in an Observable notebook are reactive. You already know that concept from spreadsheets: If you change a value in one cell, **all cells that depend on the value of that specific cell** will change accordingly. This is a truly amazing feature: If you'd like to explore a larger dataset, and make changes to a set of functions drawing data from it, you don't need to re-run your notebook (and re-download the dataset!) for your changes to take effect. This notebook will explore some of the possibilities when combining a mathematical programming model (specifically a linear programming model) with the reactive Observable approach. If you are new to Observables (and possibly JavaScript), I highly recommend having a look at the excellent [introductory Observable by Jeremy Ashkenas](https://observablehq.com/@observablehq/a-taste-of-observable), which is a great introduction to data science as well! Observables are not only interactive, but also collaborative. If anything in this notebook seems unclear (or even wrong), you can leave a comment [right at the given cell](https://observablehq.com/@observablehq/suggestions-and-comments)! You can even make a suggestion for a change (just like Words track changes function). Keep in mind that you can toggle the source code of any cell by clicking in the space to the left of it 👈 Alright, let's have a look at our optimization story. For this demonstration, we will use a slight variation of the classic transport cost minimization example as outlined by [Dantzig (1963)](https://www.rand.org/content/dam/rand/pubs/reports/2007/R366part1.pdf). `32:T6d1,md`Imagine the following scenario: A pharma company selling *Hydroxychloroquin* operates two factories, one in Seattle, the other one in San Diego. The factories can produce **350**, and **600** packages (cases) of the medication per day, respectively. The company operates three distribution warehouses around the country, in New York, Chicago, and Los Angeles. In the past, the warehouses could sell **325** (New York), **300** (Chicago), and **275** (Los Angeles) cases on an average day. The company now would like to determine the number of cases to be shipped from the two factories to the different warehouses so that each warehouse should obtain as many cases as it can sell daily at the minimum transportation costs. > *There's a catch though.* Says the representative of the company that instructed you with the job. > *We had a similar issue figured out decades ago. However, for some reason there seems to be a quite some volatility in the Hydroxychloroquin market recently. Management would like to be able to adjust the demand, supply, and shipping costs values easily, and fiugre out what's best themselves. Think of something like a dashboard with nice visualisations! Oh, and our IT security policy does not allow installing any software or running Excel macros. Hope that's not an issue? One last remark: We're not intereseted in a black box solution. We would like to know what the model looks like, so please document it well.* Well, that calls for creating an Observable! Let's start by defining our demand and supply values. As we (and *management*) would like to alter the values at a later stage, we declare both variables as \`mutable\`. That means, their values can be changed by other cells as well. `33:T8ef,{ const minWidth = width < 400 ? width : 600; const height = width < 400 ? width : 400; let c = DOM.canvas(minWidth, height); new Chart(c.getContext("2d"), { type: 'bar', data: { labels: ["Seattle", "San-Diego", "New-York", "Chicago", "Los-Angeles"], datasets: [ { label: "Supply capacity of plants (cases)", backgroundColor: "#6E7D96", data: [mutable supply.Seattle, mutable supply['San-Diego']] }, { label: "Demand of markets (cases)", backgroundColor: "#D2695C", data: [ 0, 0, mutable demand['New-York'], mutable demand.Chicago, mutable demand['Los-Angeles'] ] } ] }, options: { responsive: false, dragData: true, dragDataRound: -1, dragOptions: { showTooltip: true }, onDragEnd: (e, datasetIndex, index, value) => { e.target.style.cursor = 'default'; if (datasetIndex === 0) { // the supply data was changed! if (index === 0) { mutable supply = { ...mutable supply, Seattle: value }; } else { mutable supply = { ...mutable supply, 'San-Diego': value }; } } else { // the demand data was changed! if (index === 2) { mutable demand = { ...mutable demand, 'New-York': value }; } else if (index === 3) { mutable demand = { ...mutable demand, Chicago: value }; } else { mutable demand = { ...mutable demand, 'Los-Angeles': value }; } } }, hover: { onHover: function(e) { const point = this.getElementAtEvent(e); if (point.length) e.target.style.cursor = 'grab'; else e.target.style.cursor = 'default'; } }, scales: { xAxes: [ { stacked: true, barPercentage: 1, categoryPercentage: 0.8, barThickness: 'flex' } ], yAxes: [ { stacked: true, ticks: { max: 800, min: 0 } } ] } } }); return c; }34:T431,md`Alright, let's define our variables and equations: As we are interested in the *optimal* amount of cases shipped between our factories and warehouses, we define that shipping amount as ${tex`x(i,j)`}. The total transport costs, which we would like to keep at a minimum, are called ${tex`z`} We can calculate our total transport costs by multiplying the transport costs per case with the distance between the respective factory and warehouse. ${tex.block` z = \sum_{i,j} c(i,j) \cdot x(i,j) `} We also need to state that for each factory, the shipping cannot exceed the actual supply capacties ${tex.block` \sum_{j} x(i,j) ≤ a(i) `} Similarly, the demand at our warehouses must be met ${tex.block` \sum_{i} x(i,j) ≥ b(i) `} Note that we need to define that our variable ${tex`x(i,j)`} is a positive variable, that means we cannot ship negative amounts of cases in order to save shipping money 😏 ${tex.block` \sum_{i,j} x(i,j) ≥ 0 `} Our last todo for the model is to state that we would like to minimize our variable ${tex`z`}, and we're ready to go! `35:T620,md`Now that we finished writing our model, we can solve it using the free [NEOS optimization server](https://neos-server.org/neos/) using the [neos-js](https://github.com/fruchtfolge/neos-js) package. We start off by defining the optimization model category (LP in our case), the solver we would like to use, the model input language (GAMS) and eventually the model itself. Some solvers (like CPLEX) will also require an e-mail address to be send along. \`\`\`js listing = NEOS.xmlstring({ category: 'MILP', // Actually our model is LP, but NEOS // solely provides a GAMS interface to Cbc for MILP probles. // Luckily, MILP solvers can solve LP problems, too :) solver: 'Cbc', // COIN-OR Branch and Cut (Cbc) is a free, open source solver. // When providing an E-Mail, we may also use CPLEX or GUROBI for acacademic, // non-commercial research purposes inputMethod: 'GAMS', model: model }) .then(NEOS.submitJob) .then(NEOS.getFinalResults) .then(gams) \`\`\` With this code, the job is then send to NEOS, where it may be put in a solving queue. We then wait for the solving process to finish, and subsequentyl retreive the GAMS output file (called listing file). Eventually, we use [gams2js](https://github.com/chrispahm/gams2js) for parsing the listing file, converting it into a format readable by JavaScript, and making it's contents available in the \`listing\` variable. The current status of the model will be shown in the box below: `36:T47b,viewof listing = { const div = html`

`; div.style.backgroundColor = "rgb(218, 91, 72)"; div.style.color = "white"; div.style.height = "50px"; div.style.lineHeight = "50px"; div.style.paddingLeft = "10px"; NEOS.xmlstring({ category: "MILP", solver: "Cbc", email: "test@test.org", inputMethod: "GAMS", model: model }) .then((xml) => { div.innerHTML = "Sending job to NEOS..."; return NEOS.submitJob(xml); }) .then((jobDetails) => { div.innerHTML = "Waiting for NEOS results..."; div.style.backgroundColor = "rgb(231, 196, 92)"; return NEOS.getFinalResults(jobDetails); }) .then((listing) => { div.innerHTML = "Model results up-to-date! See the results of the model below."; // using the gams function, we parse the listing file into a JS readable format console.log(listing); div.value = gams(listing); // the following let's the Observable now that the value changed! div.dispatchEvent(new CustomEvent("input")); div.style.backgroundColor = "rgb(116, 161, 126)"; }); return div; }37:T639,md`Once our GAMS job has finished running on the NEOS server, we can start checking the results. Our \`listing\` variable (see above) now contains all of the information stored in the GAMS output file (called listing). The \`listing\` variable has two properties: \`solves\` and \`get\`. The \`solves\` property contains an array of all our solve statements, and the related objective, variable and equation values. Let's see a mockup of how the data is structured: \`\`\`js listing = { solves: [{ // solves is an array of objects. For each solve report in the listing, there will be a solve object "objective": ${listing.solves[0].objective}, // the final objective value for this solve "line": 45, // the line no. of the solve statement in our corresponding GAMS model "modelStatus": 1, // the model status as reported by GAMS "equations": [{ // equations is an array of equations "marginal": 1, // the values of the marginal, "level": 0, // solution level, "upper": 0, // upper "lower": 0, // and lower bounds of the equation "domain": [], // the set labels for this data row "name": "cost", // the GAMS identifier "description": "define objective function" // the explanatory text as defined in our GAMS model },{ // ... } ], "variables: [{ // same contents as in the equations }] ] } \`\`\` With this structure in mind, we can start exploring our results. Our example model is rather simple, and only contains a single solve statement. We can check this by running the following code:`38:Te42,viewof map = { const container = html`

`; yield container; // Give the container dimensions. // we define the longitude/latitude coordinates of our factories/warehouses const coordinates = { "New-York": [-73.935242, 40.730610, 40.73061], Seattle: [-122.335167, 47.608013], Chicago: [-87.554420, 41.739685], "San-Diego": [-117.130775, 32.834686], "Los-Angeles": [-118.243683, 34.052235] }; const map = (container.value = new mapboxgl.Map({ container, center: [-95.6650, 37.6000], zoom: 3, style: "mapbox://styles/toffi/ckc9aa8vh402c1kpum87gpxtu", scrollZoom: true })); map.on("load", () => { map.fitBounds([-133.242188, 24.046464, -66.357422, 50.569283]); const features = listing .get('x') .filter(row => row.level) .map(row => { // our function returns a valid GeoJSON LineString feature // starting at a factory and ending at a warehouse return { type: "Feature", geometry: { type: "LineString", coordinates: [ coordinates[row.domain[0]], // the first position of the domain array is the factory location coordinates[row.domain[1]] // the second position of the domain array is the warehouse location ] }, properties: { title: `Shipment of ${row.level} cases` } }; }); Object.keys(coordinates).forEach(city => { // create a HTML element for each feature const el = html`

`; // as there are more warehouses than factories, we start declaring // the type of building (warehouse | factory) let type = 'Warehouse'; // marker background image el.className = 'warehouseMarker marker'; // capacity of the warehouse for all cities let capacity = demand[city]; // if they are one of the factory cities, we overwrite the data if (city === 'Seattle' || city === 'San-Diego') { el.className = 'factoryMarker marker'; type = 'Factory'; capacity = supply[city]; } // then we create a marker for each feature and add it to the map new mapboxgl.Marker(el) .setLngLat(coordinates[city]) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( `

${city}

${type} location, capacity of ${capacity} cases

` ) ) .addTo(map); }); features.forEach((feature, i) => { // for each feature (aka line between a warehouse and a factory), we // add a dotted line map.addLayer({ id: "route_" + i, type: "line", source: { type: "geojson", data: feature }, layout: { "line-join": "round", "line-cap": "round" }, paint: { 'line-color': 'grey', 'line-width': 2, 'line-dasharray': [10, 10] } }); map.addLayer({ // as well as the text highlighting the amount of cases shipped in the optimal solution id: "symbols_" + i, type: "symbol", source: { type: "geojson", data: feature }, layout: { "symbol-placement": "line-center", "text-font": ["Open Sans Regular"], "text-field": '{title}', "text-size": 12, "text-rotate": 0, "symbol-spacing": 1 }, paint: { "text-translate": [0, -20] } }); }); }); invalidation.then(() => map.remove()); }39:Tde8,html``3a:[] 2f:{"title":"Operations research in Observables","cells":[{"id":0,"value":"md`# Operations research in Observables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`### A beautfiul way to create *optimization* data stories using reactive programming`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`## The task`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"mutable supply = ({ \n 'Seattle': 350, \n 'San-Diego': 600\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"mutable demand = ({ \n 'New-York': 325, \n 'Chicago': 300,\n 'Los-Angeles': 275\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`From our data, we can create a bar chart highlighting the demand and supply values. We use [Chart.js](https://www.chartjs.org/) in combination with the [dragdata plugin](https://github.com/chrispahm/chartjs-plugin-dragdata) in order to allow for a bar chart where the values displayed in the chart can be customized. \nTry for yourself, and observe how the values in our \\`mutable\\` variables (demand and supply) change accordingly!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`*The following chart is interactive. Click and drag the bars to change the supply/demand values accordingly.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`As the freight costs were also asked to be adjustable, we create a simple interactive range slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof freightCosts = slider({\n min: 0, \n max: 200, \n step: 1, \n value: 90, \n title: \"Freight costs\", \n description: \"Dollars per case per thousand miles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"md`And for our input elements, that's all there is to it! 😊`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`## The model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`Now that we have all required input elements ready, we can start writing our optimization model. \nFor the modeling language, this example uses GAMS. GAMS is a programming language aimed at simplifying the transition from real world optimization problems into computer code. Let's start writing it:\n\nAs stated earlier, we have factories (${tex`i`}) in Seattle and San Diego, as well as warehouses (${tex`j`}) in New York, Chicago and Los Angeles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"viewof sets = Editor({\n language: 'gams',\n value: `Sets\n i canning plants / Seattle, San-Diego /\n j markets / New-York, Chicago, Los-Angeles / ;\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"md`We'll call our supply and demand values, which we defined in the chart above, ${tex`a(i)`} and ${tex`b(j)`}, respectively. Observe how changing the values in the chart is directly reflected in our model!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"viewof supplyDemand = Editor({\n language: 'gams',\n value: `Parameters\n a(i) capacity of plant i in cases\n / Seattle ${supply.Seattle}\n San-Diego ${supply['San-Diego']} /\n b(j) demand at market j in cases\n / New-York ${demand['New-York']}\n Chicago ${demand.Chicago}\n Los-Angeles ${demand['Los-Angeles']} / ;\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`With known distances between the different factories (which we got from Google Maps), we can define a parameter ${tex`d(i,j)`}. In GAMS, two dimensional parameters can be written as tables, so we'll make use of that`","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"viewof distances = Editor({\n language: 'gams',\n value: `Table d(i,j) distance in thousands of miles\n New-York Chicago Los-Angeles\n Seattle 2.5 1.7 1.1\n San-Diego 2.5 1.8 0.1 ;\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`We pull current the freight costs from our range slider, and update the tranport costs (in thousands of dollars per case) accordingly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"viewof costs = Editor({\n language: 'gams',\n value: `Scalar f freight in dollars per case per thousand miles / ${freightCosts} / ;\nParameter\n c(i,j) transport cost in thousands of dollars per case ;\nc(i,j) = f * d(i,j) / 1000 ;\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"viewof equations = Editor({\n language: 'gams',\n value: `Variables\n x(i,j) shipment quantities in cases\n z total transportation costs in thousands of dollars ;\nPositive variables x ;\nEquations\n cost define objective function\n supply(i) observe supply limit at plant i\n demand(j) satisfy demand at market j ;\ncost .. z =e= sum((i,j), c(i,j)*x(i,j)) ;\nsupply(i) .. sum(j, x(i,j)) =l= a(i) ;\ndemand(j) .. sum(i, x(i,j)) =g= b(j) ;\nModel transport /all/ ;\nSolve transport using LP minimizing z ;`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`The important final step is to concatenate all parts of our model into a single one:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"model = sets + supplyDemand + distances + costs + equations","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Analyzing model results`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"listing.solves.length // this will output the number of solves found in our listing file","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`So far, so easy! Now the objective of our model was to minimize the total transportation costs of our company. We can retrieve that value from the GAMS solution in the following way:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"objective = listing.solves[0].objective // we get the objective value of the 0th position in the solves array","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`Considering the freight costs of $${freightCosts} per thousand miles, total production capacities of ${supply[\"San-Diego\"] + supply.Seattle} cases and an estimated demand of ${demand.Chicago + demand[\"New-York\"] + demand[\"Los-Angeles\"]} cases, we come to the conclusion that`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`### The minimal shipping costs for our company are found to be $${(objective * 1000).toLocaleString()}.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"md`The other property of the \\`listing\\` variable is called \\`get\\`, which is a method for retreiving results (variables and equations) from the listing file. \n\nThe \\`get\\` method allows us to create a table outlining the number of *Hydroxychloroquin* cases shipped from the factories to the warehouses of the company in the optimal solution.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"table(\n listing\n .get('x')\n .filter(r => r.level) // only show elements that have a value -> non-zero elements\n .map(row => {\n return {\n 'No. of cases': md`**${row.level}**`,\n Route: md`**${row.domain.join(' to ')}**`\n };\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"md`### A good visualisation says more than a thousand tables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`For a more visual approach for presenting our results, we could think of a map showing the locations of our factories and warehouses. \nThe optimal transport flows (as number of cases to be shipped) could be presented on a line joining them.\nWe can create a beautiful map, including the markers (for the factory and warehouse locations) and joining lines, using [Mapbox GL JS](https://www.mapbox.com/). \n\nYou can check how the map is created by toggling the source code (clicking in the grey area to the left of the map). At first sight, it might look like a lot of code! But worry not, a lot of it is just the definition of the map's style. Don't be afraid to change any of it, and see how it affects the styling of the map 🌈\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"md`## Task completed!\n\nI hope you enjoyed reading this notebook as much as I did creating it 😊 \nWriting Observables sure is a lot of fun, and if this piece got you a little interested in the matter (be it either Observables, operations research, data science, or all of them) I am more than happy. \n\nWhat do you think about it? Are you excited about giving operations research in notebooks a try? Or have you even already done it? Leave a comment and let others know about *your* operations research data story! 📝`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`## Technical appendix: The magic behind this notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`Not all of the features used in this notebook are part of the standard Observable features. Just like in R (or any other language), we can extend it by loading additional packages, or defining our own functions. The following section will walk you through the packages that have been loaded to make this notebook possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`[neos-js](https://github.com/fruchtfolge/neos-js), a JavaScript client for the [NEOS optimization server](https://neos-server.org/neos/), solves the GAMS model written in this notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"NEOS = require('neos-js@0.1.2/dist/neos.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`[gams2js](https://github.com/chrispahm/gams2js) parses the GAMS output file and makes it accesible in our notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"gams = require('gams2js@0.0.2/dist/gams2js.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`Chart.js is used for the interactive chart in this Observable. In order to allow for dragging the data points, we also load the chartjs-plugin-dragdata plugin. This is a little tricky, as the plugin requires the \\`Chart\\` variable to be available. The following code snippet demonstrates on how to load the two bundles correctly in an Observable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"Chart = {\n const Chart = (window.Chart = await require(\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js\"));\n await require(\"https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@1.1.3/dist/chartjs-plugin-dragdata.min.js\").catch(\n () => {}\n );\n\n return Chart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`[Mapbox GL JS](https://www.mapbox.com/) is used for displaying the map of our factories and warehouses`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2\");\n if (!gl.accessToken) {\n // token allowed only this Observable\n gl.accessToken =\n \"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw\";\n const href = await require.resolve(\"mapbox-gl@2/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`The table and slider functions are helpers that allow for a simple writeup of the range slider (used for the freight costs input range) and table results representation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"import {table} from '@tmcw/tables/2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"import {Editor} from '@cmudig/editor'","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"md`Finally, we define some CSS styles for the markers used in our map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"concious_analytics(html``.href)","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"import { concious_analytics } from \"ff90685a875a43ac\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}