Created visx and the Airbnb JS style guide
Public
Edited
Jul 13, 2023
1 fork
4 stars
viewof height = html`<input type=range min=0 max=1000 step=1 value=400>`
viewof numPoints = html`<input type=range min=20 max=1000 step=10 value=600>`
html`
<div id="root"></div>
`
TileBackground = (props) => {
return (
React.createElement(React.Fragment, {}, [
React.createElement(Gradient.GradientPinkRed, {
key: "gradient",
id: "pink-gradient"
}),
React.createElement("rect", {
key: 'rect',
...props
})
])
);
}
Dots = () => {
return (
React.createElement(React.Fragment, {}, points.map((point, i) => {
return (
React.createElement("circle", {
key: `dot-${i}`,
fill: '#f6c431',
cx: xScale(x(point)),
cy: yScale(y(point)),
r: i % 3 === 0 ? 3 : 2
})
);
}))
);
}
Chart = React.createElement("svg", { width, height }, [
React.createElement(TileBackground, {
key: 'bg',
fill: "url(#pink-gradient)",
width,
height,
rx: 14
}),
React.createElement(Dots, {
key: 'dots'
})
])
ReactDOM.render(
Chart,
document.getElementById("root")
)
Shape = import('https://cdn.skypack.dev/@visx/shape@3.3.0?min')
MockData = import('https://unpkg.com/@visx/mock-data@3.3.0/esm/index.js?module')
Gradient = import('https://cdn.skypack.dev/@visx/gradient@3.3.0?min')
Scale = import('https://cdn.skypack.dev/@visx/scale@3.3.0?min')
React = import('https://cdn.skypack.dev/react@18.2.0?min')
ReactDOM = import('https://cdn.skypack.dev/react-dom@18.2.0?min')
x = d => d[0]
y = d => d[1]
z = d => d[2]
points = MockData.genRandomNormalPoints(numPoints).filter((d, i) => {
return i < numPoints;
})
xScale = Scale.scaleLinear({
domain: [1.3, 2.2],
range: [0, width],
clamp: true
})
yScale = Scale.scaleLinear({
domain: [0.75, 1.6],
range: [height, 0],
clamp: true
})
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.
