How to get Semiotic plot to display in browser

Question

I am brand new to Semiotic (https://semiotic.nteract.io/), and I have what is likely an embarrassingly easy question. I am trying to make a line chart. How do I get the following Semiotic code - taken directly from https://semiotic.nteract.io/guides/line-chart - to display in my browser?

I have a Mac. What I have tried is to first install yarn and then do yarn add -E semiotic as the first link says. Next, I copied the below code directly into a text file, which I saved as a .js file. I then tried to load it in my web browser, but it just displays the code. What do I need to do differently?

Code:

import XYFrame from "semiotic/lib/XYFrame"
const theme = ["#ac58e5","#E0488B","#9fd0cb","#e0d33a","#7566ff","#533f82","#7a255d","#365350","#a19a11","#3f4482"]
const frameProps = {   lines: [{ title: "Ex Machina", coordinates: [{ week: 1, grossWeekly: 327616, theaterCount: 4, theaterAvg: 81904, date: "2015-04-10", rank: 18 },
        { week: 2, grossWeekly: 1150814, theaterCount: 39, theaterAvg: 29508, date: "2015-04-17", rank: 15 },
        { week: 3, grossWeekly: 7156570, theaterCount: 1255, theaterAvg: 5702, date: "2015-04-24", rank: 6 },
        { week: 4, grossWeekly: 3615000, theaterCount: 1279, theaterAvg: 2826, date: "2015-05-01", rank: 6 },
        { week: 5, grossWeekly: 5212462, theaterCount: 2004, theaterAvg: 2601, date: "2015-05-08", rank: 6 },
        { week: 6, grossWeekly: 3108609, theaterCount: 1718, theaterAvg: 1809, date: "2015-05-15", rank: 9 },
        { week: 7, grossWeekly: 2248258, theaterCount: 896, theaterAvg: 2509, date: "2015-05-22", rank: 12 },
        { week: 8, grossWeekly: 1122034, theaterCount: 506, theaterAvg: 2217, date: "2015-05-29", rank: 13 },
        { week: 9, grossWeekly: 551552, theaterCount: 302, theaterAvg: 1826, date: "2015-06-05", rank: 19 },
        { week: 10, grossWeekly: 316877, theaterCount: 194, theaterAvg: 1633, date: "2015-06-12", rank: 20 },
        { week: 11, grossWeekly: 201345, theaterCount: 124, theaterAvg: 1624, date: "2015-06-19", rank: 29 },
        { week: 12, grossWeekly: 153162, theaterCount: 81, theaterAvg: 1891, date: "2015-06-26", rank: 34 },
        { week: 13, grossWeekly: 102114, theaterCount: 61, theaterAvg: 1674, date: "2015-07-03", rank: 36 },
        { week: 14, grossWeekly: 64350, theaterCount: 39, theaterAvg: 1650, date: "2015-07-10", rank: 42 },
        { week: 15, grossWeekly: 45344, theaterCount: 31, theaterAvg: 1463, date: "2015-07-17", rank: 47 }] },
    { title: "Far from the Madding Crowd", coordinates: [{ week: 1, grossWeekly: 240160, theaterCount: 10, theaterAvg: 24016, date: "2015-05-01", rank: 24 },
        { week: 2, grossWeekly: 1090487, theaterCount: 99, theaterAvg: 11015, date: "2015-05-08", rank: 15 },
        { week: 3, grossWeekly: 1831958, theaterCount: 289, theaterAvg: 6339, date: "2015-05-15", rank: 10 },
        { week: 4, grossWeekly: 3779833, theaterCount: 865, theaterAvg: 4370, date: "2015-05-22", rank: 7 },
        { week: 5, grossWeekly: 2246233, theaterCount: 902, theaterAvg: 2490, date: "2015-05-29", rank: 9 },
        { week: 6, grossWeekly: 1129007, theaterCount: 610, theaterAvg: 1851, date: "2015-06-05", rank: 14 },
        { week: 7, grossWeekly: 701207, theaterCount: 366, theaterAvg: 1916, date: "2015-06-12", rank: 17 },
        { week: 8, grossWeekly: 430870, theaterCount: 256, theaterAvg: 1683, date: "2015-06-19", rank: 20 },
        { week: 9, grossWeekly: 270977, theaterCount: 122, theaterAvg: 2221, date: "2015-06-26", rank: 24 },
        { week: 10, grossWeekly: 195483, theaterCount: 105, theaterAvg: 1862, date: "2015-07-03", rank: 28 },
        { week: 11, grossWeekly: 138071, theaterCount: 98, theaterAvg: 1409, date: "2015-07-10", rank: 30 },
        { week: 12, grossWeekly: 86393, theaterCount: 74, theaterAvg: 1167, date: "2015-07-17", rank: 39 },
        { week: 13, grossWeekly: 52821, theaterCount: 47, theaterAvg: 1124, date: "2015-07-24", rank: 42 },
        { week: 14, grossWeekly: 25708, theaterCount: 27, theaterAvg: 952, date: "2015-07-31", rank: 58 },
        { week: 15, grossWeekly: 17292, theaterCount: 18, theaterAvg: 961, date: "2015-08-07", rank: 60 }] }],
  size: [700,400],
  margin: { left: 80, bottom: 90, right: 10, top: 40 },
  xAccessor: "week",
  yAccessor: "theaterCount",
  yExtent: [0],
  lineStyle: (d, i) => ({
    stroke: theme[i],
    strokeWidth: 2,
    fill: "none"
  }),
  title: (
    <text textAnchor="middle">
      Theaters showing <tspan fill={"#ac58e5"}>Ex Machina</tspan> vs{" "}
      <tspan fill={"#E0488B"}>Far from the Madding Crowd</tspan>
    </text>
  ),
  axes: [{ orient: "left", label: "Number of Theaters", tickFormat: function(e){return e/1e3+"k"} },
    { orient: "bottom", label: { name: "Weeks from Opening Day", locationDistance: 55 } }]
}

export default () => {
  return <XYFrame {...frameProps} />
}

Answer 1

Note: If you want to just see the end result, checkout this github repo. The project itself was made with the help of create-react-app to speed things along

When getting this to render myself, I changed a few things to get it working. The changes I made were to just make it easier for me to setup, and are not all necessary.

1. Put it in a file called XYFrameWrapper.jsx
2. Changed the end of the file to:

const XYFrameWrapper = () => {
  return <XYFrame {...frameProps} />
}
export default XYFrameWrapper;

Note: These 2 changes just make it easier to put this elsewhere

3. Added import React from 'react' to the start of the file (since it does use react)

Note: if you are adding this in your website, make sure to do the following steps in your App.jsx or equivalent.

Since you are using react, in your index.js (or in whatever file is the entry point for webpack), make sure to:

1. Import the component: import XYFrameWrapper from './XYFrameWrapper'
2. Render the component: ReactDOM.render(<XYFrameWrapper />, document.getElementById('root')); OR add it to the return statement in your App.jsx (or equivalent).

Once all of this is complete, you can start the server and see the output as expected.

About your issue: I think you issue was just opening the JS file in your browser, which will just display the code. If you have any other issues/questions, feel free to comment and I'll make sure to respond ASAP

End Result: