34:["$","title",null,{"children":"Visualizing ML training using TensorFlow.js and Baseball data | Nick Kreeger | Observable"}] 3c:T50d,batches = { const batches = []; let index = 0; let batchSize = CONSTANTS.BATCH_SIZE; while (index < data.length) { if (data.length - index < CONSTANTS.BATCH_SIZE) { batchSize = data.length - index; } const dataBatch = data.slice(index, index + batchSize); const shape = [dataBatch.length, CONSTANTS.NUM_X_FIELDS]; const xData = new Float32Array(tf.util.sizeFromShape(shape)); const yData = []; let offset = 0; for (let i = 0; i < dataBatch.length; i++) { const xyData = dataBatch[i]; const x = []; x.push(normalize(xyData.x[0], CONSTANTS.PX_MIN, CONSTANTS.PX_MAX)); x.push(normalize(xyData.x[1], CONSTANTS.PZ_MIN, CONSTANTS.PZ_MAX)); x.push(normalize(xyData.x[2], CONSTANTS.SZ_TOP_MIN, CONSTANTS.SZ_TOP_MAX)); x.push(normalize(xyData.x[3], CONSTANTS.SZ_BOT_MIN, CONSTANTS.SZ_BOT_MAX)); x.push(xyData.x[4]); xData.set(x, offset); offset += CONSTANTS.NUM_X_FIELDS; if (xyData.y !== undefined) { yData.push(xyData.y); } } // Push batch tensor: batches.push({ x: tf.tensor2d(xData, shape), y: yData.length > 0 ? tf.oneHot(tf.tensor1d(yData, 'int32'), 2).toFloat() : null }); index += batchSize; } return batches; }3d:[] 38:{"id":"a84ec15fddeb4224","slug":"visualizing-ml-training-using-tensorflow-js-and-baseball-d","title":"Visualizing ML training using TensorFlow.js and Baseball data","thumbnail":"f01614d36e5ae7b28be5fb94db0bd1914824a39476c03bd93c52c9285a2201e9","access_level":"public","create_time":"$D2018-05-16T16:21:07.482Z","update_time":"$D2018-07-12T19:40:41.154Z","view_time":null,"first_public_time":"$D2018-06-09T00:16:59.112Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"ecc829432be96acb","login":"nkreeger","name":"Nick Kreeger","avatar_url":"https://avatars-next.observableusercontent.com/b96d98201d1dcec335e388202a8b06c3891657f99d333b84977e1f3fbd15929d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1008,"publish_version":1008,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b995eba12819f3a","login":"nkreeger","name":"Nick Kreeger","avatar_url":"https://avatars-next.observableusercontent.com/b96d98201d1dcec335e388202a8b06c3891657f99d333b84977e1f3fbd15929d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3b995eba12819f3a","login":"nkreeger","name":"Nick Kreeger","avatar_url":"https://avatars-next.observableusercontent.com/b96d98201d1dcec335e388202a8b06c3891657f99d333b84977e1f3fbd15929d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing ML training using TensorFlow.js and Baseball data","cells":[{"id":0,"value":"md`\n# Visualizing ML training using TensorFlow.js and Baseball data\n\nThe heatmap below illustrates a deep-neural network learning to call a strike zone. Blue dots represent balls and orange dots represent strikes from the training data. The blue areas of the heat map represents areas the model classifies as a ball. Orange areas are classified as a strike.\n\n*If you’re not familiar with the strike zone in baseball here’s an [article](https://en.wikipedia.org/wiki/Strike_zone) with details.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":" html`\n

\nBatter Stance: \n
\nNumber of epochs: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"md`\n- *Select left or right-handed batter stance in the drop down to see biases in strike zone*\n- *Adjust the slider to add more training epochs*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"mutable totalEpochs = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"mutable epoch = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"mutable step = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"mutable loss = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"mutable accuracy = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md`\n## Advanced metrics in sports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`\nToday's professional sports environment is packed with large amounts data. This data is being applied to all sorts of use cases by teams, hobbyists, and fans. Thanks to frameworks like [TensorFlow.js](https://js.tensorflow.org/) - these datasets are ready to be applied to machine learning. \n\n### MLBAM's PITCHf/x\n\nMajor League Baseball Advanced Media (MLBAM) publishes a [large dataset](https://en.wikipedia.org/wiki/PITCHf/x) available for research to the public. This dataset contains sensor information about pitches thrown in MLB games for the last several years. Using this dataset, I've curated a [training set](https://gist.github.com/nkreeger/43edc6e6daecc2cb02a2dd3293a08f29) containing 5,000 samples (2,500 balls and 2,500 strikes).\n\nHere is a sample of the first few fields from the training data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"html`\n

\npx,pz,sz_top,sz_bot,left_handed_batter,is_strike\n0.53911291447047,2.58721257326413,3.621919456338947,1.6849794648356244,1,1\n0.185253995350261,1.5635593603608,3.7237799447316,1.8320068318667317,0,1\n0.803388018408266,2.26077819347672,3.6227808116418068,1.6855622410347877,0,1\n0.93011705400413,2.41483140448302,3.6523741032464905,1.777227990061938,1,1\n0.627323597921344,2.40464482128051,3.5789796232592153,1.707844742390911,0,1\n0.27398840848321,3.39084709206671,3.5627386518120403,1.641478162459645,1,1\n0.63449599239141,1.98240225645648,3.5317091900453974,1.693213715035089,1,1\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`\n## Building the model with TensorFlow.js\n\n[TensorFlow.js](https://js.tensorflow.org/) brings machine learning to JavaScript and the web. We’re going to use this awesome framework to build a deep-neural network model.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`\n### Input\n\nThis model is trained on the following fields from PITCHf/x:\n\n* Coordinates where ball crossed home plate ('px' and 'pz').\n* Which side of the plate the batter was standing on.\n* The height of the strike zone (the batters torso) in feet.\n* The height of the bottom of the strike zone (the batters knees) in feet.\n* The actual label from the pitch (ball or strike) as called by an umpire.\n\n### Architecture\n\nThis model will be defined by using the TensorFlow.js Layers API. The Layers API is based on keras - see this example for more details.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"model = {\n const model = tf.sequential();\n \n // Two fully connected layers with dropout between each:\n model.add(tf.layers.dense({units: 24, activation: 'relu', inputShape: [5]}));\n model.add(tf.layers.dropout({rate: 0.01}));\n model.add(tf.layers.dense({units: 16, activation: 'relu'}));\n model.add(tf.layers.dropout({rate: 0.01}));\n \n // Only two classes: \"strike\" and \"ball\":\n model.add(tf.layers.dense({units: 2, activation: 'softmax'}));\n \n model.compile({\n optimizer: tf.train.adam(0.01),\n loss: 'categoricalCrossentropy',\n metrics: ['accuracy']\n });\n return model;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\n## Loading and preparing the data\n\nThe curated training set is available over a [GitHub gist](https://gist.github.com/nkreeger/43edc6e6daecc2cb02a2dd3293a08f29). This dataset needs to be downloaded in order to begin converting the CSV data into a format TensorFlow.js uses for training.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"csvData = d3.csv(CONSTANTS.DATA_URL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"data = {\n const data = [];\n csvData.forEach((values) => {\n // 'logit' data uses the 5 fields:\n const x = [];\n x.push(parseFloat(values.px));\n x.push(parseFloat(values.pz));\n x.push(parseFloat(values.sz_top));\n x.push(parseFloat(values.sz_bot));\n x.push(parseFloat(values.left_handed_batter));\n // The label is simply 'is strike' or 'is ball':\n const y = parseInt(values.is_strike, 10);\n data.push({x: x, y: y});\n });\n // Shuffle the contents to ensure the model does not always train on the same\n // sequence of pitch data:\n tf.util.shuffle(data);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`\nAfter the CSV data has been parsed to JS, convert them into batches for training. Each batch will contain 50 samples (logits) with matching labels. Details for this conversion happens in the 'batches' code sample below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"function normalize(value, min, max) {\n if (min === undefined || max === undefined) {\n return value;\n }\n return (value - min) / (max - min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`\n## Training the model\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md`\nLet's put this all together. The model is defined, training data is ready, and now we're ready to begin training. The TensorFlow.js makes this very easy:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"// Trains and reports loss+accuracy for one batch of training data:\nasync function trainBatch(index) {\n const history = await model.fit(batches[index].x, batches[index].y, {\n epochs: 1,\n shuffle: false,\n validationData: [batches[index].x, batches[index].y],\n batchSize: CONSTANTS.BATCH_SIZE\n });\n \n mutable step++;\n mutable loss = history.history.loss[0];\n mutable accuracy = history.history.acc[0];\n \n await tf.nextFrame();\n updateHeatmap();\n await tf.nextFrame();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"mutable isTraining = false ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"// Trains one epoch and updates the heatmap after each batch:\nasync function runEpochTrainAndVisual() {\n mutable isTraining = true;\n \n for (let i = 0; i < batches.length; i++) {\n await trainBatch(i);\n \n // The tf.nextFrame() helper function returns a Promise when requestAnimationFrame()\n // has completed. These calls ensure that the single-threaded JS event loop is not\n // blocked during training:\n await tf.nextFrame();\n\n updateHeatmap();\n await tf.nextFrame();\n }\n \n mutable isTraining = false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"// Function that ensures the model is trained to the number of epochs selected\n// by the user in this codelab:\nasync function runTraining() {\n while (mutable epoch < mutable totalEpochs) {\n await runEpochTrainAndVisual();\n mutable epoch++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"{\n // Initial training run script\n if (mutable isTraining) {\n return;\n }\n runTraining();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`\n## Visualizing the model's accuracy\n\nThe heatmap in this notebook is built using a prediction matrix from a sample 4ft x 4ft grid evenly above home plate. This matrix is passed into the model after each training step to check how accurate the model is. The results of that prediction are rendered as a heatmap using the D3 library.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`\n### Building the prediction matrix\n\nThe prediction matrix used in the heatmap starts at the middle of home plate and extends 2 feet to the left and right. It also ranges from the bottom of home plate to 4 feet high. The sample strike zone ranges between 1.5 and 3.5 feet above home plate. The code snippet below loops through and creates a 50x50 element 2D tensor for this virtual space.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"function generateZone() {\n const yMin = 0;\n const yMax = 4;\n const xMin = -2;\n const xMax = 2;\n const length = 50;\n\n const zoneData = [];\n const zoneCoordinates = [];\n const isLeftHanded = document.getElementById(\"batterSelect\").selectedIndex;\n\n for (let y = yMax; y >= yMin; y = y - (yMax - yMin) / length) {\n for (let x = xMin; x <= xMax; x = x + (xMax - xMin) / length) {\n zoneData.push(normalize(x, CONSTANTS.PX_MIN, CONSTANTS.PX_MAX));\n zoneData.push(normalize(y, CONSTANTS.PZ_MIN, CONSTANTS.PZ_MAX));\n zoneData.push(normalize(3.5, CONSTANTS.SZ_TOP_MIN, CONSTANTS.SZ_TOP_MAX));\n zoneData.push(normalize(1.5, CONSTANTS.SZ_BOT_MIN, CONSTANTS.SZ_BOT_MAX));\n zoneData.push(isLeftHanded);\n \n zoneCoordinates.push({x: x, y: y});\n }\n }\n \n return {\n data: tf.tensor2d(zoneData, [zoneCoordinates.length, 5]),\n coords: zoneCoordinates,\n lefty: isLeftHanded\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"mutable zone = generateZone()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`\n### Using the prediction matrix with the model\n\nNow that the prediction matrix has been calculated, create a helper function to pass it into the model for prediction. Loop through each prediction and return an array that can be passed into D3 for visualization of the results.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"function predictZone() {\n const predictions = model.predictOnBatch(mutable zone.data);\n const values = predictions.dataSync();\n\n // Sort each value so the higher prediction is the first element in the array:\n const results = [];\n let index = 0;\n for (let i = 0; i < values.length; i++) {\n let list = [];\n list.push({value: values[index++], strike: 0});\n list.push({value: values[index++], strike: 1});\n list = list.sort((a, b) => b.value - a.value);\n results.push(list);\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`\n### Heatmap with D3\n\nUsing the prediction results from the prediction matrix, visualize that data using D3 to build a heatmap. Each element from the 50x50 grid will be rendered as a 10px x 10px rect in SVG. The color of each rect will depend on the prediction result (ball or strike) and how sure the model was of that result (scale from 50%-100%).\n\nDetails are in the code snippets below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"{\n // Regenerate zone data when the batter stance select changes:\n document.getElementById('batterSelect').onchange = function(event) {\n mutable zone.data.dispose();\n mutable zone = generateZone();\n if (!mutable isTraining) {\n updateHeatmap();\n }\n }\n \n // Update number of epochs from the range slider.\n document.getElementById('epochsRange').onchange = function(event) {\n mutable totalEpochs = parseInt(event.target.value, 10);\n if (!isTraining) {\n runTraining();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"\n// colorDomain = d3.extent(generateHeatmapData(), (coord) => { return coord.value })\ncolorDomain = [0.5,0.8]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"ballColorScale = d3.scaleLinear().domain(colorDomain).range([\n 'rgba(127, 172, 255, 0.5)', 'rgba(0, 90, 255, 0.5)'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"strikeColorScale = d3.scaleLinear().domain(colorDomain).range([\n 'rgba(255, 210, 127, 0.5)', 'rgba(255, 165, 0, 0.5)'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"scaleX = d3.scaleLinear().domain([zone.coords[0].x, zone.coords[zone.coords.length - 1].x])\n .range([0, CONSTANTS.HEATMAP_WIDTH / CONSTANTS.HEATMAP_SIZE])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"csvScaleX = d3.scaleLinear().domain([-2, 2])\n .range([0, CONSTANTS.HEATMAP_WIDTH])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"scaleY = d3.scaleLinear().domain([zone.coords[0].y, zone.coords[zone.coords.length - 1].y])\n .range([0, CONSTANTS.HEATMAP_HEIGHT / CONSTANTS.HEATMAP_SIZE])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"csvScaleY = d3.scaleLinear().domain([0, 4])\n .range([CONSTANTS.HEATMAP_HEIGHT, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"svg = d3.select('.strike-zone')\n .append('svg')\n .attr('width', CONSTANTS.HEATMAP_WIDTH)\n .attr('height', CONSTANTS.HEATMAP_HEIGHT)\n .attr('viewport-fill', '#ccc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"rects = svg.selectAll('rect').data(mutable zone.coords).enter().append('rect')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"circles = svg.selectAll('circle').data(csvData).enter().append('circle')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"circleAttrs = circles\n .attr('cx', (d) => { return csvScaleX(parseFloat(d.px)) })\n .attr('cy', (d) => { return csvScaleY(parseFloat(d.pz)) })\n .attr('r', (d) => { return CONSTANTS.CSV_SIZE })\n .style('fill', (d) => {\n if (d.is_strike === '1') {\n return \"rgba(255, 165, 0, 0.25)\";\n } else {\n return \"rgba(0, 90, 255, 0.25)\";\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function updateHeatmap() {\n rects.data(generateHeatmapData());\n rects\n .attr('x', (coord) => { return scaleX(coord.x) * CONSTANTS.HEATMAP_SIZE; })\n .attr('y', (coord) => { return scaleY(coord.y) * CONSTANTS.HEATMAP_SIZE; })\n .attr('width', CONSTANTS.HEATMAP_SIZE)\n .attr('height', CONSTANTS.HEATMAP_SIZE)\n .style('fill', (coord) => {\n if (coord.strike) {\n return strikeColorScale(coord.value);\n } else {\n return ballColorScale(coord.value);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"function generateHeatmapData() {\n const results = predictZone();\n\n const coords = [];\n let index = 0;\n mutable zone.coords.forEach((d) => {\n const result = results[index++][0];\n coords.push(\n {x: d.x, y: d.y, strike: result.strike, value: result.value});\n });\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"{\n // Draw the strike zone:\n const szWidthHalf = 0.7081;\n const szHeightMin = 1.5;\n const szHeightMax = 3.5\n // TODO(kreeger): Cleanup\n const points = [\n scaleX(-szWidthHalf) * CONSTANTS.HEATMAP_SIZE,\n scaleY(szHeightMin) * CONSTANTS.HEATMAP_SIZE,\n scaleX(-szWidthHalf) * CONSTANTS.HEATMAP_SIZE,\n scaleY(szHeightMax) * CONSTANTS.HEATMAP_SIZE,\n scaleX(szWidthHalf) * CONSTANTS.HEATMAP_SIZE,\n scaleY(szHeightMax) * CONSTANTS.HEATMAP_SIZE,\n scaleX(szWidthHalf) * CONSTANTS.HEATMAP_SIZE,\n scaleY(szHeightMin) * CONSTANTS.HEATMAP_SIZE,\n scaleX(-szWidthHalf) * CONSTANTS.HEATMAP_SIZE,\n scaleY(szHeightMin) * CONSTANTS.HEATMAP_SIZE];\n\n svg.append('polyline')\n .attr('fill', 'none')\n .attr('stroke', 'black')\n .attr('stroke-width', '2')\n .attr('points', points);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`\n#### Data Constants and Imports:\n\nThis project uses two libraries: TensorFlow.js and D3. Various constants needed for the notebook are listed below as well:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// Training data min/max\nCONSTANTS = ({\n BATCH_SIZE: 50,\n PX_MIN : -2.90051650955,\n PX_MAX : 2.89861453536721,\n PZ_MIN : -2.01705841594049,\n PZ_MAX : 6.06644249133382,\n SZ_TOP_MIN : 2.6534936194861984,\n SZ_TOP_MAX : 4.241794863019148,\n SZ_BOT_MIN : 1.1783429992048333,\n SZ_BOT_MAX : 2.2130980270561516,\n NUM_X_FIELDS : 5,\n HEATMAP_SIZE: 10,\n CSV_SIZE: 5,\n HEATMAP_WIDTH: 500,\n HEATMAP_HEIGHT: 500,\n DATA_URL : 'https://gist.githubusercontent.com/nkreeger/43edc6e6daecc2cb02a2dd3293a08f29/raw/b96f1b42d4ef07649f9bcd5e1f5137d2dfa37077/sz-train-data.csv'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"tf = require('@tensorflow/tfjs@0.11.4')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"md`\n## Learn More\n\n- [Check out our talk at Google I/O this year](https://www.youtube.com/watch?v=OmofOvMApTU&t=3s)\n- [Try the Node.js Pitch classification demo](https://github.com/tensorflow/tfjs-examples/tree/master/baseball-node)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null