open source with R and JavaScript
{
const width = 400
const height = 300
const points = vx.genRandomNormalPoints(600).filter((d, i) => {
return i < 600;
});
const x = d => d[0];
const y = d => d[1];
const z = d => d[2];
const xMax = width;
const yMax = height - 60;
if (width < 10) return null;
const xScale = vx.scaleLinear({
domain: [1.3, 2.2],
range: [0, xMax],
clamp: true
});
const yScale = vx.scaleLinear({
domain: [0.75, 1.6],
range: [yMax, 0],
clamp: true
});
let tooltipTimeout;
// use class instead of function for illustration purposes
class chart extends React.Component {
constructor(props) {
super(props);
}
render() {
let tootipTimeout
const { width, height } = this.props;
const xMax = width;
const yMax = height - 50;
if (width < 10) return null;
const xScale = vx.scaleLinear({
domain: [1.3, 2.2],
range: [0, xMax],
clamp: true
});
const yScale = vx.scaleLinear({
domain: [0.75, 1.6],
range: [yMax, 0],
clamp: true
});
return React.createElement(
"div",
null,
React.createElement(
"svg",
{ width: width, height: height },
React.createElement(vx.GradientPinkRed, { id: "pink" }),
React.createElement("rect", {
x: 0,
y: 0,
width: width,
height: height,
rx: 14,
fill: `url(#pink)`
}),
React.createElement(
vx.Group,
{
onTouchStart: () => event => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
this.props.hideTooltip();
}
},
points.map((point, i) => {
return React.createElement(vx.GlyphCircle, {
className: "dot",
key: `point-${point.x}-${i}`,
fill: '#f6c431',
left: xScale(x(point)),
top: yScale(y(point)),
size: i % 3 === 0 ? 12 : 24,
onMouseEnter: () => event => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
this.props.showTooltip({
tooltipLeft: xScale(x(point)),
tooltipTop: yScale(y(point)) + 20,
tooltipData: point
});
},
onTouchStart: () => event => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
this.props.showTooltip({
tooltipLeft: xScale(x(point)),
tooltipTop: yScale(y(point)) - 30,
tooltipData: point
});
},
onMouseLeave: () => event => {
tooltipTimeout = setTimeout(() => {
this.props.hideTooltip();
}, 300);
}
});
})
)
),
this.props.tooltipOpen && React.createElement(
vx.Tooltip,
{ left: this.props.tooltipLeft, top: this.props.tooltipTop },
React.createElement(
"div",
null,
React.createElement(
"strong",
null,
"x:"
),
" ",
this.props.tooltipData[0]
),
React.createElement(
"div",
null,
React.createElement(
"strong",
null,
"y:"
),
" ",
this.props.tooltipData[1]
)
)
)
}
}
ReactDOM.render(
React.createElement(vx.withTooltip(chart), {width: width, height: height}),
document.getElementById("chart")
)
}
// forked vx repo and used browserify standalone on vx-vx to make something we can use
// I know this is old school but at least it works
vx = require("https://timelyportfolio.github.io/vx/vx.min.js")
// using https://beta.observablehq.com/@tmcw/semiotic-in-observable
r = require.alias({
"react": "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js"
})
React = r('react')
ReactDOM = r('react-dom')
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.
