Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created May 14, 2019 20:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/865989d881e6f9fab2190c00d2c0d55f to your computer and use it in GitHub Desktop.
Save aaizemberg/865989d881e6f9fab2190c00d2c0d55f to your computer and use it in GitHub Desktop.
Download ZIP
bar chart example (semiotic)
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment