I like maps
Public
Edited
Mar 7, 2023
import { render, jsx, component, useState, useCallback, useMemo } from "@j-f1/react"
render(() => jsx`<strong>Hello, React!</strong>`)
render(({ getValue }) => {
return jsx`<p>${timestep}</p>`
})
viewof timestep = Inputs.range([2005, 2095], {step: 30, value: 2095})
render(() => {
return jsx`<${Timestep} title="Time step:" />`
})
Timestep = component(
({ title }) => jsx`
<p>
<strong>${title}</strong>${' '}
${timestep}
<br />
</p>
`
)
viewof text = render(({ useSetter }) => {
const [value, setValue] = useState("Hello, Observable")
useSetter(value)
return jsx`<input
type="text"
placeholder="Enter some text..."
value=${value}
onChange=${useCallback(event => setValue(event.target.value), [setValue])}
/>`
})
render(() => {
return jsx`<${StackedBars} species="Quercus_ilex" region="ITA" />`
})
render(() => {
return jsx`<${StackedBars} species="Quercus_ilex" region="FRA" />`
})
stats = FileAttachment("stats.json").json()
TIME_STEPS = [2005, 2035, 2065, 2095]
CATEGORIES = ['decolonized', 'stable', 'suitable']
COLORS = ['#c87474', '#89dc6a', '#cdf872']
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
