31:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 29:null 2a:["$","title",null,{"children":"React, D3 and Mapbox GL in Observable | Erik Escoffier | Observable"}] 2f:T52a,StackedBars = component( ({species, region}) => { const data = useMemo(() => { console.log(stats) const rawData = stats[species][region] const rawDataByYear = [{ stable: rawData[2005], decolonized: 0, suitable: 0 }] .concat(TIME_STEPS.slice(1).map(year => ( { stable: rawData[year][1], decolonized: rawData[year][0], suitable: rawData[year][2] } ))) const stack = d3.stack().keys(['decolonized', 'stable', 'suitable']) const stacked = stack(rawDataByYear) const scale = d3.scaleLinear().domain([stacked[2][3][1], 0]).range([0, 100]) const stackedScale = stacked.map(k => k.map(v => [scale(v[0]), scale(v[1])])) return stackedScale }, [species, region]) return jsx` ` } )30:[{"id":"f802f5e5e605592028f8e800970bcdaefe9957a59cbee85573d209e68e30f00fa000750dd24c4c47827f92e55b72409c6b07bf090dd858d101e45ed5e7652b58","href":"https://static.observableusercontent.com/files/f802f5e5e605592028f8e800970bcdaefe9957a59cbee85573d209e68e30f00fa000750dd24c4c47827f92e55b72409c6b07bf090dd858d101e45ed5e7652b58","name":"stats.json","type":"application/json","lastModified":1677144095556.446,"size":760496}] 2d:{"id":"73ef1e6755204ccb","slug":null,"title":"React, D3 and Mapbox GL in Observable","thumbnail":"3b5082e9eaf8feb822035bbd5dcfc5354b09e4acf2a3287b417ac337e15d0692","access_level":"public","create_time":"$D2023-02-03T13:54:48.860Z","update_time":"$D2023-03-07T10:09:36.401Z","view_time":null,"first_public_time":"$D2023-02-03T13:54:48.860Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d78ef734124b1c67","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b383700baf15626b","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":null}],"members":[{"type":"individual","id":"b383700baf15626b","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"React, D3 and Mapbox GL in Observable","cells":[{"id":0,"value":"# React, D3 and Mapbox GL in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"Read this first: [React in Obervable](https://observablehq.com/@j-f1/react)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import { render, jsx, component, useState, useCallback, useMemo } from \"@j-f1/react\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"render(() => jsx`Hello, React!`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"## Read from Observable views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"render(({ getValue }) => {\n return jsx`

${timestep}

`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof timestep = Inputs.range([2005, 2095], {step: 30, value: 2095})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"## React components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"render(() => {\n return jsx`<${Timestep} title=\"Time step:\" />`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Timestep = component(\n ({ title }) => jsx`\n

\n ${title}${' '}\n ${timestep}\n
\n

\n `\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"## Writing to Observable views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"viewof text = render(({ useSetter }) => {\n const [value, setValue] = useState(\"Hello, Observable\")\n useSetter(value)\n return jsx` setValue(event.target.value), [setValue])}\n />`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"text","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"## D3 + React","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"render(() => {\n return jsx`<${StackedBars} species=\"Quercus_ilex\" region=\"ITA\" />`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"render(() => {\n return jsx`<${StackedBars} species=\"Quercus_ilex\" region=\"FRA\" />`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"stats = FileAttachment(\"stats.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"TIME_STEPS = [2005, 2035, 2065, 2095]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"CATEGORIES = ['decolonized', 'stable', 'suitable']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"COLORS = ['#c87474', '#89dc6a', '#cdf872']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 22:null 26:[["$","title","0",{"children":"React, D3 and Mapbox GL in Observable | Erik Escoffier | Observable"}],["$","meta","1",{"property":"og:title","content":"React, D3 and Mapbox GL in Observable"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Erik Escoffier"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/d/73ef1e6755204ccb"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/3b5082e9eaf8feb822035bbd5dcfc5354b09e4acf2a3287b417ac337e15d0692.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"React, D3 and Mapbox GL in Observable"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Erik Escoffier"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/3b5082e9eaf8feb822035bbd5dcfc5354b09e4acf2a3287b417ac337e15d0692.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L31","17",{}]]