2b:null 2c:["$","title",null,{"children":"Web 3.0 Explorable #2: Liquidity Pools | Paul Gadi | Observable"}] 31:T53a,svg``32:T97b,chart = { const w = width const h = 400 const padding = 30 const xDomain = 200 const yDomain = 200 const pointNum = 200 let svg = d3.select(DOM.svg(w, h)) let xScale = d3.scaleLinear([0, xDomain], [padding, w - padding]) let yScale = d3.scaleLinear([yDomain, 0], [padding, h - padding]) // Clip path let clipPath = svg.append('clipPath') .attr('id', 'chart-area') .append('rect') .attr('x', padding) .attr('y', padding) .attr('width', w - 2 * padding) .attr('height', h - 2 * padding) let xTemp, yTemp // Generate points let dataset = [] for (let i = 0; i <= pointNum; i++) { xTemp = 1 + i // xDomain / pointNum * i yTemp = k / xTemp // k / xTemp // k / xTemp // m * xTemp ** n dataset.push([xTemp, yTemp]) } let line = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])) svg.append('path') .datum(dataset) .attr("clip-path", "url(#chart-area)") .attr('fill', 'none') .attr('stroke', '#663399') .attr('stroke-width', 2) .attr('d', line) let xAxis = d3.axisBottom(xScale) let yAxis = d3.axisLeft(yScale) svg.append('g') .attr('transform', `translate(0,${h-padding})`) .call(xAxis) svg.append('g') .attr('transform', `translate(${padding},0)`) .call(yAxis) svg.append('text') .attr('x', w - padding + 20) .attr('y', h - padding + 10) .attr('text-anchor', 'end') .text('$') svg.append('text') .attr('x', padding + 10) .attr('y', 15) .attr('text-anchor', 'end') .text('ZTC') // x line svg.append("svg:line") .attr("x1", padding) .attr("x2", xScale(xDomain)) .attr("y1", yScale(k / price_x)) .attr("y2", yScale(k / price_x)) .style("stroke", "rgb(50, 50, 189)") .style("stroke-dasharray", ("6,3")); // y line svg.append("svg:line") .attr("x1", xScale(price_x)) .attr("x2", xScale(price_x)) .attr("y1", h - padding) .attr("y2", yScale(yDomain)) .style("stroke", "rgb(50, 50, 189)") .style("stroke-dasharray", ("6,3")); // current price svg.append("circle") .attr("cx", xScale(price_x)) .attr("cy", yScale(k / price_x)) .attr("r", 4) .style("stroke", "#663399") .style("fill", "#50FF70"); svg.append('text') .attr('x', xScale(x)) .attr('y', yScale(y) - 10) .text('$ / ZTC: ' + dollars_per_ztc.toFixed(2)) return svg.node() }33:[] 2f:{"id":"66373f76f873522b","slug":"web-3-0-explorable-2-liquidity-pools","title":"Web 3.0 Explorable #2: Liquidity Pools","thumbnail":"e71b2eb7385393f35539f8d3a703d82dd88a4979bc8bf4f6d509dbc2fdef38ac","access_level":"public","create_time":"$D2020-10-19T14:59:47.122Z","update_time":"$D2020-10-20T07:49:40.289Z","view_time":null,"first_public_time":"$D2020-10-20T07:49:58.272Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7bb89c023e182f40","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":"starter_2024"},"version":374,"publish_version":374,"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 #2: Liquidity Pools","cells":[{"id":0,"value":"md`# Web 3.0 Explorable #2: Liquidity Pools\n\nOn [Explorable # 1](https://observablehq.com/@polats/web-3-0-explorable-1-order-book) we discussed *Order Books*, a record of buy and sell requests for one asset in exchange for another.\n\nWe used the *Zagreus Trading Card (ZTC)* and *$* as the assets for our *Order Book*, based on the Steam Community Market example.\n\nThere’s one important thing to note when we use an Order Book system for handling trades: **A trade won’t happen unless a buyer is matched with a seller.**\n\n In Web 3.0, Automated Market Makers like Uniswap solve this issue by using **Liquidity Pools**.\n\nA **Liquidity Pool** is simply a pool of two kinds of assets. It can be drawn from so that traders can instantly convert their asset to the other, without needing a specific buyer or seller to trade with. The conversion rate is determined by an algorithm which the market maker wants to use.\n\nFor this observable we’ll use the algorithm used by Uniswap, which is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`#### Token1Supply * Token2Supply = CONSTANT`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`We've illustrated the pool below, along with a graph showing the pricing curve that corresponds to the algorithm. \n\nWe can use the sliders to see how the price of $ / ZTC changes as we adjust the variables.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof x = {\n const form = html``;\n form.i.oninput = () => {\n form.value = form.i.valueAsNumber;\n form.o.value = form.i.valueAsNumber.toFixed(2);\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof y = {\n const form = html``;\n form.i.oninput = () => {\n form.value = form.i.valueAsNumber;\n form.o.value = form.i.valueAsNumber;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof k = {\n const form = html``;\n form.i.oninput = () => {\n form.value = form.i.valueAsNumber;\n form.o.value = form.i.valueAsNumber;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`\n----\nWeb 3.0 has made it easier than ever for game developers to integrate Liquidity Pools 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":17,"value":"md`
\n\n--- \n\n## Appendix\n\nThe code and libraries below power the explorables above. \n\n#### References:\n\n* [Circular Segment by @mbostock](https://observablehq.com/@mbostock/circular-segment)\n* [Aavegotchi Bonding Curve by @cinnabarhorse](https://observablehq.com/@cinnabarhorse/aavegotchi-bonding-curve)\n* [haseebq.com/what-explains-the-rise-of-amms](https://haseebq.com/what-explains-the-rise-of-amms/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"dollars_per_ztc = {\n return k/ (x * y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"price_x = Math.sqrt(k) * dollars_per_ztc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"// h is the area of the liquidity pool circle\nh = {\n let h = y / (x + y);\n if (h > 0 && h < 1) {\n let t0, t1 = Math.pow(12 * h * Math.PI, 1 / 3);\n for (let i = 0; i < 10; ++i) {\n t0 = t1;\n t1 = (Math.sin(t0) - t0 * Math.cos(t0) + 2 * h * Math.PI) / (1 - Math.cos(t0));\n }\n h = (1 - Math.cos(t1 / 2)) / 2;\n }\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"