Published
Edited
Feb 29, 2020
HelloWorld = (props) => {
return e("p", null, `Hello World`)
}
render(HelloWorld)
render(() => e("svg", null, e(ScatterPlot, { data }, null)))
Point = component((props) => {
const [hover, setHover] = useState(false);
return e('g', {},
e('circle', {
r: props.radius,
fill: (hover) ? "green" : "blue",
onMouseOver: () => {
setHover(true)
},
onMouseOut: () => {
setHover(false)
}
}, null)
);
})
Positioner = component((props) => {
const groups = props.data.map((d) => {
return e('g', { transform: `translate(${d * 25}, ${d * 25})`, key: d },
e(props.pointRenderer, { radius: d * 6 })
)
})
return e('g', null, groups)
})
ScatterPlot = component((props) => {
return e(Positioner, {
data: props.data,
pointRenderer: Point
}, null)
})
data = [1, 2, 3]
e = React.createElement;
import { React, useState, render, component } from '@j-f1/react-16'
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.
