bar chart example (semiotic)

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    
    <script src="https://unpkg.com/semiotic/dist/semiotic.min.js"></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="semiotic"></div>
    <script type="text/babel">
        const { OrdinalFrame } = Semiotic
        const fakeData = [ {id: "MM", total: 30 }, {id: "CFK", total: 29 }, {id: "RL", total: 15 } ]
        ReactDOM.render(<OrdinalFrame size={[300,300]} data={fakeData} oAccessor="id" rAccessor="total" type="bar" style={{ fill: "steelblue", stroke: "white"}} oPadding={10} oLabel={true} margin={{top: 10, left: 10, bottom: 30, right: 40}} axis={{orient: "right"}} />, document.getElementById('semiotic') )
    </script>
</body>
</html>

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

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

https://unpkg.com/semiotic/dist/semiotic.min.js

https://unpkg.com/@babel/standalone/babel.min.js