A test to see if Semiotic can work in bl.ocks.org.
Copied verbatim from the example found in Semiotic Pull Request: Add and configure rollup.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/@babel/standalone@7.0.0-beta.32/babel.min.js"></script>
<script src="https://unpkg.com/react@16.1.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.1.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/semiotic@1.2.7/dist/semiotic.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script type="text/babel">
const movies = [
{
title: "The Fate of the Furious",
studio: "Uni.",
firstWeek: "2017-15",
maxRank: 1,
maxGross: 225764765,
coordinates: [
{week: 1,grossWeekly: 124896220,theaterCount: 4310,theaterAvg: 28978,date: "2017-04-14",rank: 1},
{week: 2,grossWeekly: 48435355,theaterCount: 4329,theaterAvg: 11189,date: "2017-04-21",rank: 1},
{week: 3,grossWeekly: 25275955,theaterCount: 4077,theaterAvg: 6200,date: "2017-04-28",rank: 1},
{week: 4,grossWeekly: 11126400,theaterCount: 3595,theaterAvg: 3095,date: "2017-05-05",rank: 2},
{week: 5,grossWeekly: 6976370,theaterCount: 3067,theaterAvg: 2275,date: "2017-05-12",rank: 4},
{week: 6,grossWeekly: 4340570,theaterCount: 2287,theaterAvg: 1898,date: "2017-05-19",rank: 8},
{week: 7,grossWeekly: 2267065,theaterCount: 1358,theaterAvg: 1669,date: "2017-05-26",rank: 11},
{week: 8,grossWeekly: 746930,theaterCount: 593,theaterAvg: 1260,date: "2017-06-02",rank: 15},
{week: 9,grossWeekly: 661010,theaterCount: 389,theaterAvg: 1699,date: "2017-06-09",rank: 16},
{week: 10,grossWeekly: 327005,theaterCount: 175,theaterAvg: 1869,date: "2017-06-16",rank: 24},
{week: 11,grossWeekly: 237990,theaterCount: 159,theaterAvg: 1497,date: "2017-06-23",rank: 26},
{week: 12,grossWeekly: 296470,theaterCount: 144,theaterAvg: 2059,date: "2017-06-30",rank: 23},
{week: 13,grossWeekly: 177425,theaterCount: 115,theaterAvg: 1543,date: "2017-07-07",rank: 25}
],
type: "landslide"
},
{
title: "Straight Outta Compton",
studio: "Uni.",
firstWeek: "2015-33",
maxRank: 1,
maxGross: 161058685,
coordinates: [
{week: 1,grossWeekly: 84723470,theaterCount: 2757,theaterAvg: 30730,date: "2015-08-14",rank: 1},
{week: 2,grossWeekly: 36162705,theaterCount: 3025,theaterAvg: 11955,date: "2015-08-21",rank: 1},
{week: 3,grossWeekly: 18049530,theaterCount: 3142,theaterAvg: 5745,date: "2015-08-28",rank: 1},
{week: 4,grossWeekly: 12686895,theaterCount: 3094,theaterAvg: 4100,date: "2015-09-04",rank: 3},
{week: 5,grossWeekly: 5328660,theaterCount: 2812,theaterAvg: 1895,date: "2015-09-11",rank: 6},
{week: 6,grossWeekly: 2596870,theaterCount: 1938,theaterAvg: 1340,date: "2015-09-18",rank: 9},
{week: 7,grossWeekly: 880290,theaterCount: 609,theaterAvg: 1445,date: "2015-09-25",rank: 16},
{week: 8,grossWeekly: 338540,theaterCount: 281,theaterAvg: 1205,date: "2015-10-02",rank: 22},
{week: 9,grossWeekly: 191170,theaterCount: 170,theaterAvg: 1125,date: "2015-10-09",rank: 31},
{week: 10,grossWeekly: 100555,theaterCount: 113,theaterAvg: 890,date: "2015-10-16",rank: 38}
],
type: "landslide"
}
];
const container = document.body.appendChild(document.createElement('div'));
ReactDOM.render(<Semiotic.XYFrame
title={"Two Movies"}
size={[700, 400]}
lines={movies}
xAccessor={"week"}
yAccessor={"grossWeekly"}
lineStyle={{ stroke: "#00a2ce" }}
margin={{ left: 80, bottom: 50, right: 10, top: 40 }}
axes={[
{
orient: "left"
},
{
orient: "bottom"
}
]}
/>, container);
</script>
</body>