32:T65e,scatterplot = vegalite({ hconcat: [ { data: { values: data }, width: 400, height: 400, mark: "circle", encoding: { x: {field: "x", type: "quantitative"}, y: {field: "y", type: "quantitative"}, color: { condition: {"test": "sqrt(datum['x'] * datum['x'] + \ datum['y'] * datum['y']) <= 1", "value": IN_BLUE}, value: OUT_ORANGE } }, title: "In points and Out Points" }, { width: 400, height: 400, title: "Pi Estimation", layer: [ { data: { values: PI_ESTIMATES }, mark: { type: "circle", clip: true }, encoding: { x: {field: "x", type: "quantitative", axis: {title: "Number of Points"} }, y: {field: "y", type: "quantitative", scale : {domain: [2,4]} }, size: {value: 8} }, }, { data : { values: [{ threshhold: Math.PI } ] }, mark: "rule", encoding: { y: {field: "threshhold", type: "quantitative", axis: {title: "Estimated Pi Value"} } } }, { data : { values: [{ threshhold: Math.PI, threshholdLabel: "Real PI" } ] }, mark: { type: "text", align: "left", dx: 315, dy: -5 }, encoding: { y: { field: "threshhold", type: "quantitative", }, text: {field: "threshholdLabel", type: "ordinal"} } } ] }, ] })33:[] 30:{"title":"Monte Carlo Pi Approximation: Explorable Explanation in Vega Lite","cells":[{"id":0,"value":"md`# Monte Carlo Pi Approximation: Explorable Explanation in Vega Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`![chart_thumbnail](https://snag.gy/tzk4cO.jpg)\n_This is just a thumbnail, interactive is below_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`March 14th is Pi Day! \n\nTo celebrate this important number, Chris Holdgraf, one of the core contributors to the Jupyter [Binder](https://mybinder.org) project, made an [interactive applet in Python](https://twitter.com/choldgraf/status/973970619145637888) showing how to derive estimate Pi. It was inspired by Professor Brad Voytek's recent [tweet](https://twitter.com/bradleyvoytek/status/973335314746888192) (pictured below).\n\n[![brad_voytek_thumbnail](https://pbs.twimg.com/media/DYH7A0tU8AAW0K-.jpg)](https://twitter.com/bradleyvoytek/status/973335314746888192)\n\nIn this notebook, I'll implement this same [explorable explanation](http://worrydream.com/ExplorableExplanations/) in Javascript using [Vega-Lite](https://vega.github.io/vega-lite/), a grammar of graphics for the web. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`This approach uses the following formula, where \\`N_inner\\` is the number of points inside the unit circle, and \\`N_outer\\` is the number of points outside the unit circle. We randomly place points on the unit square, and color them if they lie within the unit circle centered at the origin \\`(0,0)\\`. [This site](http://mathfaculty.fullerton.edu/mathews/n2003/montecarlopimod.html) goes further into the mathematics of how the area of the unit circle relates to the area of the unit square, and how that leads to this formula.\n\nTo change the number of points used in your sample, move the slider below the scatterplot below. Blue points are in the circle, orange points are outside.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"tex.block` \\pi\\approx\\frac{4*N_{inner}}{N_{outer}} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`### Estimate with ${NUM_POINTS} Points\n- Guess : ${ESTIMATED_PI_VALUE}\n- Real : ${Math.PI}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"// I have limited the maximum number of points to 10000 to protect you from crashing your browser.\n// However, if you are feeling ambitious, feel free to raise the ceiling.\nviewof NUM_POINTS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`As the number of points increases, the accuracy of the approximation should improve, and the scatterplot on the left will look more and more like a quarter-circle.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`## Update\n\nA [more efficient version of this demo is available here](https://beta.observablehq.com/@hydrosquall/reactive-monte-carlo-pi-approximation-explorable-explana), using a new technique for using Vega-Lite's reactive features. Thanks to [Dominik Moritz](https://twitter.com/domoritz) for the suggestion!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`### Helper Functions\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"distance_from_origin_squared= function(x, y) {\n /* Given coordinates to a 2d point, return square of cartesian distance from origin (avoid sqrt) */\n return x * x + y * y\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"estimate_pi = function (data) {\n /* Give a list of uniformly random coordinate pairs between (0,1), \n useMonte Carlo Method to estimate Pi\n Args:\n data: A list of objects with two keys (x and y), 1 for each coordinate\n */\n\tconst reducer = (accumulator, currentValue) => {\n \tif (distance_from_origin_squared(currentValue['x'], currentValue['y']) < 1) {\n \treturn accumulator + 1; \n } else {\n \treturn accumulator; \n }\n }\n\tconst NUM_POINTS_IN_CIRCLE = data.reduce(reducer, 0)\n return 4 * NUM_POINTS_IN_CIRCLE / data.length\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"ESTIMATED_PI_VALUE = estimate_pi(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`### Data Generator Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"data = {\n \tlet values = []\n\tfor (var i = 0; i < NUM_POINTS; i++) {\n values.push({\n \tx: Math.random(),\n y: Math.random()\n })\n }\n \treturn values\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"PI_ESTIMATES = {\n \tlet estimates = []\n\tfor (let i = 2; i < NUM_POINTS; i++) { // skip first 2 points, not meaningful\n \testimates.push({\n \tx: i,\n \ty: estimate_pi(data.slice(0, i))\n })\n }\n return estimates\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`### Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"OUT_ORANGE = \"#ffa600\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"IN_BLUE = \"#003f5c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`## Further Reading\n\n- Compare this code to the [Python implementation](https://twitter.com/choldgraf/status/973970619145637888) \n- Dominik Moritz reimplemented this example on [bl.ocks.org](https://bl.ocks.org/domoritz/46c6f4c53ccd2a5b01e9e7faafa91854) with pure \\`Vega-Lite\\`, using some handy techniques such as generating the data from within the Vega Spec directly, as well as debouncing user input.\n- Chris recommends this [article](https://twitter.com/choldgraf/status/973341390066323456) showing how you can test this method by dropping grains of rice on a piece of paper.\n- Check out the other [Explorable Explanations](https://beta.observablehq.com/collection/explorables) on Observable\n\nQuestions? Feedback? I'd love to hear from you. I'm **@hydrosquall** on [Twitter]((https://twitter.com/hydrosquall) and [Github]((https://github.com/hydrosquall).\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}