Semiotic Test

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.

<!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>

https://unpkg.com/@babel/standalone@7.0.0-beta.32/babel.min.js

https://unpkg.com/react@16.1.1/umd/react.production.min.js

https://unpkg.com/react-dom@16.1.1/umd/react-dom.production.min.js

https://unpkg.com/semiotic@1.2.7/dist/semiotic.js