43:["$","title",null,{"children":"IAT 355 - 5. Advanced Interactions and Signaling | Aunnoy K Mutasim | Observable"}] 4b:T1303,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([49.2527, -123.1207], 11.5); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); /*let VanAreasLayer = L.geoJson(VanAreas,{ weight : 2, color: "#432", }).bindPopup(function (Layer) { return Layer.feature.properties.NAME; }).addTo(map); */ //----------------------------------------------Adding interaction to the map-->notes from //https://bost.ocks.org/mike/leaflet/ //Scalable Vector Graphics (SVG) is a way to render graphical elements and images in the DOM. As SVG is vector-based, //it’s both lightweight and scalable. D3 uses SVG to create all its visuals such as graphs. The great thing about using //SVGs is we don’t have to worry about distortion in scaling the visuals unlike in other formats. Basically D3 helps us //to bridge the gap between the data and the relevant visualizations to give the users meaningful information. //(https://towardsdatascience.com/data-visualization-with-d3-js-for-beginners-b62921e03b49) // So, To add an interaction, we first need to add an SVG element to Leaflet’s overlay pane. //initialize svg to add to map L.svg({clickable:true}).addTo(map) // we have to make the svg layer clickable const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg').attr("pointer-events", "auto")// adding an svg element to leaflet's overlay pan /*Leaflet automatically repositions the overlay pane when the map pans. Note that the SVG element is initialized with no width or height; the dimensions must be set dynamically because they change on zoom. More on that in a bit. Create selection using D3 The "pointer-events" CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.(https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) auto: The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect. */ // create a group that is hidden during zooming /* Inside the SVG, you’ll need a G (group) element. This will be used to translate the SVG elements so that the top- left corner of the SVG, ⟨0,0⟩, corresponds to Leaflet’s layer origin. The leaflet-zoom-hide class is needed so that the overlay is hidden during Leaflet’s zoom animation; alternatively, you could disable the animation using the zoomAnimation option when constructing the map.*/ const g = svg.append('g').attr('class', 'leaflet-zoom-hide') // Use Leaflets projection API for drawing svg path (creates a stream of projected points) /*D3 and Leaflet use different APIs for rendering shapes and projecting points. So, we need to use an API to adopt these to projecting methods!to write a transform we use latLngToLayerPoints(https://leafletjs.com/reference- 1.7.1.html#map-latlngtolayerpoint) and LatLng(https://leafletjs.com/reference-1.7.1.html#latlng) to converts an input geometry (such as polygons in spherical geographic coordinates) to a different output geometry (such as polygons in projected screen coordinates). */ const projectPoint = function(x, y) { const point = map.latLngToLayerPoint(new L.LatLng(y, x))//Given a geographical coordinate, returns the corresponding pixel coordinate relative to the origin pixel. this.stream.point(point.x, point.y) } // Use d3's custom geo transform method to implement the above - project points const projection = d3.geoTransform({point: projectPoint})//https://github.com/d3/d3-geo#geoTransform //Transform implements projection.stream and can be passed to path.projection. // creates geopath from projected points (SVG) const pathCreator = d3.geoPath().projection(projection)//https://github.com/d3/d3-geo#geoPath -- convert GeoJSON to SVG // creating path elements for each of the features https://github.com/d3/d3-path const areaPaths = g.selectAll('path') .data(VanAreas.features) .join('path') .attr('fill-opacity', 0.3) .attr('stroke', 'black') .attr("z-index", 3000) .attr('stroke-width', 2.5) .on("mouseover", function(d){ d3.select(this).attr("fill", "red") }) .on("mouseout", function(d){ d3.select(this).attr("fill", "black") }) // Function to place svg based on zoom const onZoom = () => areaPaths.attr('d', pathCreator) // initialize positioning onZoom() // reset whenever map is moved map.on('zoomend', onZoom) }4c:T40a,viewof CrimeMap2 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container).setView([49.2527, -123.1207], 11.5); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(VanAreas, { //instantiates a new geoJson layer using built in geoJson handling weight: 2, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", //onEachFeature }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }).addTo(map); //Adds the layer to the map. let crimePoints = FilteredGeoCrimes.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.5])); let crimeLayer = heatLayer(crimePoints).addTo(map); }4d:T60e,viewof crimeCharts = V({ width: 400, height:300, data: {values: vanCrime2}, transform: [ {filter: {field: "NEIGHBOURHOOD", oneOf: mapSelection}} ], config: { background: "white" }, hconcat: [ { transform: [ {filter: {selection: "timeBrush"}} ], mark: "rect", selection: { offenseSelect: {fields: ["Offense"], on: "click", type: "multi"} }, encoding: { y: {field: "Offense", type: "nominal"}, x: {field: "*", type: "quantitative", aggregate: "count"}, color: { condition: { field: "Offense Category", type: "nominal", selection: "offenseSelect", scale: { domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}}, value: "lightgrey" } } }, { transform: [ {filter: {selection: "offenseSelect"}} ], width: 400, mark: "line", selection: { timeBrush: {type: "interval", encodings: ["x"]} }, encoding: { x: {field: "Date", type: "temporal"}, y: {field: "*", type: "quantitative", aggregate: "count"}, color: { field: "Offense Category", type: "nominal", scale: { domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"] } } } } ] })4e:T531,viewof CrimeMap3 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container).setView([49.2527, -123.1207], 11.5); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(VanAreas, { //instantiates a new geoJson layer using built in geoJson handling weight: 2, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", onEachFeature: areaClick }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }).addTo(map); //Adds the layer to the map. let crimePoints = FilteredGeoCrimes.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints, { gradient: { 0.0: 'yellow', 0.5: 'lightgreen', 1.0: 'purple' }, radius: 10, blur:15, maxZoom: 16, scaleRadius: true, max: 0.1 }).addTo(map); map.on('click', () => mutable nHood = null ); }4f:[{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1617059017139.712,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1617059018930.828,"size":4714349}] 47:{"id":"2a0d9303639cedcc","slug":"iat-355-5-interactions-and-signaling","title":"IAT 355 - 5. Advanced Interactions and Signaling","thumbnail":"59eaf7a1278842eb49266836c723bd365c41844b83bda88218f386794d074d43","access_level":"public","create_time":"$D2021-03-29T23:01:27.040Z","update_time":"$D2021-03-30T08:04:08.585Z","view_time":null,"first_public_time":"$D2021-03-30T08:03:52.974Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"78f75a79491e9427","login":"aunnoy","name":"Aunnoy K Mutasim","avatar_url":"https://avatars-next.observableusercontent.com/fa8d87348cd21625fa27d5970387350989817882f247846034653336a687ff5c","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":225,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ea8c3a101646ddd","login":"aunnoy","name":"Aunnoy K Mutasim","avatar_url":"https://avatars-next.observableusercontent.com/fa8d87348cd21625fa27d5970387350989817882f247846034653336a687ff5c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9ea8c3a101646ddd","login":"aunnoy","name":"Aunnoy K Mutasim","avatar_url":"https://avatars-next.observableusercontent.com/fa8d87348cd21625fa27d5970387350989817882f247846034653336a687ff5c","tier":null,"role":"editor"},{"type":"team","id":"78f75a79491e9427","login":"aunnoy","name":"Aunnoy K Mutasim","avatar_url":"https://avatars-next.observableusercontent.com/fa8d87348cd21625fa27d5970387350989817882f247846034653336a687ff5c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"IAT 355 - 5. Advanced Interactions and Signaling","cells":[{"id":0,"value":"md`# IAT 355 - 5. Advanced Interactions and Signaling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Part 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`## Part 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md` ### Bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof crimeBars = V({\n width: 400,\n height:300,\n data: {values: vanCrime2},\n \n transform: [\n {filter: {timeUnit: \"yearmonthdate\", field: \"Date\", range: TSelection}}\n ],\n \n config: {\n background: \"white\"\n },\n \n mark: \"rect\",\n \n selection: {\n offenseSelect: {fields: [\"Offense\"], on: \"click\", type: \"multi\"}\n },\n \n encoding: {\n x: {field: \"Offense\", type: \"nominal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n \n color: {\n condition: {\n field: \"Offense Category\", \n type: \"nominal\", \n selection: \"offenseSelect\",\n scale: {\n domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), \n range: [\"#4e79a7\", \"#f28e2c\", \"#e15759\", \"#76b7b2\"]\n }\n },\n value: \"lightgrey\"\n } \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"crimeBars.addSignalListener(\"offenseSelect\", function(name, value){\n if (value == null)\n mutable type = null\n else\n mutable type = value.Offense\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"mutable type = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"bSelection = {\n if (isEmpty(type))\n {\n return Array.from(new Set(vanCrime2.map(d => d.Offense)))\n }\n else\n {\n return type\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function isEmpty( obj ) { \n for (var prop in obj) { \n return false; \n } \n return true; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md` ### Line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof crimeTime = V({\n width: 600,\n height: 200,\n \n config: {\n background: \"white\"\n },\n \n data: {values: vanCrime2},\n \n transform: [\n {filter: {field: \"Offense\", oneOf: bSelection}}\n ],\n \n mark: \"line\",\n \n selection: {\n timeBrush: {type: \"interval\", encodings: [\"x\"]}\n },\n \n encoding: {\n x: {field: \"Date\", type: \"temporal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n \n color: {\n field: \"Offense Category\",\n type: \"nominal\",\n scale: {\n domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))),\n range: [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\"]\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"crimeTime.addSignalListener(\"timeBrush\", function(name, value){\n if (value == null)\n mutable time = null\n else\n mutable time = value\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"epochParse = d3.timeParse(\"%Q\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"TSelection = {\n if(isEmpty(mutable time)){\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date))) \n } else {\n return time.Date.map(d => dateFormat(epochParse(d)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`### Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"vanCrimeFiltered = vanCrime.features.filter(d => bSelection.includes(d.properties.Offense))\n .filter(d => timeParse(d.properties.Date) >= timeParse(TSelection[0]) && timeParse(d.properties.Date) <= timeParse(TSelection[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`## Part 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`### Horizontally Concatenated Plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`### Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"function areaClick(feature, layer){\n layer.on({\n click:whenClicked //callback function\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"whenClicked = (event) => {\n mutable nHood = event.target.feature.properties.NAME\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"mutable nHood = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"mapSelection = {\n if(nHood == null){\n return Array.from(new Set(vanCrime2.map(d => d.NEIGHBOURHOOD))) //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Part 3\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"{\n const button = html`