34:["$","title",null,{"children":"URBAN DEVELOPMENT DYNAMICS MATRIX | Caroline Cullinan | Observable"}] 3c:Tfcc,

PLANNING

PROCESS

QUESTIONS

→

	STOCKS	FLOWS
	( CURRENT STATE) - WHERE WE ARE -	( CHANGE DYNAMICS) - WHERE WE ARE GOING -
CHALLENGE	POPULATION, ABSOLUTE	POPULATION, GROWTH PERCENTAGE
RESPONSE	UBA, ABSOLUTE	UBA, GROWTH PERCENTAGE
OUTCOME	DENSITY	POPULATION-URBAN GROWTH RATIO

↓

SYSTEMS

QUESTIONS

3d:T2d4a,// function that plots the Urban Development Dynamics Matrix (i.e., uddm): // pga (absolute population growth), // pgp (population growth percentage), // ubaa (absolute urban extent and change), // ubap (urban extent and change growth percentage) // d (density), // pug (population urban growth ratio) // , i.e. all 6 charts as small multiples in a 3x2 grid function plot_uddm(pg, uba, pug, { cityName = "City", width = plotWidth, // total width of the entire grid color = "black" } = {}) { // calculate individual chart dimensions const chartWidth = (width - 60) / 2; // subtract padding, divide by 2 columns const chartHeight = chartWidth * 0.6; // maintain aspect ratio const marginLeft = Math.max(30, chartWidth * 0.06); const marginRight = Math.max(10, chartWidth * 0.02); const marginBottom = Math.max(40, chartWidth * 0.08); const marginTop = Math.max(40, chartWidth * 0.08); // row 1: "challenge" charts [i.e., pga (absolute population growth) + pgp (population growth percentage)] const chart1_pga = Plot.plot({ title: `Population Growth, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Population", domain: [0, Math.max(...pg.map(d => d.population)) * 1.1], //dynamic with padding //1.5 invece di 1.1 (1.1, come plot_ubaa for consistency) tickFormat: d => { if (d === 0) return "0"; if (d >= 1000000) return `${(d/1000000).toFixed(d % 1000000 === 0 ? 0 : 1)}M`; if (d >= 1000) return `${(d/1000).toFixed(0)}K`; return d; }, grid: true, }, x: { label: "Year", tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pg, { x: "yearName", y: "population", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "population", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nPopulation: ${d.population.toLocaleString()}`, tip: true }) ] }); const chart2_pgp = Plot.plot({ title: `Population Growth Percentage, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Population Growth Percentage", domain: [0, Math.max(...pg.map(d => d.populationGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", tickFormat: "d", //ticks: 6 ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pg, { x: "yearName", y: "populationGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "populationGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.populationGrowthPercentage !== null ? d.populationGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); // row 2: "response" charts [i.e., ubaa (absolute urban extent and change) + ubap (urban extent and change growth percentage)] const chart3_ubaa = Plot.plot({ title: `Urban Built-up Area, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Urban built-up area (sq km)", domain: [0, Math.max(...uba.map(d => d.uba)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", domain: [1, uba.length], // dynamic based on data length tickFormat: d => d3.format("d")(uba[d-1].yearName), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(uba, { x: "year", y: "uba", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "year", y: "uba", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nUrban built-up area (sq km): ${d.uba.toLocaleString()}`, tip: true }) ] }); const chart4_ubap = Plot.plot({ title: `Urban Built-up area Growth Percentage, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Urban Built-up area Growth Percentage", domain: [0, Math.max(...uba.map(d => d.ubaGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(uba, { x: "yearName", y: "ubaGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "yearName", y: "ubaGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.ubaGrowthPercentage !== null ? d.ubaGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); // row 3: "outcome" charts [i.e., d (density) + pug (population-urban growth ratio)] const chart5_d = Plot.plot({ title: `Density, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Density (people / sq km)", domain: [0, Math.max(...pug.map(d => d.density)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, x: { label: "Year", domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pug, { x: "yearName", y: "density", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "yearName", y: "density", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nDensity: ${d.density.toFixed(0)}`, tip: true }) ] }); const chart6_pug = Plot.plot({ title: `Pop-Urban Growth Ratio, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, x: { label: null, domain: [0, 2], // dynamic based on data length ticks: 2, grid: true }, y: { label: "Year", domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(4, Math.min(10, Math.floor(width / 60))), // dynamic ticks based on width - gives 5-15 ticks based on available plotWidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(pug, { x: "populationUrbanGrowthRatio", y: "yearName", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "populationUrbanGrowthRatio", y: "yearName", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nUrban-Growth Ratio: ${d.populationUrbanGrowthRatio !== null ? d.populationUrbanGrowthRatio.toFixed(2) : 'N/A'}`, tip: true }), // vertical dashed lines Plot.ruleX([1], { stroke: "gray", strokeWidth: 1, strokeDasharray: "5,5" }), Plot.ruleX([0.5], { stroke: null, }), Plot.ruleX([1.5], { stroke: null, }), // annotations Plot.text(["Balanced"], { x: 1, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }), Plot.text(["Potential Sprawl\n(Housing Surplus)"], { x: 0.5, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }), Plot.text(["Potential Densification\n(Housing Shortage)"], { x: 1.5, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }) ] }); // create container div with alternative, small multiple css grid layout const container = html`

Urban Development Dynamics

${cityName}

${chart1_pga}

${chart2_pgp}

${chart3_ubaa}

${chart4_ubap}

${chart5_d}

${chart6_pug}

`; return container; }3e:T4ce,html``3f:[{"id":"b294a7a270b2edfb9f4b568571a0acc5a28056bf97eef6067d9279899c1261fc73a343fd510f823de0969caa2aac0e16460340207e45a6f2640fdf162bbdb09d","href":"https://static.observableusercontent.com/files/b294a7a270b2edfb9f4b568571a0acc5a28056bf97eef6067d9279899c1261fc73a343fd510f823de0969caa2aac0e16460340207e45a6f2640fdf162bbdb09d","name":"pg.csv","type":"text/csv","lastModified":1750417905564.946,"size":460},{"id":"64bff48c7a129373a73753e2716f9261f9a145fc1a6a422db9647435259d7fdc28f52f31f03ddae94f0bec4e264f9c0d2e6451936e07e8d0c03c6bb63e9b4bdb","href":"https://static.observableusercontent.com/files/64bff48c7a129373a73753e2716f9261f9a145fc1a6a422db9647435259d7fdc28f52f31f03ddae94f0bec4e264f9c0d2e6451936e07e8d0c03c6bb63e9b4bdb","name":"uba.csv","type":"text/csv","lastModified":1750417915995.1,"size":673},{"id":"13d7f4616ac8cf0f0f544c39cd0444ba40905cc42faf500937f174f3d11c6306607a309e2136ab47c2086ac541da52a48c457f09046eaf649a6e3b97df17ee11","href":"https://static.observableusercontent.com/files/13d7f4616ac8cf0f0f544c39cd0444ba40905cc42faf500937f174f3d11c6306607a309e2136ab47c2086ac541da52a48c457f09046eaf649a6e3b97df17ee11","name":"pug.csv","type":"text/csv","lastModified":1750417920490.194,"size":898}] 38:{"id":"4afe6f4fafdd15f4","slug":"urban-development-dynamics-matrix","title":"URBAN DEVELOPMENT DYNAMICS MATRIX","thumbnail":"7b75e7d0cad65c035687e6e3b61a6f3c7ca670d8b59e0bf333bc808e4f578e4c","access_level":"public","create_time":"$D2025-06-20T10:57:39.158Z","update_time":"$D2025-10-10T10:14:38.547Z","view_time":null,"first_public_time":"$D2025-06-20T14:04:18.470Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b783a0f584d21589","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/8b89c23b31cfac4c9e38782347b8515d60849281a99fcc3ec016646c0f466bae","tier":"starter_2024","bio":"Participatory Systems | Community-Driven Development","followed_by_you":false,"follows_you":false},"version":603,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"role":"editor"},{"type":"team","id":"b783a0f584d21589","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/8b89c23b31cfac4c9e38782347b8515d60849281a99fcc3ec016646c0f466bae","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"URBAN DEVELOPMENT DYNAMICS MATRIX","cells":[{"id":0,"value":"

URBAN DEVELOPMENT DYNAMICS MATRIX

A SYTEMS DYNAMICS + URBAN PLANNING approach to understanding the relationship between demographics and built form

\nInterpretation:
\nRead *across* each row to understand the **CHALLENGE**, **RESPONSE**, AND **OUTCOME** OF THE **PLANNING PROCESS STORY**. Read *down* each row to understand the **CURRENT SYSTEM STATE** vs **CHANGE DYNAMICS** of the **SYSTEM STORY**\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":592,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"## 2.0 MATRIX VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"// use plot_uddm function to create the uddm small multiples charts\nchart_uddm = plot_uddm(pg, uba, pug, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"## 3.0 GUIDING MATRIX QUESTIONS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"### ROWS \n- CHALLENGE ASSESSMENT\n - Question: *How large is the population and how fast is it changing?*\n - Answer: *There are [X] people growing at [Y]% annually, indicating [low/moderate/high] demographic pressure.*\n \n- RESPONSE EVALUATION\n - Question: *How much urban space exists and how fast is it expanding?*\n - Answer: *There is [X] km² expanding at [Y]% annually, indicating [rapid/moderate/slow] spatial development.*\n \n- OUTCOME ASSESSMENT\n - Question: *What is the urban development outcome?*\n - Answer: *There are [X] people per km² with a growth ratio of [Y], indicating [efficient/sprawling] development creating a [compact/dispersed] urban form.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"### COLUMNS\n- CURRENT STATE ASSESSMENT\n - Question: *What is the current urban condition?*\n - Answer: *The current urban condition is a city of [X] people across [Y] km² at [Z] density, indicating a [large/small], [compact/sprawling] urban system.*\n \n- CHANGE DYNAMICS ASSESSMENT\n - Question: *What is the development momentum?*\n - Answer: *The development momentum is a population growing at [X]% annually, with urban area expanding at [Y]% annually, with a growth ratio of [Z], indicating [balanced/sprawling/densifying] development momentum.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"### Literature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"* Jay Forester (MIT, 1950s)\n* Peter Allen (\"Cities and Regions as Self-Organizing Systems (1997)\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Import Modules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"import {Plot} from \"@observablehq/plot\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"// load pg, population growth csv file\npg = FileAttachment(\"pg.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// load uba csv file\nuba = FileAttachment(\"uba.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// load population urban growth, pug csv file\npug = FileAttachment(\"pug.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"### Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"#### Import Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"SansSerifFontParse = \"Oswald:wght@200;300;400;500;600;700\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"SansSerifFont = \"Oswald\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"SerifFont = \"Roboto Slab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"parseFont = SansSerifFont.split(\" \").join(\"+\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// load google fonts\nfontLoader = html`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"style = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"#### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"// plotWidth variable to calculate responsive offset\nplotWidth = width * 0.95 // make width 95% of container/viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null