open source with R and JavaScript
html`
<div id="root"></div>
`
// this doesn't work unfortunately; see invalid module below
TileBackground = (props) => {
return (
React.createElement(React.Fragment, {}, [
React.createElement(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")
)
// couldn't get many of the vx modules to work so I did old school browserify standalone
// and made available through Github Pages
vx = require('https://timelyportfolio.github.io/vx/vx.min.js')
//Gradient = require("https://unpkg.com/@vx/gradient@0.0.165/dist/vx-gradient.umd.js")
GradientPinkRed = vx.GradientPinkRed
Scale = require('https://unpkg.com/@vx/scale@0.0.165/dist/vx-scale.umd.js')
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.
