2f:Tad4,md`# Vancouver Crime Map 2: Simple visual analytics example with vega-lite API and Leaflet ## Exploring signals and cells using the vega-lite API and Leaflet © Lyn Bartram, 2023
This workbook provides a teaching example of how a visual analytics module/case can be developed. I have used it to demosntrate both analytical thinking (questions and views) as well as to explore how the VL api and the Leaflet mapping api can be used together. As you go through the code explanations you will notice that there are a number of notes about odd behaviours in the vl.() api. Many of these remain unresolved, and in some cases if we wanted to fix them we would probably need to go to d3. I particularly want to acknowledge the extremely useful notebooks from @jonfroehlich and @jheer. ## Introduction The Vancouver Crime Map allows you to explore data related to non-violent crime in the City of Vancouver, BC. It is designed to help citizens and planners understand patterns of crime types by day, neighbourhood, population density and offense type. ### Data The data are from three open data sets hosted on the CIty of Vancouver open data catalogue:

non-violent crime, supplied by the Vancouver Police Department, (https://opendata.vancouver.ca/explore/dataset/crime/information/). In this website we use only a subset of these data from June 2016.
Vancouver neighbourhood boundaries, from City of Vancouver (https://opendata.vancouver.ca/explore/dataset/local-area-boundary/information/
Populations by neighbourhood, from Statistics Canada (https://webtransfer.vancouver.ca/opendata/csv/CensusLocalAreaProfiles2016.csv)

Some of the questions we want to let users explore are;

Do (different) types of crime occur at different times of the year? What are the temporal patterns?
What are the most common kinds of crime? CAn they be separated into higher categories, like theft or vehicle crime?
Where do different kinds of crime occur most often? Is it related to neighbourhood? Does this change over time?
Is there a relationship between crime type and population?
etc.....

In this demo, I use the following data attributes:

neighbourhood/planning area
offense type
date
location
population
I use also some derived attributes:
- offense category (the kind of offense);
- neighbourhood density (the amount of space per person, calculated as area size/population);
- crime rate (how many crimes per person at different levels of categories);
- crime ratio (the proportion of all crimes per type);

All data and functions are at the end of the webpage. `30:T80a,viewof crimeBars1 = { const selectedBar = vl .selectPoint("selected_bar") // create our selection param .fields("Offense") // select all crimes of the same type //.nearest(true) // select nearest point to click .on("click") // mouse click for selection ('click' is default but specifying for clarity) //.nearest(true) // select nearest point to the click (helpful because the points are small) .clear("dblclick") .bind("legend"); // also bind to the legend; // double click to clear selection const legend = vl.selectPoint().fields("Offense Category").bind("legend"); const barandlegend = vl.and(selectedBar, legend); const crimeChart = vl .markBar() .width(500) .data(vanCrime2) .title("Vancouver Non-Violent Crimes Totals by Offense Type Summer 2016") .params(selectedBar, legend) // add in the selection param // .transform(vl.filter(selectedBar) // filter out all but the selected point .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl .x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), vl .color() .if( barandlegend, vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) ) .value("lightgrey"), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectedBar, vl.value(0.99)).value(0.3) // if point selected, use opacity 0.7, otherwise 0.1 ); const text = vl .markText({ dx: 20, color: "grey" }) .data(vanCrime2) .transform(vl.filter(selectedBar.empty(false))) // show text for selection but only if a selection exists - is not working .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), vl.text().fieldQ("*").aggregate("count") ); return vl.layer(crimeChart, text).render(); }31:T7f2,### Selections and brushing We want to be able to add interactions to brush and/or filter these visualizations.
to filter, we remove everything else from the view. To brush, we highlight the selected item. #### Brushing First we manipulate the bar chart to show crime types of `Offense Type`. There are a couple of things to note with the selection. First is that other bars visually diminish in salience. But we need to retain the original scale in both the X and Y axes to maintain a consistent spatial view of value. We do this by fixing the domain of the axes: ~~~ vl.y() .fieldN("Offense") .scale({domain: OffenseTypes}) vl.x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), ~~~ To highlight the selection, I make the non-selected bars translucent by setting their opacity: ~~~ vl.opacity().if(selectedBar, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ~~~ I also add in a text mark that only shows when i select the bar. ~~~ const text = vl .markText({ dx: 20, color: "grey" }) .data(vanCrime2) .transform(vl.filter(selectedBar.empty(false))) // show text for selection but only if a selection exists ~~~ The next thing to do is to bind this to a legend and make that legend interactive. Unfortunately, it appears in vega-lite that we cannot have the legend bound to a category that is not at the same level of detail in the chart: in other words, the chart separates crimes into `Offense Type` with a bar for each, and groups them also by `Offense Category`, indicated by colour. I either have to set the selectable aspect as `Offense Category`, meaining that I can select the legend or the bar, but all crimes of that `Offense Category` will be selected, or I can set the selection as individual bars of `Offense Type`, meaning that the legend remains non-interactive. Sigh. This is clearly a limitation of vega-lite I need to explore further. 32:T5a8,viewof crimeTL1 = { const clickSelector = vl .selectPoint() .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend; // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click const isClicked = clickSelector.empty(false); const crimeTimes = vl .markLine({ strokeWidth: 3 }) .width(600) .title("Vancouver Non-Violent Crime Trends by Offense Category Summer 2016") .encode( vl.x().fieldT("Date"), vl.y().fieldQ("*").aggregate("count"), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(clickSelector, vl.value(0.99)).value(0.2) // if point selected, use opacity 0.99, otherwise 0.1 ); // shared base for new layers but filtered const base = crimeTimes.transform(vl.filter(isClicked)); const label = { dx: 4, dy: -8, align: "left" }; const black = { stroke: "black", strokeWidth: 0.5 }; const white = { stroke: "white", strokeWidth: 2 }; return vl .data(vanCrime2) .layer( crimeTimes.params(clickSelector), base .markText(label, white) .encode(vl.text().fieldQ("*").aggregate("count")), // backing white text base .markText(label, "black") .encode(vl.text().fieldQ("*").aggregate("count")) // black text label ) .render(); }33:T48c,The line chart behaves differently. When I select the line, it shows all the text values in that line. We should not have the data level-of-detail mismatch that we have in the above bar chart; all the data are colour-categorized by `Offense Category`. But of course we DO have a level of detail below category: the selection is for all offenses/day of that `Offense Category`. So we get them all. Any time i select any point on the line, i get the whole line. The default is to use `shift-click` to restore the view.
I also bound the legend as selectable using: ~~~ const clickSelector = vl .selectPoint() // .encodings("x") .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend; // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click ~~~ As noted, use `Shift-click` to deselect and reset the view. This is an ambiguous interaction as it also can be used to select multiple lines: so it can deselect what was previously selected as a toggle, or add to the selection set. Try it out.34:T865,## Brushing and linking Now i want to combine these two charts so i can explore across these data facets as well as within them. To do this, we first put both graphs in the same Observable cell. Then we can define brushing interactions between them using the local variables.
We use the following linking interactions:

Set selection types as a point selection
~~~ const selectType = vl.selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click ~~~ and a time scrubber interval selection. ~~~ const selectTimeBrush = vl.selectInterval().encodings("x"); ~~~

Then we need to identify where these selection operations are used. We do this with the `params` operator: ~~~ const crimeTrends = vl.markLine({ strokeWidth: 2 }) .params(selectTimeBrush) ~~~ and ~~~ const crimeBars = vl.markBar() .params(selectType) ~~~

Finally, we brush the related lines in the two timelines by setting the opacity of the other view marks to very faint: ~~~ vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ~~~

But note while this supports brushing between these two charts, we also want to have a one-way filter applied, so that when we select a subset of the time, the aggregate values in the bars are recalculated. To do this, we need to specify the filter operation in the barchart: ~~~ .transform(vl.filter(selectTimeBrush)) ~~~ and now when we brush the timeline, we get recalculated values in the related bars. ### Constant vs dynamic scales When i filter the values in ither view, the subset of data changes but the scale on the view axes remains **constant**. This is a design choice. It means that I have a fixed frame of reference but on the other hand I may miss some features in the data subset that have smaller values - try selecting one of the smaller bars to see how "flat" the timeline becomes. 35:T888,{ // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl.selectInterval().encodings("x"); // Use an OR operator on which time scrubber to use const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type .bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click //draw the charts const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) // .transform(vl.filter(selectType)) //.transform(vl.filter(selectTimeBrushCat)) .width(500) .params(selectTimeBrush) .title("VNon-Violent Crime Trends by Type Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense"), vl .y() .fieldQ("*") .count() .scale({ domain: [0, 60] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() .width(300) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") .transform(vl.filter(selectTimeBrush)) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl .x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); // const base = crimeBars.transform(vl.filter(timeSelector)); return vl.hconcat(crimeBars, crimeTrends).render(); }36:Ta0e,{ // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl.selectInterval().encodings("x"); // Use an OR operator on which time scrubber to use const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click const selectDate = vl .selectPoint("selected_date") .on("click") // select on click .fields("Date") // select all crimes of the same type .nearest(true) //.bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click //draw the charts const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) // .transform(vl.filter(selectType)) //.transform(vl.filter(selectTimeBrushCat)) .width(500) .params(selectTimeBrush, selectDate) .title("VNon-Violent Crime Trends by CAtegory Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense Category"), vl .y() .fieldQ("*") .count() .scale({ domain: [0, 120] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() .width(300) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") .transform(vl.filter(selectTimeBrush), vl.filter(selectDate)) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), // .scale({ domain: [0, 4400] }), vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); // const base = crimeBars.transform(vl.filter(timeSelector)); return vl.hconcat(crimeBars, crimeTrends).render(); }37:T5e8,## Leaflet Let's add an interactive nmap made with the js mapping library `Leaflet` that offers many more interactions and takes care of the expected map behaviours such as panning and zooming. This map is made up of 3 *layers*: 1. A base map retrieved from the `OpenStreetMap` GIS database (`osmLayer`); 2. a layer of the Vancouver neighbourhoods from the geoJSON data in the array `VanAreas` (`VanAreasLayer`) set to be interactive. This uses the polygons set by the geoJson data; 3. A layer of crime locations as points from the array `crimePoints` (`crimeLayer2`) coloured by the category of crime )`Offense Category`.
Now we can use `Leaflet` interactions to select either an area or a point. Since the points are the last layer added, clicking on a point will bring up a popup that tells you what the `Offense` is. Clicking on an empty area inside a neighbourhood that has no points will filter the map view to that area, and filter and brush the other crime charts in the `threeCViews` cell.

It looks like there is a "bug" (feature?) in the vega-lite API for trapping signals. When I select a subset of the data by `Offense`, the map will filter properly to only crimes of that type. But if I subsequently select a neighbourhood in the map, the bar chart and line chart revert to all `Offense` crimes in that neighbourhood - it's as if the first filter is reset, but the map is not. You have to select and deselect an `Offense` in the barchart to set everything back. Investigating this.

38:T15b1,## Code details: Signals and event listeners I added the `Leaflet` map view to the set of views that are connected by interactions such that a selection in the `threeCViews` cell changes the map, and vice versa. There is a notable difference between how we are using interactions to control the contents of views between the map and the charts because they are in different `Observable` *`cells`*. Thus we need to use explicit mechanisms to pass selection events back and forth between them. We still use a selection to derive a subset of attributes that drive the *filter transform* in other views, but things work differently across cells and we need to do a little extra work to explicitly identify the mechanisms to pass the specification between the cells using *signals* and *signal listeners*. To make this map work with my other vega-lite views I use *signals* that get passed from the vega-lite views in `threeCViews` cell to the map (`CrimePoints` cell) and vice versa. You can see that I have two types of these signals that affect the below selection sets:
1. `otype` : the selection from the `Offense Type` barchart that changes the timelines and the map; 2. `mapSelections`: the selection of the neighbourhood(s) from the map that resets the data shown in the bar chart and the timelines. Each of these gets computed by using a signal to change the contents of an array that contains the subset of the attributes to transform the relevant views using a filter, quite similar to what we see when the views are contained in the same cell. But these work slightly different in vega-lite and Leaflet. In a vega-lite call with multiple views and selections, we tell a view to transform based on a selection (in other words, the data specification is built into the selection, and we don't actually need to maintain a separate data structure.) For the Leaflet map, we don't actually **tell** it to filter the crime points: we simply update the data structure that contains those points,and because Observable cells are *reactive*, any time the data they use changes, they will automatically update. So the map (or indeed, any external cell) updates the crime points it displays because it is just responding to an update rendering request with new data. No filter specification required, but we do now need to explicitly maintain extra data structures that hold the subset of the selected data. I will go over each of these in turn.

To understand why this works, we need to take a side turn into understanding how *`mutable`* variables work in Observable. ##### Mutable variables So the thing to notice here is HOW I am passing signals between cells. Instead of using the Generators.observe() approach of explicitly throwing a signal event between reactive cells that we showed in https://observablehq.com/@sfu-iat355/passing-signals-adding-event-listeners-and-composing-dash, I am setting two mutable variables called `otype` (`Offense` views) and `nHood` (map view). Mutable variables break the scope of a single cell. You can think of a mutable variable as a global variable that you can set anywhere in your workbook. If you only want to reference the value of the variable, you just use its name; if you want to change the variable, you preface it with the mutable keyword. Mutable variables are described in more detail in https://observablehq.com/@observablehq/introduction-to-mutable-state. By using mutable, we can control the timing of when a downstream cell should be re-evaluated, by only setting its value at the appropriate moment. This can help cells share values without creating circular dependencies, and also prevent cells from updating more often than is needed — while allowing any cells that depend on them to continue receiving reactive updates as normal. The big disadvantage of using mutable is that global variables can be DANGEROUS so use with care. You are in essence breaking one of the important behaviours of Observable. ##### Offense Type Selecting an `Offense` type from the barchart and filtering the map view uses the following chain : - we define a global variable `otype` using the `mutable` keyword (just means accessible across cells); - we define a signal listener as an external function on the entire `threeCViews` cell thus using the `selected_pt` from `selectPoint` ~~~ threeCViews.addSignalListener("selected_pt", function (name, value) { if (value == null) mutable otype = null; else mutable otype = value.Offense; }) ~~~ - the selection of an `Offense` from the bar chart using the `selected_pt` operation triggers the signal listener to change the contents of the `otype` array using the `Offense` field of the selected bar; - We need to make sure we return a reset (that is how we return to the full view) so we add another routine that returns a full array of `Offense` types if the selection is null ~~~ bSelection = { if (isEmpty(otype)) { return Array.from(new Set(vanCrime2.map((d) => d.Offense))); } else { return otype; } } ~~~ - We use the `bSelection` to filter the data array of crimePoints ~~~ vanCrimeFiltered = vanCrime.features .filter((d) => bSelection.includes(d.properties.Offense)) ... ~~~ - and finally, we use the filtered features to set a new array of geoData in the format Leaflet expects: ~~~ FilteredGeoCrimes = { return new Object({type: "FeatureCollection", features: vanCrimeFiltered}) } ~~~ You can follow a similar path to see how i set the Date brush. I have only used the Date brush from the `Offense` timeline. 39:T50c,md`## Vancouver Neighbourhood Chaacteristics: how do they factor in? I now turn to how crime differs across neighbourhoods, and consider some aspects that may relate. The first simple choropleth map below on the left uses census data from 2016 (StatsCanada) and area boundaries of 22 local neighbourhoods (City of Vancouver OpenData) to show population distribution by neighbourhood. Interesting - but limited if you are considering many issues in urban life. he problem with the data I use to make the map below is that it is POPULATION and not DENSITY. The choropleth map shows the population amounts of each local area, but we should be considering density. #### Some areas have more space for their residents than others. The second map on the right shows density mapped to colour intensity of the neighbourhood. Because density right now is calculated as the number of meters squared per person - a LOWER value is higher density overall, so I inverted the quantized color scale. Look at the space per resident in Shaughnessy compared with the West End. **Interaction on this map** : Only the density map is interactive. Click on a neighbourhood to select; dbl-click anywhere to reset the map. It takes a minute. It also jump a bit afterwards and needs to be recentred. Don't know why.`3a:Tf66,viewof cPlotDensity = { const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type //.resolve("intersect") .toggle(true); // allow for multi-select (on by default) with shift-click const selectBrush = vl. selectInterval() //.encodings('x') .resolve("intersect"); const sPlotFaceted = vl .markCircle({ stroke: "black", strokeWidth: 1 }) .width(400) .params(selectBrush,selectType) .title({ text: "NonViolent Crime Totals by Neighbourhoods Summer 2016", subtitle: headerString }) // .title(headerString) .data(crimeDensityTotal) .transform( vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelections }), //vl.filter(selectType), vl.joinaggregate({ op: "count", field: "datum.Offense", as: "Ctotals" }) ) .encode( vl.facet({ field: "Offense Type", type: "ordinal" }), vl .size() .fieldQ("population") .legend({ orient: "right" }) .scale({ domain: [0, 50000] }), vl.tooltip([ { field: "Offense", type: "nominal" }, { field: "Offense", type: "quantitative", aggregate: "count", title: "Total" }, { field: "NEIGHBOURHOOD", type: "nominal" }, { field: "population", type: "quantitative", title: "Population" }, { field: "density", type: "quantitative", title: "Density", format: ".3f" }, { title: "Overall Crime rate (crimes/person)", type: "quantitative", field: "Ctotals", format: ".2f" } ]), vl.opacity() .value(0.1) .if(selectType, vl.value(.9)), vl .y() .fieldQ("sqm") .title("Square M per person") .scale({ domain: [0, 500] }), vl .x() .fieldQ("Offense") .aggregate("count") .scale({ type: "log" }) .title("Total Crimes"), vl .color() .scale({ range: OffenseCatColors }) .legend({ orient: "right" }) .if( selectBrush, vl.fieldN("Offense Category")).value("lightgrey") ); const crimeTotals = vl .markBar() .width(250) .data(crimeDensityTotal) .params(selectType) .title("Crime Total Offenses Summer 2016") .transform( vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelections }), //vl.filter(selectType), vl.filter(selectBrush) ) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), //.scale({ domain: [0, 4400] }) vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1), // if point selected, use opacity 0.7, otherwise 0.1 ); const crimeRatios = vl .markBar() .width(250) .data(crimeDensityTotal) // .params(selectType) .title("Crime Totals by Category and Neighbourhood") .transform( vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelections }), vl.filter(selectType), vl.filter(selectBrush)// //vl.calculate(vl.count({ field: "*", aggregate: "count" })).as("cpRatio") ) .encode( vl.y().fieldN("NEIGHBOURHOOD"), vl.x().fieldQ("Offense").aggregate("count"), //.scale({ domain: [0, 4400] }) vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }) // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey //vl.opacity().if(selectType, vl.value(0.99)).value(0.4) // if point selected, use opacity 0.7, otherwise 0.1 ); return vl .vconcat(sPlotFaceted, vl.hconcat(crimeTotals, crimeRatios)) .render(); }3b:T55a,Now let's look at the crime RATE per `Offense` and `Neighbourhood`. The rate is calculated by dividing the total offenses by the populations, and it is calculated by both totals for the neighbourhood across all Offenses and by the particular Offense. In the scatterplot on the left, the circles size represents population. We can see some interesting effects here. for example, we can see that Strathcona, with a small population, has a relatively higher crime rate. We can also see that the highest crime rate is related to the `Theft` offense category overall. Note that i have NOT used a logarithmic axis here for the scatterplot, and you can see how the values all bunch up near the lower end of the scale except for `Theft from Vehicle`. In the tooltip I also provide data called `Offense Ratio`. This is the crime rate related to population for that crime type. The bar chart shows the distribution of crime categories across all types in each neighbourhood. While `Theft` is by far the dominant category, it makes up a larger part of the overall crime count in some neighbourhoods, particularly the Central Business District. We also see a larger proportion of accidents in Musqueam, but this is very misleading because we only have a very few crimes reported and no population data. It is EXTREMELY important to check our data when we see patterns like this.3c:Tafa,viewof crimeRateNumbers = { const sPopRates = vl .markCircle({ stroke: "black", strokeWidth: 1 }) .width(400) // .params(selectBrush,selectType) .title({ text: "Crime rates Totals by Neighbourhoods Summer 2016" // subtitle: headerString }) // .title(headerString) .data(allCrimeRates) .encode( vl .size() .fieldQ("population") .legend({ orient: "bottom", offset: -15 }), vl .color() .fieldN("offenseCat") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom" }), // .if( selectBrush, vl.fieldN("Offense Category")).value("lightgrey") vl .y() .fieldQ("areaCrimeRate") //.scale({ type: "log" }) .axis({"tickCount": 10 }) .title("Crime Rate"), // .scale({ domain: [0, 500] }), vl .x() .fieldQ("offenseCnt") //.aggregate("sum") //.scale({ type: "log" }) .title("Total Crimes"), vl.tooltip([ { field: "area", type: "nominal", title: "Neighbourhood" }, { field: "areaTotal", type: "quantitative", title: "Total Crimes" }, { field: "offense", type: "nominal", title: "Offense" }, { field: "areaOffenseRatio", type: "quantitative", title: "Offense Ratio", format: ".3f"} ]) ); const crimeRatiosArea = vl .markBar() .width(250) .data(allCrimeRates) // .params(selectType) .title("Crime ratios by Category and Neighbourhood") .encode( vl.y().fieldN("area"), vl.x().fieldQ("areaOffenseRatio").aggregate("sum").title("Proportion of crimes by category"), //.scale({ domain: [0, 4400] }) vl.color().fieldN("offenseCat"), vl.tooltip([ { field: "offenseCat", type: "nominal" }, { field: "areaCrimeRate", type: "quantitative", title: "Area Crime Rate" }, { field: "area", type: "nominal" }, { field: "population", type: "quantitative", title: "Population" }, { field: "areaTotal", type: "quantitative", title: "Total Area Crimes", format: ".3f" }, { title: "Crime Ratio ", type: "quantitative", aggregate: "sum", field: "areaOffenseRatio", format: ".2f" } ]), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey //vl.opacity().if(selectType, vl.value(0.99)).value(0.4) // if point selected, use opacity 0.7, otherwise 0.1 ); return vl.hconcat(sPopRates,crimeRatiosArea).render(); }3d:T97f,viewof threeCViews = { // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl .selectInterval("tbrush") .encodings("x") .resolve("intersect"); const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type .resolve("intersect") .toggle(true); // allow for multi-select (on by default) with shift-click //draw the charts const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) .transform(vl.filter(selectType)) .width(500) .transform( //vl.filter({ field: "Offense", oneOf: bSelection }), vl.filter(selectType), vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelections }) ) .params(selectTimeBrush) .title("Non-Violent Crime Trends by Type Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense"), vl.y().fieldQ("*").count(), //.scale({ domain: [0, "scaleMax"] }), //.scale({ domain: [0, 120] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }) // vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() .width(250) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") // .transform(vl.filter(selectTimeBrush), vl.filter(selectTimeBrush)) .transform( vl.filter(selectTimeBrush), // vl.filter(selectTimeBrushCat), vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelections }) ) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), //.scale({ domain: [0, 4400] }) vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); // const base = crimeBars.transform(vl.filter(timeSelector)); return vl.hconcat(crimeBars, crimeTrends).render(); }3e:T7a5,viewof CrimePoints = { let width = 900; let height = 400; let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; /* let setCatClr = function (cn) { let i = 0; for (i = 0; i < OffenseCatClr.length; i++) { if (cn === OffenseCatClr[i].Oname) { return OffenseCatClr[i].CClr; } } return null; }; */ let map = L.map(container, { maxZoom: 14, minZoom: 12 }); let osmLayer = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: '© OpenStreetMap contributors', opacity: 1 } ).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", fillColor: "#EEE", fillOpacity: 0, opacity: 1, 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 vCrimeLayer2 = L.geoJSON(FilteredGeoCrimes, { style: function (feature) { return { color: setCatClr(feature.properties.Offense) }; }, pointToLayer: function (feature, latlng) { return new L.CircleMarker(latlng, { radius: 3, fillOpacity: 0.1, //fillColor: setCatClr(feature.properties.Offense), fillColor: setCatClr("purple"), Opacity: 0.1 }); }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.Offense + '
' + feature.properties.Date ); } }); map.addLayer(vCrimeLayer2); map.on("click", () => (mutable nHood = null)); map.fitBounds(VanAreasLayer.getBounds()); }3f:T763,function crimeRatios(areas) { const areaRates = []; // console.log(areas); // actually i will use vanAreas data and then can pull everything i need fromthere let i = 0; let j = 0; let ind = 0; const ai = {}; let areaInfo ={ name: " Testing", ctotal: 0}; //console.log(areaInfo, areas.length); for (i = 0; i < areas.length;i++) //for each neighbourhood, go through and total all crimes { //console.log("Looking at area: ", areas[i]); const crimes = OffenseTypes.map((cn) =>({oname: cn, cnt:0, ratio: 0})); const areaInfo = {name: areas[i], population:0, density:0, ctotal:0, tRatio:0, crimes}; //console.log(areaInfo); // areaInfo.name = areas[i]; //areaInfo.ctotal = 0; //console.log( areaInfo); areaRates.push(areaInfo); // now iterate through crimes array and total up each offense type and the cumulative totals for each neighbourhood // also enter the population and density of the neighbourhood // for (j = 0; j < OffenseTypes.length;j++) { // areaRates[i].crimeCounts[j].name = OffenseTypes[i]; // areaRates[i].crimeCounts[j].total = 0; // areaRates[i].crimeCounts[j].rate = 0; // } } /* for ( i = 0; i++; i < areas.length //for each neighbourhood calculate the totals and the rates of each crime type using the vHoods array) ) { areaRates[i].nhood = areas[i]; areaRates[i].crimeCounts = [...OffenseTypes]; for (j = 0; j++; j < crimes.length) { if (crimes[j].NEIGHBOURHOOD == areaRates[i].nhood) { areaRates[i].pop = crimes[j].population; areaRates[i].density = crimes[j].density; ind = areaRates.crimeCounts.findIndex(crimes.Offense); areaRates[i].crimeCounts[ind].total = +1; //increment the total for this offense type in this neghbourhood } } }*/ //console.log(areaRates); return areaRates; }40:T969,async function crimeRatesList(carray) { let i=0; let j=0; let k=0; let z=0; let nullIndx=0; const cleanedCRates=[]; let ca = deepCopy(carray); let cRates = deepCopy(crimeRates); // the neighbourhood stats let hCrimes = []; let oCrimes = []; let tempO =[]; let tempC =[{name:" ",total:0}]; let curCrime =""; for(i=0;i < cRates.length;i++) //set up all the basic data in the neighbourhood areas { j=0; while (j < vanAreas.features.length) { if (cRates[i].name == vanAreas.features[j].properties.NAME) { cRates[i].density = +vanAreas.features[j].properties.density; cRates[i].population = +vanAreas.features[j].properties.population; cRates[i].sqm = vanAreas.features[j].properties.localArea/vanAreas.features[j].properties.population; }; j++; } } // now iterate through the list of all crimes, find the neighbourhood and the offense type // and calculate totals and rates as # crimes/population //hCrimes = ca.filter(el => el.NEIGHBOURHOOD === "Sunset"); let catName = ''; let cat={}; let obj={}; let cType = ""; //for(i=0;i el.NEIGHBOURHOOD === cRates[i].name); //console.log(hCrimes[i]); //console.log(crimeProps[8]); for (j=0;j d.Offense === crimeProps[j].o); //console.log(crimeProps[j].o, " ", crimeProps[j].ccat, " ", crimeProps[j].ctype, " ",oCrimes.length); cRates[i].ctotal += oCrimes.length; //console.log(cRates[i].ctotal); cRates[i].crimes[j].cnt = oCrimes.length; cRates[i].crimes[j].oname = crimeProps[j].o; cRates[i].crimes[j].cat = crimeProps[j].ccat; cRates[i].crimes[j].type = crimeProps[j].ctype; cRates[i].crimes[j].crimeRate = cRates[i].crimes[j].cnt/cRates[i].population cRates[i].crimes[j].percentOfCrimes = cRates[i].crimes[j].cnt/cRates[i].ctotal; } console.log(cRates[i].name); if(Object.is(cRates[i].name,null)) { nullIndx = i; console.log(nullIndx); const cleanedCRates = cRates.slice(0,nullIndx); console.log(cleanedCRates); cRates = cleanedCRates; } } return(cRates); }41:T922,allCrimeRates = { let i=0; let j=0; let k=0; let runs =0; let cnt=0; let oCnt =0; let c=0; let tempC = []; const test = []; let len = crimeAreaTotals.length; const newCR = crimeAreaTotals.map((d) => ({ ...d, Area: d.name })); // areaCrimeCrimeRate is the ratio of all of crimes in this area (area total) to population. // areaOffenseRatio is the % this offense is of all crimes in this area. for ( i=0;i0) test[cnt].areaCrimeRate = test[cnt].areaTotal/test[cnt].population; else test[cnt].areaCrimeRate = undefined; test[cnt].offense = newCR[i].crimes[k].oname; test[cnt].offenseCnt = newCR[i].crimes[k].cnt; test[cnt].offenseCat = newCR[i].crimes[k].cat; //console.log(test[cnt].area," , ", test[cnt].offense, ", ", test[cnt].offenseCat); test[cnt].offenseType = newCR[i].crimes[k].type; test[cnt].areaOffenseRatio = test[cnt].offenseCnt/test[cnt].areaTotal; test[cnt].areaOffenseCrimeRate = test[cnt].offenseCnt/test[cnt].population; cnt++; } } } // now we will calculate the proper rates. //overallOffenseRate is the rate over all offenses of this kind over all meighbourhoods. //hCrimes = ca.filter(el => el.NEIGHBOURHOOD === "Sunset"); for (i=0;i el.offense === vOffenses[i]); //console.log("Offense: ", vOffenses[i]); for( j=0;jmark in the cell - a text mark - that i then composed with the vis into a layer to render. I used a condition that filtered out the data in that mark based on whether the field (either `Offense Type` in the barchart, or `Offense Category` in the line chart) was selected. This works fine for the bar chart, as it renders only one aggregate value, but it is not appropriate for the line chart where we see ALL the values for that category - in other words, for each date. What we want is to see ONLY the individual point text data and not the whole series. Working on this now, but it appears I need to define more layers to contain the particular data i want to see.
\nIn this view the mark type for the legend changes to a circle from the line - investigating why.","pinned":false,"hidden":false,"mode":"md"},{"id":1344,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":1505,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2549,"value":"### Dynamic Scales and Additional Selection\nIn the charts belowI have done something slightly different:\n1. The timeline now shows the aggregated `Offense` counts summed into the `Offense Category` counts.\n2. I changed the scale on the bar chart to adapt to the range of the selected (filtered) subset, so the axis values now change dynamically. This helps us see small differences in values more accurately but can mislead the viewer who is not paying attention to the CHANGE in the scale.\n4. Now the legend becomes interactive (it is bound to `Offense Category)`, so it all works.","pinned":false,"hidden":false,"mode":"md"},{"id":2542,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"### Filtering and brushing extended\nBut what i really want to do is combine 3 views, so that I have a cumulative bar chart of `Offense` types, coloured by what `Offense Category` they belong to, the `Offense Type` timelines and a **map** that shows crimes by type and area, coloured by `Offense Category`. ","pinned":false,"hidden":false,"mode":"md"},{"id":2112,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":2534,"value":"html`\n

${headerString}

\n\n

${viewof threeCViews}

${viewof CrimePoints}

`","pinned":false,"hidden":false,"mode":"html"},{"id":2134,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":2491,"value":"So now let's look at whether there is a relation between population density and number of crimes.","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"html`\n

${headerString}

Population

${viewof popMap}

Density

${viewof densityMap}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3193,"value":"The charts below show crimes related to neighbourhood density and offense type. Density is expressed as square meters/person (`sqm`), so a higher sqm is lower density. Circle size shows population. Note that the scatter plots use a **logarithmic** axis, not a uniform scale. This is another design choice: it perverts the perception of linear value relations, but it allows me to tease out potential patterns in the lower ends of the scale, because we have such a large outlier in the `Theft` category. \n\nThe brushes on each intersect, showing the set of selections in both brushes.","pinned":false,"hidden":false,"mode":"md"},{"id":2687,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":3345,"value":"$3b","pinned":false,"hidden":false,"mode":"md"},{"id":3350,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3835,"value":"## Individual views used in dashboards","pinned":false,"hidden":false,"mode":"md"},{"id":1671,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2268,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"viewof densityMap = {\n let width = 400;\n let height = 600;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 2}px`\n });\n\n yield container;\n function onMapClick(e) {\n alert(\"You clicked the map at \" + e.latlng);\n }\n\n let map = L.map(\n container,\n { maxZoom: 11, minZoom: 11 },\n { zoomControl: false }\n );\n let osmLayer = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let VanAreasLayer = L.geoJson(vanAreas, {\n style: style,\n onEachFeature: areaClick\n })\n .bindTooltip(function (Layer) {\n //binds a tooltip when clicking on each polygon\n return Layer.feature.properties.NAME;\n })\n .addTo(map); //Adds the layer to the map.\n\n map.on(\"dblclick\", () => (mutable nHood = null));\n\n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3830,"value":"## Data and Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1200,"value":"OffenseCatColors = [\"#f28e2c\", \"#e15759\", \"#4e79a7\", \"#76b7b2\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"OffenseTypes = Array.from(new Set(vanCrime2.map((d) => d[\"Offense\"])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"OffenseCats = Array.from(new Set(vanCrime2.map((d) => d[\"Offense Category\"])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"OffenseCatClr = [\n {\"Oname\": \"Break and Enter Commercial\", \"CName\" : \"Break In\", \"CClr\" : \"#e15759\"},\n {\"Oname\": \"Break and Enter Residential/Other\", \"CName\" : \"Break In\", \"CClr\" : \"#e15759\"},\n {\"Oname\": \"Mischief\", \"CName\" : \"Mischief\", \"CClr\" : \"#4e79a7\"},\n {\"Oname\": \"Other Theft\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft from Vehicle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft of Vehicle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft of Bicycle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\" : \"Vehicle Collision or Pedestrian Struck (with Fatality)\",\"CName\" : \"Accident\", \"CClr\" : \"#f28e2c\"},\n {\"Oname\" : \"Vehicle Collision or Pedestrian Struck (with Injury)\",\"CName\" : \"Accident\", \"CClr\" : \"#f28e2c\"}\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"#### Data structures and signal functions to set the `Offense` and `Date` selection filters in the map","pinned":false,"hidden":false,"mode":"md"},{"id":1790,"value":" clicked = Generators.observe((notify) => {\n const clicked = (event, { datum }) => notify(datum);\n threeCViews.addEventListener(\"click\", clicked);\n return () => threeCViews.removeEventListener(\"click\", clicked);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"mutable otype = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2618,"value":"vOffenses = Array.from(new Set(vanCrime2.map((d) => d.Offense)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"bSelection = {\n if (isEmpty(otype)) {\n return vOffenses;\n } else {\n return otype;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"TSelection = {\n if(isEmpty(mutable ObsDateSelection)) {\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date)))\n } else {\n return ObsDateSelection.Date.map( d => dateFormat(epochParse(d)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2209,"value":"#### Getting the `nHood` selection from the map to filter the charts","pinned":true,"hidden":false,"mode":"md"},{"id":509,"value":"mutable nHood = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"mutable nHoods = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"//We update our data in the function using mutable. This overrides observables defaults so we can push data from within //function scope globally\nwhenClicked = (event) => {\n mutable nHood = event.target.feature.properties.NAME\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2823,"value":"resetIfEmptySelection = (event) => {\n if (!vHoods.includes(event.target.feture.properties.NAME)) {\n mutable nHood == null;\n mutable selectedString = \"Nothing\";\n } else mutable selectedString = event.target.feture.properties.NAME;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2614,"value":"vHoods = Array.from(new Set(vanCrime2.map((d) => d.NEIGHBOURHOOD)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"mapSelection = {\n if (nHood == null) {\n return vHoods; //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"mapSelections = {\n if (nHood == null) {\n mutable nHoods.length = 0; //remove all selections to date. reset selection array\n return vHoods;\n } else {\n if (nHoods.indexOf(nHood) == -1)\n //value is not in nHoods\n mutable nHoods.push(nHood);\n return nHoods;\n } // add the selected neighbourhood\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2729,"value":"headerString = {\n if (mapSelections.length == vHoods.length)\n // everything is selected, map is reset\n return \"All Neighbourhoods\";\n else return \"Neighbourhoods: \" + mapSelections;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2854,"value":"mutable selectedString = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"#### Data structures and functions to set the `NEIGHBOURHOOD` map selection filter","pinned":false,"hidden":false,"mode":"md"},{"id":2100,"value":"threeCViews.addSignalListener(\"selected_pt\", function (name, value) {\n if (value == null) mutable otype = null;\n else mutable otype = value.Offense;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"vanCrimeFiltered = vanCrime.features\n .filter((d) => bSelection.includes(d.properties.Offense))\n .filter(\n (d) =>\n timeParse(d.properties.Date) >= timeParse(TSelection[0]) &&\n timeParse(d.properties.Date) <= timeParse(TSelection[1])\n )\n .filter((d) => mapSelections.includes(d.properties.NEIGHBOURHOOD))","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2432,"value":"mutable ObsDateSelection = Generators.observe(notify => { //creates generator that observes changes within the event listener.\n const signaled = (name, value) => notify(value); //two arguments for keyvalue pair. Notifies when updated\n threeCViews.addSignalListener(\"tbrush\", signaled); //Adds signal listener to our selection\n notify(threeCViews.signal(\"tbrush\")); //notifies when signal exists\n return () => threeCViews.removeSignalListener(\"timeBrush\", signaled); // removes signal listener to clear\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"//We are writing the event listener function for each feature in our geojson layer\nfunction areaClick(feature, layer) {\n layer.on({\n click:whenClicked //callback function\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof popMap = {\n let width = 400;\n let height = 500;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 2}px`\n });\n\n yield container;\n\n let map = L.map(container, { maxZoom: 11, minZoom: 11 });\n let osmLayer = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let VanAreasLayer = L.geoJson(vanAreas, { style: style0 })\n .bindTooltip(function (Layer) {\n //binds a tooltip when clicking on each polygon\n return Layer.feature.properties.NAME;\n })\n .addTo(map); //Adds the layer to the map.\n\n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md `### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"function isEmpty(obj) {\n for (var prop in obj) {\n return false;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"epochParse = d3.timeParse(\"%Q\");//ms in unix epochs","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2560,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":2469,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":2461,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":1847,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":1940,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":2161,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":404,"value":"md` ## Vega Signal Listeners and Event Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"selectedNeighbourhoods = selectedNames(mapSelection);","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"selectedNames = function(arr){\n let newstr = \"\";\n let newstr2=\"\";\n let i=0;\n if (arr.length == 25)\n {\n return (\"All Neighbourhoods\")\n }\n else\n {\n // newstr2 = arr[0];\n// newstr = arr[0];\n // for(i=1;i++;iFullscreen`;\n button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md` ## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"V = require(\"@observablehq/vega-lite@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"embed = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md` ## Loading and Preparing Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2895,"value":"setCatClr = function (cn) {\n let i = 0;\n for (i = 0; i < OffenseCatClr.length; i++) {\n if (cn === OffenseCatClr[i].Oname) {\n return OffenseCatClr[i].CClr;\n }\n }\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"vanCrime = FileAttachment(\"vanCrime.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"function getDensColor(d) {\n\t return d > .7 ? '#5D5D5D' :\n\t d > .6 ? '#6C6C6C' :\n\t d > .5 ? '#7E7E7E' :\n\t d > .4 ? '#909090' :\n\t d > .3 ? '#A2A2A2' :\n\t d > .2 ? '#BABABA' :\n\t d > .1 ? '#CCCCCC' :\n\t '#E7E7E7';\n\t}","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"function getPopColor(d) {\n\t return d > 50000 ? '#800026' :\n\t d > 45000 ? '#BD0026' :\n\t d > 40000 ? '#E31A1C' :\n\t d > 30000 ? '#FC4E2A' :\n\t d > 25000 ? '#FD8D3C' :\n\t d > 20000 ? '#FEB24C' :\n\t d > 10000 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"function getCCColor(d) {\n\t return d > 50000 ? '#800026' :\n\t d > 45000 ? '#BD0026' :\n\t d > 40000 ? '#E31A1C' :\n\t d > 30000 ? '#FC4E2A' :\n\t d > 25000 ? '#FD8D3C' :\n\t d > 20000 ? '#FEB24C' :\n\t d > 10000 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"function style(feature) {\n return {\n fillColor: getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"function style0(feature) {\n return {\n fillColor: getPopColor(feature.properties.population),\n weight: 2,\n opacity: 1,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"nCrimes = function (NH,crimeTotals) {\n\n const nc = [];\n let i=0;\n let l = crimeTotals.length;\n\n for( i=0;i= crimeProps.length)\n {\n \n return (\"unknown\");\n }\n else {\n console.log(\"MATCH: \", crimeProps[i].ccat, \" \", n);\n i=0;\n return crimeProps[i].ccat };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}