2b:null 2c:["$","title",null,{"children":"Web 3.0 Explorable #1: Order Book | Paul Gadi | Observable"}] 31:Te64,am4core.ready(function() { // Themes begin // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.dataSource.url = "https://poloniex.com/public?command=returnOrderBook¤cyPair=BTC_ETH&depth=50"; chart.dataSource.reloadFrequency = 30000; chart.dataSource.adapter.add("parsedData", function(data) { // Function to process (sort and calculate cummulative volume) function processData(list, type, desc) { // Convert to data points for(var i = 0; i < list.length; i++) { list[i] = { value: Number(list[i][0]), volume: Number(list[i][1]), } } // Sort list just in case list.sort(function(a, b) { if (a.value > b.value) { return 1; } else if (a.value < b.value) { return -1; } else { return 0; } }); // Calculate cummulative volume if (desc) { for(var i = list.length - 1; i >= 0; i--) { if (i < (list.length - 1)) { list[i].totalvolume = list[i+1].totalvolume + list[i].volume; } else { list[i].totalvolume = list[i].volume; } var dp = {}; dp["value"] = list[i].value; dp[type + "volume"] = list[i].volume; dp[type + "totalvolume"] = list[i].totalvolume; res.unshift(dp); } } else { for(var i = 0; i < list.length; i++) { if (i > 0) { list[i].totalvolume = list[i-1].totalvolume + list[i].volume; } else { list[i].totalvolume = list[i].volume; } var dp = {}; dp["value"] = list[i].value; dp[type + "volume"] = list[i].volume; dp[type + "totalvolume"] = list[i].totalvolume; res.push(dp); } } } // Init var res = []; processData(data.bids, "bids", true); processData(data.asks, "asks", false); return res; }); // Set up precision for numbers chart.numberFormatter.numberFormat = "#,###.####"; // Create axes var xAxis = chart.xAxes.push(new am4charts.CategoryAxis()); xAxis.dataFields.category = "value"; //xAxis.renderer.grid.template.location = 0; xAxis.renderer.minGridDistance = 50; xAxis.title.text = "Price (BTC/ETH)"; var yAxis = chart.yAxes.push(new am4charts.ValueAxis()); yAxis.title.text = "Volume"; // Create series var series = chart.series.push(new am4charts.StepLineSeries()); series.dataFields.categoryX = "value"; series.dataFields.valueY = "bidstotalvolume"; series.strokeWidth = 2; series.stroke = am4core.color("#0f0"); series.fill = series.stroke; series.fillOpacity = 0.1; series.tooltipText = "Ask: [bold]{categoryX}[/]\nTotal volume: [bold]{valueY}[/]\nVolume: [bold]{bidsvolume}[/]" var series2 = chart.series.push(new am4charts.StepLineSeries()); series2.dataFields.categoryX = "value"; series2.dataFields.valueY = "askstotalvolume"; series2.strokeWidth = 2; series2.stroke = am4core.color("#f00"); series2.fill = series2.stroke; series2.fillOpacity = 0.1; series2.tooltipText = "Ask: [bold]{categoryX}[/]\nTotal volume: [bold]{valueY}[/]\nVolume: [bold]{asksvolume}[/]" var series3 = chart.series.push(new am4charts.ColumnSeries()); series3.dataFields.categoryX = "value"; series3.dataFields.valueY = "bidsvolume"; series3.strokeWidth = 0; series3.fill = am4core.color("#000"); series3.fillOpacity = 0.2; var series4 = chart.series.push(new am4charts.ColumnSeries()); series4.dataFields.categoryX = "value"; series4.dataFields.valueY = "asksvolume"; series4.strokeWidth = 0; series4.fill = am4core.color("#000"); series4.fillOpacity = 0.2; // Add cursor chart.cursor = new am4charts.XYCursor(); }); // end am4core.ready()32:[{"id":"252e300d62a779625f3859fafb97c208cd5b0506cb3ff0488489c64c8aa2ca5d10e743ff172fc4eb0943e99a1ea8b1598180fbbc20edd421fcabaa29a9adfffe","href":"https://static.observableusercontent.com/files/252e300d62a779625f3859fafb97c208cd5b0506cb3ff0488489c64c8aa2ca5d10e743ff172fc4eb0943e99a1ea8b1598180fbbc20edd421fcabaa29a9adfffe","name":"image.png","type":"image/png","lastModified":1601958783618.981,"size":307851},{"id":"9ed1b1249a0f55def8288a5ce3b155e3710dd1d60f7b0504ef1040d66282fe55e918af362a9b90cafbc282184e7eb55a137de7da5fdb159eec7a42c9c95be6c4","href":"https://static.observableusercontent.com/files/9ed1b1249a0f55def8288a5ce3b155e3710dd1d60f7b0504ef1040d66282fe55e918af362a9b90cafbc282184e7eb55a137de7da5fdb159eec7a42c9c95be6c4","name":"image@2.png","type":"image/png","lastModified":1601964484131.782,"size":93923}] 2f:{"id":"2131cb4946f7afe1","slug":"web-3-0-explorable-1-order-book","title":"Web 3.0 Explorable #1: Order Book","thumbnail":"4827cf78a43b5556c69861e64b46f215d28bdb364b5caa507a3ecb31cc365b67","access_level":"public","create_time":"$D2020-10-06T04:15:30.409Z","update_time":"$D2020-10-21T02:30:32.859Z","view_time":null,"first_public_time":"$D2020-10-06T04:17:00.566Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7bb89c023e182f40","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":"starter_2024"},"version":151,"publish_version":151,"role":null,"authored":false,"authors":[{"type":"individual","id":"23e2d36ccff51073","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":null}],"members":[{"type":"individual","id":"23e2d36ccff51073","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"bd38bf8846cbb1f2","slug":"web-3-0-explorables","title":"Web 3.0 Explorables","owner":{"id":"7bb89c023e182f40","login":"polats","name":"Paul Gadi"}},"type":"notebook","body":{"title":"Web 3.0 Explorable #1: Order Book","cells":[{"id":17,"value":"md`# Web 3.0 Explorable #1: Order Book\n\nThere are a lot of concepts in Web 3.0 such as Non-fungible Tokens (NFTs) and Decentralized Finance (DeFi) that may be new to game developers, and there’s no better way to become more familiar with them than through play 🎮\n\nOur first explorable will be something familiar to players and game developers on Steam, especially if they used the [Steam Community Market](https://steamcommunity.com/market). This is the Order Book.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`

The chart at the bottom is the order book for the Zagreus Trading Card in exchange for Steam Wallet Dollars. Let’s call them ZTC and $ respectively.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`\nThe **Order Book** is simply a record of buy and sell requests for one asset in exchange for another. The **blue** area shows the number of **buy** orders for ZTC, while the **green** area shows the number of **sell** orders for ZTC. The X axis shows the amount of $ that the buyers / sellers are willing to trade them for.\n\nIn Web 3.0, you’ll usually see the Order Book in places where you can trade one token for another. An example is [MakerDAO’s Oasis app](https://oasis.app/trade/market/WETH/DAI), where you can exchange Ethereum for their stablecoin DAI (pegged at 1 DAI = 1 USD). It’s the one called the Depth Chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`\nBelow is an interactive Order Book for live BTC/ETH trading on Poloniex, using [amcharts.com](https://www.amcharts.com/demos/live-order-book-depth-chart/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`\n----\nOne thing to note with an Order Book is that a trade won't happen unless a buyer is matched with a seller. On our [Explorable # 2 - Liquidity Pools](https://observablehq.com/@polats/web-3-0-explorable-2-liquidity-pools) we find a way to address this.\n\nWeb 3.0 has made it easier than ever for game developers to integrate an Order Book functionality within their games. If you'd like to find out more please check out:\n### [Game3.js, our Web 3.0 Javascript Game Framework](https://github.com/alto-io/game3.js)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`
\n\n--- \n\n## Appendix\n\nThe code below powers the order book example above. Source code from: [amcharts.com](https://www.amcharts.com/demos/live-order-book-depth-chart/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"am4core = importjs(\"https://www.amcharts.com/lib/4/core.js\",\"window.am4core\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"am4charts = {\n await am4core;\n return await importjs(\"https://www.amcharts.com/lib/4/charts.js\",\"window.am4charts\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"am4themes_animated = {\n await am4charts;\n return await importjs(\"https://www.amcharts.com/lib/4/themes/animated.js\",\"window.am4themes_animated\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {importjs} from \"@chomtana/import-external-library\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"