31:T459,function drawScatterPlotMO(animalData, plotContainer) { plotContainer.selectAll('circle') .data(animalData, d=>d.id) .join('circle') //Set attributes for entering and updating elements .attr('r',plotVars.plotCircleRadius) .attr('cx',function(d){ return xScale(d.weight); }) .attr('cy',function(d){ return yScale(d.height); }) .attr('fill', function (d) { return d.animal === 'cat' ? 'steelblue' : 'salmon' }) .on('mouseover', function (event, d) { //Handle 'mouseover' events plotContainer.append(/* fill in */) //Append SVG 'text' element. .attr('class', /* fill in */) //Set class to 'ptLabel' so can remove easily later .attr('x', /* fill in */) //Set label position near its circle xScale(d.weight) .attr('y', /* fill in */) //Set label position near its circle yScale(d.height) .text(d.name); }) .on('mouseout', function(event, d) { plotContainer.selectAll(/* fill in */).remove() // Remove all ptLabels }); }32:[{"id":"8c541bcb8b67936cea4ae812d6c87e1a776083dbfd581f08272f830fbdddcde5f69717ede238b1047c043faf19bdf2e367bb29afa234359c3420f3010b6ee90e","href":"https://static.observableusercontent.com/files/8c541bcb8b67936cea4ae812d6c87e1a776083dbfd581f08272f830fbdddcde5f69717ede238b1047c043faf19bdf2e367bb29afa234359c3420f3010b6ee90e","name":"untitled.png","type":"image/png","lastModified":1601844156306.757,"size":16728}] 2f:{"title":"Let's Make a Scatterplot","cells":[{"id":0,"value":"md`# Let's Make a Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`\nIn this notebook we will make an interactive scatterplot using D3. We've already imported the D3.js library and a few utilities that you can see at the end of this notebook. So let's start by loading a dataset.\nWe've placed a dataset containing animal heights and wieghts at the following link:\n\nhttps://magrawala.github.io/cs448b-fa20/assets/docs/animals.csv \n\nWe fetch the data from the URL and parse it using \\`d3.csv()\\`. \nNote that because Javascript is asynchronous the D3 code here uses promises (via the \\`then()\\` clause) to force the code to wait until the data is fully loaded until it executes further. Observable handles asynchronous data loading for you. It doesn't need the \\`then()\\` clause and will wait until the data loads to execute subsequent cells that use the data. But, outside of Observable you would put code that requires the data inside the \\`then()\\` clause of the code shown here. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"animalData = d3.csv(\"https://magrawala.github.io/cs448b-fa20/assets/docs/animals.csv\", function(d) {\n\t return {\n // We parse the data into an array of csv objects. We could for example change the names of fields.\n\t id: +d.id,\n\t animal: d.animal, \n\t weight: +d.weight,\n\t height: +d.height,\n\t name: d.name\n\t };\n }).then(function(animalData) {\n //Outside of Observable notebooks you would put all code to draw the graph here.\n return animalData;\n });\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"printTable(animalData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`\n

\n# Basic Drawing Setup\nOur goal is to construct a scatterplot of the weight (x-axis) by height (y-axis) of the cats and dogs in our scatterplot, where each cat is colored \\`steelblue\\` and each dog is colored \\`salmon\\`. The plot should eventually look something like this:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"md` We first define the width, height and margin of our desired plot as well as the radius of the circles we will use to represent data in the scatterplot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"plotVars = (\n {plotWidth: 200, //Width of plot region\n plotHeight: 200, //Height of plot region\n plotMargin: 50, //Margin space for axes and their labels\n plotCircleRadius: 5 //Radius in pixels of circles in the plot\n }\n);","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`\n## Setup scales\nNext we setup scales for the x and y dimensions of the plot. Inspecting the data we see that both weight and height lie in the domain [0, 10]. The ranges for the \\`xScale\\` and \\`yScale\\` should be based on the plotWidth and plotHeight, but remember that in SVG the origin is in the top left corner of the box. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"xScale = d3.scaleLinear()\n .domain([0, 10])\n .range([0, plotVars.plotWidth]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"yScale = d3.scaleLinear()\n .domain([0, 10])\n .range([plotVars.plotHeight,0]); //Flip y-range to deal with SVG origin at top,left","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"xScale(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`\n## Draw the data\n\nNext let's define a function that draws the data. In addition to the data, this function will take an SVG element as input that we will treat as the \\`plotContainer\\` so that we can draw the data into any SVG element we pass to it. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"function drawScatterPlot(animalData, plotContainer) { \n plotContainer.selectAll('circle') //select all of the SVG 'circle' elements in the plotContainer\n .data(animalData, d=>d.id) //bind the data, using d.id as the key\n .join( \n enter => enter.append('circle'), //append an svg 'circle' element for each entering data item\n update => update, //do nothing with data items that match existing items\n exit => exit.remove() //remove svg 'circle' elements whose data is now gone.\n )\n .attr('r', plotVars.plotCircleRadius) //use plotVars.plotCircleRadius\n .attr('cx', d => xScale(d.weight)) //base on d.weight \n .attr('cy', d => yScale(d.height)) //base d.height\n .attr('fill', function (d) { //set to steelblue if d.animal='cat', salmon if d.animal='dog'\n return d.animal === 'cat' ? 'steelblue' : 'salmon'\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`\nRemember that by default, if we just pass an SVG element type (e.g \\`'circle'\\`) to \\`selection.join()\\`, entering elements are appended to the selection, exiting elements are removed, and updating elements simply pass through. So we can simplify the code above to:\n\n~~~ js\n function drawScatterPlot(animalData, plotContainer) { \n plotContainer.selectAll(/* fill in as in code above */)\n .data(/* fill in as in code above */)\n .join('circle') \n //Set attributes for entering and updating elements\n .attr('r', /* fill in as in code above */)\n .attr('cx',/* fill in as in code above */)\n .attr('cy',/* fill in as in code above */)\n .attr('fill', function (d) {\n return /* fill in as in code above */;\n })\n }\n~~~\n\nNow we can create an SVG plotContainer, using \\`d3.create()' and then apply the function we just defined to draw the points and generate out scatterplot.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"{\n let svgPlotContainer = d3.create('svg')\n .attr('width',plotVars.plotWidth)\n .attr('height',plotVars.plotHeight)\n .style('background-color', 'whitesmoke'); //Color container bg to see its extent\n \n drawScatterPlot(animalData, svgPlotContainer);\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"md`\nWhile we now have a scatterplot, without the axes the plot is impossible to interpret. And there is also an issue with a datapoint being clipped on the right side of the plot. Let's fix these issues.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`\n

\n# Create Axes\n\nLet's first create a function \\`createAxes()\\` that takes an SVG container as an input parameter, and will add axes for weight (x-axis) and height (y-axis) as well as their labels.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"function createAxes(plotContainer) {\n\n const xAxis = plotContainer.append('g') //create SVG elt for x-axis\n .attr('transform', `translate(0,${plotVars.plotHeight})`) //translate to bottom of plot\n .call(d3.axisBottom(xScale)); //use axisBottom to form ticks below\n \n const yAxis = plotContainer.append('g') //create SVG elt for y-axis\n .call(d3.axisLeft(yScale)); //use axisLeft to form ticks to the left\n \n const xAxisLabel = plotContainer.append(\"text\")\n .attr(\"transform\", `translate(${plotVars.plotWidth/2}, ${plotVars.plotHeight + 35})`)\n .style(\"text-anchor\", \"middle\")\n .text(\"Weight\");\n \n const yAxisLabel = plotContainer.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 0 - plotVars.plotMargin)\n .attr(\"x\",0 - (plotVars.plotHeight / 2))\n .attr(\"dy\", \"1em\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Height\"); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"md`\nAnd now let's redraw the plot with the axes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"{\n let svgPlotContainer = d3.create('svg')\n .attr('width',plotVars.plotWidth)\n .attr('height',plotVars.plotHeight)\n .style('background-color', 'whitesmoke');\n \n createAxes(svgPlotContainer);\n drawScatterPlot(animalData, svgPlotContainer);\n\n return svgPlotContainer.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`\nAll we see is the y-axis on the left side of the chart. But there are no tick marks, the x-axis is missing and the axis labels are missing. The problem is that the axes and their labels were placed right at the edge of the svgPlotContainer. We need to build a larger container that provides enough margin space for the axes. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`\n## Create container for the whole chart\n\nLet's write a \\`createWholeChartContainer()\\` function to make an SVG container that provides enough margin space for the axes and their labels. We will first create an svg element that extends the \\`plotWidth\\` and \\`plotHeight\\` region by the \\`plotMargin\\` on all four sides. Then we will create a \\`\\` grouping element inside container for the whole chart that sets the inner plotting region. Note that this approach differs the from [margin convention](https://observablehq.com/@d3/margin-convention) you learned about in the [Introduction to D3 notebook](https://observablehq.com/@stanfordvis/introduction-to-d3#axes). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"function createWholeChartContainer() {\n const outerWidth = /* fill in */; // extend plotWidth by twice plotMargin\n const outerHeight = /* fill in */; // extend plotHeight by twice plotMargin\n \n var wholeChartContainer = d3.create('svg')\n .attr('width', outerWidth)\n .attr('height',outerHeight)\n .style('background-color', 'whitesmoke') \n \n wholeChartContainer.append('g')\n // Translate g element by plotMargin, plotMargin to place inner plotting region.\n .attr('transform', `translate(${plotVars.plotMargin},${plotVars.plotMargin})`) \n .attr('id', 'plotContainer'); //Give the plot container an id so we can access it later.\n \n return wholeChartContainer;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"md` Let's visualize the wholeChartContainer and the inner grouping for the \\`plotContainer\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"{\n let wholeChartContainer = createWholeChartContainer();\n let plotContainer = wholeChartContainer.select('#plotContainer');\n \n //Add rect to plotContainer of size plotWidth x plotHeight to visualize it\n //plotContainer.append('rect') \n //.attr('width',plotVars.plotWidth)\n //.attr('height',plotVars.plotHeight)\n //.attr('fill','burlywood');\n \n return wholeChartContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`\nWe can now use this container to put everything together and generate the scatterplot as follows.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"{\n let wholeChartContainer = createWholeChartContainer();\n let plotContainer = wholeChartContainer.select('#plotContainer');\n \n //createAxes(plotContainer);\n //drawScatterPlot(animalData, plotContainer);\n\n return wholeChartContainer.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`\n

\n# Labeling Points on Mouse Hover\n\nIt would be nice if we could see a label for the points when we \\`mouseover\\` them. Let's create a new function \\`drawScatterPlotMO()\\` to provide such interaction.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"{\n let wholeChartContainer = createWholeChartContainer();\n let plotContainer = wholeChartContainer.select('#plotContainer');\n \n //createAxes(plotContainer);\n //drawScatterPlotMO(animalData, plotContainer);\n\n return wholeChartContainer.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"md`\n

\n# Adding Filter Buttons via HTML\n\nSuppose we want to add buttons to our chart that allow users to filter the points to see cats only, dogs only or both. Let's do this using HTML buttons rather than the reactive widgets the Observable provides. \n\nWe first write html for the title of the chart and the buttons, with a \\`

\\` for the chart itself. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"html`\n\n\n\n\n

Height vs. Weight for Cats & Dogs

\n Filter Buttons: \n \n \n \n \n

\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"md`\nNow we need to add listeners for each button that filter the data as specified by the button. We will write a function called \\`handleButtons()\\` that listens for clicks on the buttons, then filters the animalData and calls \\`drawScatterPlotMO()\\` to update the chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"function handleButtons(animalData, plotContainer) {\n let buttons = d3.selectAll('button');\n buttons.on('click', function() { // Add 'click' event listeners and handlers\n // In function working with D3 selection, 'this' refers to the current DOM node\n let chosenAnimal = this.dataset.filter; //Value of the 'data-filter' attr of the button.\n let newData = animalData;\n if (chosenAnimal !== 'both') {\n newData = animalData.filter(d => d.animal === chosenAnimal);\n }\n drawScatterPlotMO(newData, plotContainer);\n });\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"value":"md`\nNote that we are relying on the default \\`exit\\` behavior of the \\`selection.join()\\` in \\`drawScatterPlotMO()\\` function to \\`.remove\\` the exiting circles. What would happen if the default was not to remove them?\n\nFinally we can create the chart, apply the \\`handleButtons()\\` function to build the event listeners, and then attach the chart we've created to the \\`

\\` we created earlier in HTML with the \\`id=#animal-vis\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"{ \n let wholeChartContainer = createWholeChartContainer();\n let plotContainer = wholeChartContainer.select('#plotContainer');\n\n //createAxes(plotContainer);\n //drawScatterPlotMO(animalData, plotContainer);\n \n //handleButtons(animalData,plotContainer);\n \n //Attach the node we created using d3.create() to the part of the DOM we setup using HTML above.\n d3.select('#animal-vis').selectAll(\"*\").remove(); //Remove any plots that may already have been created.\n d3.select('#animal-vis').append( () => /* fill in */); //Attach wholeChartContainer.node() to DOM;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"md` Where is the resulting chart? Scroll up to find it. Why did it appear up there?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"md`\n

\n# Serving D3 Outside Observable\n\nWe have created an interactive scatterplot within an Observable Notebook. How can we serve the scatterplot in a website independent of Observable? Download a [standalone version of this scatterplot code](https://magrawala.github.io/cs448b-fa20/assets/docs/d3-cats-dogs-fa20-v3.zip) to your computer. Unzip the code, and \\`cd\\` into the directory at the terminal. Once there you should run a local web server. \n\nIf you are using python version 3.x (recommended), the relevant command is:\n\n\\`python3 -m http.server \\`\n\nIf you are using python version 2.x, the relevant command is:\n\n\\`python -m SimpleHTTPServer \\`\n\nYou can then point your browser at \\`http://localhost:8000\\` and you will see the scatterplot. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"md`\n## Differences from Observable version\n\nA few important differences from the Observable version of the notebook.\n* Within the \\`\\` section of the page, we include d3 v6 using with the following line: \\`\\`\n\n* All of the plot drawing code appears within the \\`.then()\\` clause of the \\`d3.csv()\\` data loading function. \n\n* We don't need to remove the children of the \\`#animal-vis\\` node as the standalone version cannot add addtional children. _Why do we need this removal in the Observable version of the notebook?_\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"imports = md`

\n## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}