Published
Edited
Jun 12, 2018
1 fork
10 stars
Insert cell
Insert cell
{
let elem = html`<div></div>`;
ReactDOM.render(React.createElement(semiotic.XYFrame, {
title: "Two Movies",
size: [width, 400],
lines: movies,
xAccessor: "week",
yAccessor: "grossWeekly",
lineStyle: { stroke: "#00a2ce" },
margin: { left: 80, bottom: 50, right: 10, top: 40 },
axes: [
{
orient: "left"
},
{
orient: "bottom"
}
],
hoverAnnotation: true,
customHoverBehavior: d => console.info("custom hover d", d),
customClickBehavior: d => console.info("click on d", d),
customDoubleClickBehavior: d =>
console.info("customDoubleClickBehavior d", d)
}), elem);
return elem;
}
Insert cell
Insert cell
r = require.alias({
"react": "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js",
"semiotic": "semiotic@1"
})
Insert cell
ReactDOM = r('react-dom')
Insert cell
React = r('react')
Insert cell
semiotic = r('semiotic')
Insert cell
Insert cell
Insert cell

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.
Learn more