block by aaizemberg 865989d881e6f9fab2190c00d2c0d55f

bar chart example (semiotic)

Full Screen

index.html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- react -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- react-dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- semiotic -->
    <script src="https://unpkg.com/semiotic/dist/semiotic.min.js"></script>
    <!-- babel -->
    <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>