A4_First_Project_Visualizations / emmanuel-bel

emmanuel-bel

Workspace

Published

Edited

Mar 21, 2022

# A4_First_Project_Visualizations

import {vl} from "@vega/vega-lite-api"

cartoLight = "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"

cartoAttr = `© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>`

VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js')

vegalite = require("@observablehq/vega-lite@0.1")

d3 = require('d3@7')

L = require('leaflet@1.2.0')

ListServices = []

MentalDisorder = FileAttachment("prevalence-of-depression-by-age-Table 1.csv").csv()

Areas = FileAttachment("VanAreas.json").json()

HealthData = FileAttachment("healthlinkbc-mhsu-health-services.csv").csv()

MentalHealth = FileAttachment("mental-health.geojson").json()

A map of the location of the Mental Health Services in Vancouver(or more) with the addition of having Vancouver divided by area. Help to see what are the areas with the more services available for people how seek mental health related help. The points help to see better which areas have more or less possible help options than using other format. Looking to add some data to relate to their location like if age/population per area affects the location of the helping centres

MentalHealthVan = {

let width = 600;

let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px` });

yield container;

let map = L.map(container);

let baseLayer = L.tileLayer(cartoLight, {

attribution: cartoAttr,

subdomains: 'abcd',

maxZoom: 15,

minZoom: 0

}).addTo(map);

let geojsonMarkerOptions = {

radius: 5,

fillColor: "#1a93ff",

color: "##1a93ff",

weight: 1,

opacity: 1,

fillOpacity: 0.4

};

let MentalHealthArea = L.geoJSON(MentalHealth, {

pointToLayer: (feature,latlng) => {

return L.circleMarker(latlng, geojsonMarkerOptions);

}})

.bindPopup(function (Layer) {

return Layer.feature.properties.TAXONOMY_NAME + '<br> Address: ' + Layer.feature.properties.STREET_NUMBER + '<br> Neighborhood: ' + Layer.feature.properties.CITY;

})

.addTo(map);

let VanAreasLayer = L.geoJson(Areas, {

weight: .5,

color: "#432",

})

.bindPopup(d => d.feature.properties.NAME + '<br> Popu: ' + d.feature.properties.population)

.addTo(map);

map.fitBounds(MentalHealthArea.getBounds());

map.fitBounds(VanAreasLayer.getBounds());

}

I have encounter a problem with the Data that I chose. As it can be seen the data has no numerical values that can be used to measured, they are only reference number or similar which makes it hard to create a visualization. Therefore the following code is an attempt/ idea of using what I have learned so far to create some form of numerical values that I could use to create visualizations. The following is a division of the original Data into smaller Data in which I group them by One factor- The type of "help". In other words I have group in different arrays the same type of help, in the first List there are 415 centres that focus on substance use disorder counselling.

HealthDataFilter = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RX-8450.8000" })

HealthDataFilter1 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RF-3300" })

HealthDataFilter2 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000-050" })

HealthDataFilter3 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RX-8450.7000" })

HealthDataFilter4 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "LH-5000.0600" })

HealthDataFilter5 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "TJ-3000.8000" })

HealthDataFilter6 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "PH-6100" })

HealthDataFilter7 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000-650" })

HealthDataFilter8 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RF-2000" })

HealthDataFilter9 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "PN-8100.6500-650" })

HealthDataFilter10 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "LH-2700.2500" })

HealthDataFilter11 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.2500" })

HealthDataFilter12 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1500.1400-750" })

HealthDataFilter13 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000-020.05" })

HealthDataFilter14 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000-800" })

HealthDataFilter15 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000" })

HealthDataFilter16 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "FN-1900" })

HealthDataFilter17 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "LH-2700.9500" })

HealthDataFilter18 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "PN-8100.5000" })

HealthDataFilter19 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "RP-1400.8000-020.21" })

HealthDataFilter20 = HealthData.filter(function(d){

return d.SV_TAXONOMY == "YF-5000.0500" })

Once I had the different types of Help provided and the amount of centres there are(the array length) I group them together in a single array, first the name of the type of help follow by the array length which represents the amount of centres that provide such service.

FullList = {

let my_object = {};

let my_object1 = {};

let my_object2 = {};

let my_object3 = {};

let my_object4 = {};

let my_object5 = {};

let my_object6 = {};

let my_object7 = {};

let my_object8 = {};

let my_object9 = {};

let my_object10 = {};

let my_object11 = {};

let my_object12 = {};

let my_object13 = {};

let my_object14 = {};

let my_object15 = {};

let my_object16 = {};

let my_object17 = {};

let my_object18 = {};

let my_object19 = {};

let my_object20 = {};

// load data into object

my_object.name = HealthDataFilter[0].TAXONOMY_NAME;

my_object.Amount = HealthDataFilter.length;

my_object1.name = HealthDataFilter1[0].TAXONOMY_NAME;

my_object1.Amount = HealthDataFilter1.length;

my_object2.name = HealthDataFilter2[0].TAXONOMY_NAME;

my_object2.Amount = HealthDataFilter2.length;

my_object3.name = HealthDataFilter3[0].TAXONOMY_NAME;

my_object3.Amount = HealthDataFilter3.length;

my_object4.name = HealthDataFilter4[0].TAXONOMY_NAME;

my_object4.Amount = HealthDataFilter4.length;

my_object5.name = HealthDataFilter5[0].TAXONOMY_NAME;

my_object5.Amount = HealthDataFilter5.length;

my_object6.name = HealthDataFilter6[0].TAXONOMY_NAME;

my_object6.Amount = HealthDataFilter6.length;

my_object7.name = HealthDataFilter7[0].TAXONOMY_NAME;

my_object7.Amount = HealthDataFilter7.length;

my_object8.name = HealthDataFilter8[0].TAXONOMY_NAME;

my_object8.Amount = HealthDataFilter8.length;

my_object9.name = HealthDataFilter9[0].TAXONOMY_NAME;

my_object9.Amount = HealthDataFilter9.length;

my_object.name = HealthDataFilter10[0].TAXONOMY_NAME;

my_object.Amount = HealthDataFilter10.length;

my_object10.name = HealthDataFilter11[0].TAXONOMY_NAME;

my_object10.Amount = HealthDataFilter11.length;

my_object11.name = HealthDataFilter12[0].TAXONOMY_NAME;

my_object11.Amount = HealthDataFilter12.length;

my_object12.name = HealthDataFilter13[0].TAXONOMY_NAME;

my_object12.Amount = HealthDataFilter13.length;

my_object13.name = HealthDataFilter14[0].TAXONOMY_NAME;

my_object13.Amount = HealthDataFilter14.length;

my_object14.name = HealthDataFilter15[0].TAXONOMY_NAME;

my_object14.Amount = HealthDataFilter15.length;

my_object15.name = HealthDataFilter16[0].TAXONOMY_NAME;

my_object15.Amount = HealthDataFilter16.length;

my_object16.name = HealthDataFilter17[0].TAXONOMY_NAME;

my_object16.Amount = HealthDataFilter17.length;

my_object17.name = HealthDataFilter18[0].TAXONOMY_NAME;

my_object17.Amount = HealthDataFilter18.length;

my_object18.name = HealthDataFilter19[0].TAXONOMY_NAME;

my_object18.Amount = HealthDataFilter19.length;

my_object19.name = HealthDataFilter20[0].TAXONOMY_NAME;

my_object19.Amount = HealthDataFilter20.length;

// push the object to Array

ListServices.push(my_object);

ListServices.push(my_object1);

ListServices.push(my_object2);

ListServices.push(my_object3);

ListServices.push(my_object4);

ListServices.push(my_object5);

ListServices.push(my_object6);

ListServices.push(my_object7);

ListServices.push(my_object8);

ListServices.push(my_object9);

ListServices.push(my_object10);

ListServices.push(my_object11);

ListServices.push(my_object12);

ListServices.push(my_object13);

ListServices.push(my_object14);

ListServices.push(my_object15);

ListServices.push(my_object16);

ListServices.push(my_object17);

ListServices.push(my_object18);

ListServices.push(my_object19);

ListServices.push(my_object20);

return ListServices;

}

I believe that the following visualization answers the question of what are the possible types of help someone with a mental health issue could get and how many are there, which could then be linked to the map to filter them by Area or type.

vl.markBar()

.data(ListServices)

.encode(

vl.x().fieldQ("Amount").bin({step :30}),

vl.y().count(),

vl.color().fieldN('name').scale({scheme: 'plasma'})

)

.render()

________________________________________

AS I found the difficulty mention earlier, I decided to look for other data base, since We haven't learned how to use Data bases that don't have many too non numerical factors to use for the visualizations. The following is just an exploration of a data base that has the amount of mental health related cases by year and age. It would be interesting to have a more specific location than just general Canada.

HealthFilter = MentalDisorder.filter(function(d){

return d.Entity == "Canada" })

vl.markLine({opacity: .7, strokeWidth: 3})

.data(HealthFilter)

.encode(

vl.x().fieldT('Year'),

vl.y().fieldQ('All ages (%)'),

vl.color().fieldN('Entity')

)

.width(600)

.render()

vl.markLine({opacity: .7, strokeWidth: 3})

.data(HealthFilter)

.encode(

vl.x().fieldT('Year'),

vl.y().fieldQ('10-14 years old (%)'),

vl.color().fieldN('Entity')

)

.width(600)

.render()

Resources

The code for this notebook came from the different IAT 355 tutorials:

https://observablehq.com/collection/@krispybird/iat-355-s22-tutorials-exercises

And the following observable notebook to further understand the leaflet:

https://observablehq.com/@lilpeasant/introduction-to-leaflet-and-d3

The code that help me create the Object array: ListServices:

https://stackoverflow.com/questions/40250139/push-object-into-array

Data Set

The Vancouver Data set Are came from the IAT 355 7th tutorial:

https://observablehq.com/@krispybird/iat355-tutorial-7-maps-geocoding-with-leaflet-tutorial?collection=@krispybird/iat-355-s22-tutorials-exercises

The Mental Health Data Resources data Set came from:

https://catalogue.data.gov.bc.ca/dataset/mental-health-and-substance-use-health-services

Mental health disorders:

https://data.world/vizzup/mental-health-depression-disorder-data/workspace/file?filename=Mental+health+Depression+disorder+Data.xlsx

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more