32:T692,// Extract the spec into is own thing scatterplotSpec = vl.compile({ hconcat: [ { data: { 'name': 'points' }, 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: { name : '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"} } } ] }, ] }).spec33:[] 30:{"title":"REACTIVE Monte Carlo Pi Approximation: Explorable Explanation in Vega Lite","cells":[{"id":0,"value":"md`# REACTIVE Monte Carlo Pi Approximation: Explorable Explanation in Vega Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`## A more efficient implementation of my [previous demo](https://beta.observablehq.com/@hydrosquall/monte-carlo-pi-approximation-explorable-explanation-in-ve)`","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":358,"value":"{\n // View the non-reactive version of this code here: \n // https://beta.observablehq.com/@hydrosquall/monte-carlo-pi-approximation-explorable-explanation-in-ve\n var div = document.createElement(\"div\");\n view.initialize(div).run();\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof refresh = html``","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. If the approximation is very far off, try clicking the \\`refresh\\` cell to get new random points. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`## Making this Demo Reactive`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`The following functions are based on the official [Reactive Vega-Lite Bar Chart](https://beta.observablehq.com/@domoritz/reactive-vega-lite) and [Streaming Example]([streaming data](https://beta.observablehq.com/@domoritz/vega-lite-demo-with-streaming-data) example), as suggested by [Dominik Moritz](https://beta.observablehq.com/@domoritz) on the [Vega Slack](https://communityinviter.com/apps/vega-js/join) channel.\n\nUnlike the approach in my [old notebook](https://beta.observablehq.com/@hydrosquall/monte-carlo-pi-approximation-explorable-explanation-in-ve), this approach avoids rerunning Vega and Vega-Lite every time the data changes, leading to greater efficiency. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`First, we pull out the spec from before, except we replace the \\`values\\` keys under data with \\`name\\` keys.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`Next, we'll create some Changesets that update whenever the data changes. We need two, since we're displaying both the points and the Pi estimates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"removeAll = () => true","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"makeChangeset = function(newPoints, removePredicate) {\n /* Depends on the \"vega\" existing in global namespace */\n return vega.changeset()\n .remove(removePredicate)\n .insert(newPoints) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"changePoints = {\n const cutoff = NUM_POINTS - STEP_SIZE;\n return makeChangeset(points, // points.slice(cutoff) doesn't work b/c of initial render needed\n removeAll)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"changeEstimates = makeChangeset(piEstimates, removeAll)","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"view = new vega.View(vega.parse(scatterplotSpec))","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`Lastly, we'll apply the changesets to the \\`view\\` using the dataset names we specified in the first step. This way we can update the chart without recompiling the spec every time the data changes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"{ // One changeset per dataset, the calls can be chained since points and estimates always change together.\n view.change('points', changePoints)\n .change('estimates', changeEstimates).run()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"md`Everything below is the same as in the original notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`### Pi Approximation 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 cartesian distance from origin \n \n */\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(points)","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`### Data Generator Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"allPiEstimates = {\n \tlet estimates = []\n\tfor (let i = 5; i < NUM_POINTS; i++) { // skip first 5 points, tend to be erratic\n \testimates.push({\n \tx: i,\n \ty: estimate_pi(points.slice(0, i))\n })\n }\n return estimates\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"piEstimates = allPiEstimates.slice(0, NUM_POINTS - 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"allPoints = {\n refresh // Let Observable know to rerun this cell when refresh is clicked\n \tlet values = []\n\t for (var i = 0; i < MAX_POINTS; i++) {\n values.push({\n \tx: Math.random(),\n y: Math.random(),\n pid: i\n })\n }\n \treturn values\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"points = allPoints.slice(0, NUM_POINTS)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`

\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"//vegalite = require(\"@observablehq/vega-lite@0.1\")\nvega = require('vega@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"vl = require(\"vega-lite@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`### Constants`","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":478,"value":"MAX_POINTS = 9000","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"STEP_SIZE = 100","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"}