2b:null 2c:["$","title",null,{"children":"Slider Interaction with Rodent Data | Liwen Peng | Observable"}] 31:T443,md` ## Using Update and Add a Time Swiper Let's continue to animate our map by adding some additional user interaction, showing Boston rodent incidents by month over the years the data was collected. To get a slider on our map, we can use a couple of different HTML features. The steps we take will be the following. 1. Add Time Slider HTML Component 2. Position the Component 3. Create global variables for Time Slider input and Months of the Year 4. Write Update Function that gets Value from Slider and sets Attribute 5. Write function (dateMatch) that returns a Color 6. Set Initial State of Map ### 1. Add Time Slider HTML Component To start, let's add a time slider component to our map. HTML5 has a nice built in range slider we can use. This slider has parameters that can be set that declare the range and steps the slider takes within that range. Below, you'll see an example of the slider we're hoping to make. As you can see, it has the right number of periods, but it does not update the month. Give the range input an id of timeslide and the span element an id of range. `32:T703,{ // Create SVG let svg = d3.select(DOM.svg(width, height)); // Append empty placeholder g element to the SVG // g will contain geometry elements let g = svg.append( "g" ); let rodents = svg.append( "g" ); // Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes g.selectAll( "path" ) .data( bosNeighborhoods.features ) .enter() .append( "path" ) .attr( "fill", "#ccc" ) .attr( "stroke", "#333") .attr( "d", bos_geoPath ); rodents.selectAll( "path" ) .data( rodentData.features ) .enter() .append( "path" ) .attr( "fill", initialDate ) .attr( "stroke", "#999" ) .attr( "d", bos_geoPath ) .attr("class", "incident") .on("mouseover", d => d3.select("#label").text(d.properties.LOCATION_STREET_NAME)) .on("mouseout", d => d3.select("#label").text("")); d3.select("#timeslide").on("input", function() { update(+this.value); }); // update the fill of each SVG of class "incident" function update(value) { document.getElementById("range").innerHTML=month[value]; let inputValue = month[value]; d3.selectAll(".incident") .attr("fill", dateMatch); } function dateMatch(data, value) { var d = new Date(data.properties.OPEN_DT); var m = month[d.getMonth()]; if (inputValue == m) { this.parentElement.appendChild(this); return "red"; } else { return "#999"; }; } function initialDate(d,i){ var d = new Date(d.properties.OPEN_DT); var m = month[d.getMonth()]; if (m == "January") { this.parentElement.appendChild(this); return "red"; } else { return "#999"; }; } return svg.node(); }33:[] 2f:{"id":"d53130121081ef13","slug":null,"title":"Slider Interaction with Rodent Data","thumbnail":"c65b30d41b8ec2a18cdc900f83bcf7bee04a413510f2d72ad49b08959c1d2e3d","access_level":"public","create_time":"$D2023-02-21T23:09:12.773Z","update_time":"$D2023-02-21T23:09:38.545Z","view_time":null,"first_public_time":"$D2023-02-21T23:09:12.773Z","has_unpublished_edits":null,"fork":{"id":"6593d26b86b2d08f","slug":"slider-interaction-with-rodent-data","title":"Slider Interaction with Rodent Data","owner":{"id":"d1626c514e706cae","login":"jdev42092","name":"Jay Dev"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3d648461531216f2","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":"starter_2024"},"version":68,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null}],"members":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Slider Interaction with Rodent Data","cells":[{"id":0,"value":"md`# Slider Interaction with Rodent Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`\n

\n
\n 1, 2, 3\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\n## 2. Position the Component\nLet's adjust the CSS a bit now to position the component. Also, let's remove the color we set for the incidents class. We will set the color based on the input from the slider, not in the CSS here. Because we named our div sliderContainer, we can style it in the CSS.\n\n**IMPORTANT: Recomment the CSS above and uncomment this (when you do this, the slider above will center). Notice that it has removed the CSS for the Incidents class. Otherwise it will override things.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`\n### 3. Create Global Variables\nWe now want two global variables, one that will hold the input value received from the time slider, we can call it inputValue and one that holds an array (months) that represents what the input values mean. For example, since position 0 in our slider represents January, we can write an array that returns \"January\" when we call months[0], with 0 being the inputValue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"month = [\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"inputValue = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`\n### 4. Write an Update function and timeslide event listenter\n\nNext, we need to write two pieces of code, one that listens for when the value of the time slider changes, and one that updates the SVG elements. We are going to use some D3 code to listen for an input change on the **#timeslide ** element, and then pass the value to a function named **update** that will use a \\`selectAll\\` on incidents to update the fill. When we change the slider position, it will change the month. We'll also set the \\`range\\` element to show the month, so the user can see it.\n\n**Put this at the end of the script, making sure you are within the script tags**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"{\n// when the input range changes update the value \nd3.select(\"#timeslide\").on(\"input\", function() {\n update(+this.value);\n});\n\n// update the fill of each SVG of class \"incident\" with value\nfunction update(value) {\n document.getElementById(\"range\").innerHTML=month[value];\n let inputValue = month[value];\n d3.selectAll(\".incident\")\n .attr(\"fill\", dateMatch);\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`\nYou'll notice we set fill to be 'dateMatch'. This is a function that will check the inputValue for a match in the data, then return a color if there is a match. Let's write that up in the next step\n\n### 5. Write Function to Return a Color\n\nOur color return function will look like the following. It takes our data and a value as arguments, grabs the open date of the incident from the dataset and sets it to a [JavaScript data object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) and gets the month, then checks the inputValue against the month. If there is a match, it returns **red**, it not, **grey (#999)**. We also use **this.parentElement.appendChild(this)** to help with layering. The way D3 draws is in order of drawing, so this appends the current element to the parent, making it draw last. Check it out, add this to your script.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function dateMatch(data, value) {\n var d = new Date(data.properties.OPEN_DT);\n var m = month[d.getMonth()];\n if (inputValue == m) {\n this.parentElement.appendChild(this);\n return \"red\";\n } else {\n return \"#999\";\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\nNote in the function, that all this does is return a color we can set to our D3 attribute fill.\n\n### 6. Set the Initial State\nLastly, when the map loads, we want our intial map state to be set to January. To accomplish this, write up an **initialDate** function that returns a color based on month match, and the sets the fill in the path creation to **initialDate**. When the user visits, they will see incidents filed in January on the map. Put this at the bottom of your script.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function initialDate(d,i){\n var d = new Date(d.properties.OPEN_DT);\n var m = month[d.getMonth()];\n if (m == \"January\") {\n this.parentElement.appendChild(this);\n return \"red\";\n } else {\n return \"#999\";\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\nOnce this is in your script, call it in your **path creation method**. Set the fill to be the return of the initialDate function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"height = 580","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"bosProjection = d3.geoAlbers()\n .scale( 190000 )\n .rotate( [71.057,0] )\n .center( [0, 42.313] )\n .translate( [width/2,height/2] );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// Create GeoPath function that uses built-in D3 functionality to turn\n// lat/lon coordinates into screen coordinates\nbos_geoPath = d3.geoPath()\n .projection( bosProjection );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"bosNeighborhoods = d3.json('https://gist.githubusercontent.com/jdev42092/5c285c4a3608eb9f9864f5da27db4e49/raw/a1c33b1432ca2948f14f656cc14c7c7335f78d95/boston_neighborhoods.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"rodentData = d3.json('https://gist.githubusercontent.com/jdev42092/ee94f6d469d7084e8dca4e8533817e0e/raw/7cfd6c34c974d3a86ff19c6180cfa22ee9ce3946/boston_rodents.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\nrodents.selectAll( \"path\" )\n .data( rodentData.features )\n .enter()\n .append( \"path\" )\n .attr(\"fill\", initialDate)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"d\", bos_geoPath)\n .attr(\"class\",\"incident\")\n .on(\"mouseover\", function(d){\n d3.select(\"h2\").text(d.properties.LOCATION_STREET_NAME);\n d3.select(this).attr(\"class\",\"incident hover\");\n })\n .on(\"mouseout\", function(d){\n d3.select(\"h2\").text(\"\");\n d3.select(this).attr(\"class\",\"incident\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof dateValue = html``\n// html`\n//

\n//
\n// January\n//

\n// `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"month[dateValue]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"