Mapping Urban Sustainability with JavaScript and Open Data //Aishwarya Elango

In this session, Myra Blanco discusses the significance of visualizing urban sustainability using JavaScript and open data. She begins by highlighting a 2019 study from Colombia that misinterpreted a correlation between armed conflict and forest preservation due to blind spots in satellite imagery analysis. The speaker then transitions to Singapore, elaborating on four critical technical decisions that can create similar blind spots in environmental data visualization. These include choosing thresholds for measurements, the implications of temporal averaging, how sensor coverage affects data representation, and the distinction between satellite data and actual ground conditions. Through the use of Mapbox GL JS and other open-source tools, Myra demonstrates methods to clarify these blind spots and emphasizes the importance of documenting methodology and data sources to improve the accuracy and understanding of sustainability mapping.

If you have any questions, just come to me. Yeah, so yeah, another round of applause for fantastic talk. I think so, too. Right. Uh Let's go. Yeah, okay. So, as as our next speaker is is setting up, I What I realized is that so far a lot of people have cats. Yes, I'm also team cat. Someone who likes dogs is going to have an opinion. Well, my

my opinion is I am team cat and I'm going to leave it at that. Um Again, do we have any announcements that we want to tell the fine folk of the audience? We do have some drones by our sponsors, Zephyr Cloud. Yeah, two drones. And we're giving them away. So, in the We're giving them away. So, when you come out in the on the lunch time, make

sure you scan the QR code. Okay, in case you didn't hear, got drone for free if you scan the QR code. Yeah, there's a two drones. Not two two Uh so, okay, we're all we're all set up. So, give give a round of applause to Ashwarya, who's going to talk about visualization. Okay, so the laptop rebooted. So, anyway, I hope you all have Actually, you all got

to eat the breakfast. The breakfast very token, eh? The the god that's like the yogurt and the container has a spoon inside. I didn't know that. I didn't know that until someone told me. I was like, "Where is the spoon?" Then they were like, "It's inside the container." Yeah. Uh So, I do we I I feel like we shouldn't waste food. This is high-quality stuff. It's not

like some random uh dry sandwiches that sometimes when you go back to Malaysia and you go for government event and they just give you these dry cakes. It's not even moist. Very dis- disappointing. So, we have high-quality yogurt. Uh but if you do bring inside, do not spill it. Uh do not spill the coffee, also. Yeah, coffee is harder to harder to rescue if you Yeah, then

it's going to be penalty. Like, hello. Penalty. Money is hard to come by, guys. Uh okay, okay, okay. This we bought that very fast. Okay, one more round of applause. Let's go. So sorry for the interruption, but hello everyone. I'm Myra Blanco. I'm in developer relations. And today, I'll be talking to you about mapping impact with JavaScript, visualizing urban sustainability with open data. In 2019, Colombian researchers

were studying the relationship between armed conflict and deforestation. They used the global forest change data set, which is a satellite imagery tracking forest cover over time. And they found something strange. The areas with armed conflict show increased forest cover. The conflict zones appeared green, preserved and protected. And if you stop there, you might conclude, like what other analysis did, "Hey, you know what? Violence protects forests." But

what they what they couldn't tell at couldn't see is that the forest gain was actually the coca plantations. These armed groups controlling these zones, they were cultivating coca plantations. And they have a very similar spectral signature to forest canopy. And the satellites saw green, they couldn't distinguish between trees from coca plants. The same violence that was actually displacing communities was enabling deforestation for drug production. The conclusion

was completely inverted. So, this wasn't an ideal quality issue because the satellite worked fine. They did what they were designed to measure, which is the canopy cover. This wasn't a visualization issue because the maps just show what the data was was a representation of what the data is. This was actually a missing data issue as disguised as an analytical finding. The satellite couldn't see what was happening

on the ground itself, and that blind spot became the conclusion, which is finance protects forest. Just because the data is missing doesn't mean that it doesn't exist. It just means that you didn't measure it. And with that kind of analogy, I'll be discussing heat stress in Singapore about the same uh different states but same pattern if your maps' blind spots can become your analysis conclusion. I'll walk

you through the four technical decisions that create blind spots. Firstly, it's about thresholds, how thresholds are chosen, what 15-minute averaging heights, why sensor coverage changes the story your map tells, and the difference between satellite data and WBGT. I'll then walk you through how to make these blind spots visible using JavaScript and open-source tools. Firstly, decision one, thresholds. We are using this thing called wet-bulb globe temperature, which

is called WBGT for short. It measures air temperature, humidity, solar radiation, and wind speed to measure physiological heat stress. So, it's not just about how hot the weather is, but it's how dangerous it is for the human body. Using Mapbox GL JS, I also categorize it with low, moderate, high with low being green, moderate being yellow, and high being red. As you can see the numbers 28,

31, they're not just random numbers. They are actually the ACGIH occupational safety standard. At 28°, the acclimatized workers they need a work and rest cycle. At 31°, the continuous outdoor work becomes dangerous. These are part of the regulatory thresholds. They're not discovered in the data, but rather a policy decision encoded as So, as you can see in this slide, there are different maps that have been put

out with different standards. And I've placed it all in 15-minute averaging window. As you can see, one shows a mixture on the left with ACGIH shows a mixture of yellow and green. But in the middle, as you can see with the conservative standards, it shows like red spots. And one on the right shows mostly yellow and green. So, which one do you think is actually correct? The

answer is actually all of them, because they're answering very different questions. ACGIH, which is occupational, is used to measure the for the acclimatized outdoor workers. Conservative standards is used for the vulnerable population. And the WHO guidelines is for the general population. And so, the question really is do you hardcode one standard and ship it, or do you expose the choice? Mostly, we will Usually, you will show

like one option, and a viewer doesn't know a choice was being made. And thus, this classification becomes invisible. The map looks objective. So, I propose that, hey, you know, we should make trash choice invisible more visible. They have a job-down menu, so it show people like ACGIH, conservative, WHO standards, or any other local regulations. The maps would then update in real time based on which standard they

select. So, this data I've gotten it from data.gov.sg. So, it's the same data, but different risk story. Let's talk about decision two, which is 15-minute averaging, or what gets erased. So, as you can hear over here, this is a data structure of collection of the WBGT per minute, which which is raw data, and collection of 1 minute per minute is too granular for real-time mapping. It's too

much data. It's too noisy. So, we aggregate to 15-minute windows. The question is, how? Three different methods, which provides three different results from the same raw data. 15-minute average, it's smooth, it's clean, it's most commonly used. It gives you 29.5°. 15-minute maximum captures the spike at and the that reading, and it gives you 34.1°. Exceedance tells you what percentage of the time was unsafe. So, over here

with the same data, the average reading 29.5°, but 3 minutes over 31°, which gives you a 20% exceedance. If you take a look at it visually, you can see the difference between when they use 15-minute average and 15-minute max. If you map the average reading, for example, it was 29.5°, it shows as moderate risk, which you see as the color yellow sensors. So, you know, as a

worker, you can continue with hydration. Workers still continue with hydration breaks. But, if you map out like 34.1° with 15-minute max, it shows a high-risk red, work should stop. So, same sensor, same 15 window, but completely different heat risk story. Over that, what I can propose is that using deck.gl hex layer, you can also visualize this both aggregation [clears throat] methods in 3D as well. As you

can see from the visual over there, it show the top shows the average aggregation as smooth rolling landscape. The maximum aggregation, the sharp peaks, which is represented by the red, shows where the dangerous heat spikes occur. So, what you smooth away, it might be what causes the heat illness. Thirdly, we're going to talk to you about the spatial coverage, the interpolation problem. As you can see over

here, I'm showing to you something that I coded, which is a map of Singapore showcasing 20 sensor points clearly marked with these black dots. And then, assuming there are about like 500 m like radius circles around each center. And as you can see, there are parts of rest of Singapore that are visible, but there's not like sensors covering the area. Using turf.js, I recalculate the actual coverage.

Total area of Singapore, we assume it to be 728 km per square. And then, if you trust that measurements within 500 m of a center, which is about a reasonable confidence radius, we're measuring about 15 square kilometers, and that's actually 2% actual coverage. So, what happens to the other 98%? We're guessing, we're interpolating. And with that, I want to give you three approaches using turf.js, which is

firstly is Voronoi polygons, which are method of partitioning a plane into regions based on distance to specific input points. It's useful for quality data or when you need to create discrete boundaries representing like nearest neighbor catchments. Over here, this is a visual version in the graph itself. You can see the coverage zones clearly, and they're honest about the gaps, and also imply imply sharp transitions. Next one

I'm going to do is the inverse distance weighted interpolation, which is used to measure values at unsampled locations based on weighted average of surrounding measure points. As you can see over here, uh we're going to refer to the top left, which is the uh inverse distance weighted weighting. As you can see, it shows you the smooth gradients between the centers. It looks complete, it looks authoritative, and

hides the fact that, you know, you're mostly estimating it. And lastly, we're going to have is the confidence weighted rendering, which is the same um mathematical used for like IDW, but the opacity is based on the distance from the centers. If you can look in the code uh snippet, it shows two pin properties. Fill color is based on the WBGT value, and fill opacity is based on

the distance from the nearest center. For example, if the center is like the nearest, we're 90% opaque and we're confident. If it's 500 m away, we're 60% opaque, medium confidence. A kilometer away is about 30% opaque, low confidence. And 2 kilometers will be about 10 10% opaque, and at this point, we're really just guessing it. So, always layer these center points on top and around making them

visible. So, this is what it looks like visually, not the best, but you know what? We're going to try. So, it tracks distance the nearest center, helps us to visualize the confident. Because when we talk about sensors in sensor point, people often assume it's just that one particular point. But they don't realize it's that we're talking about environmental like factors here like heat and wind speed. So,

it kind of like, you know, it's not just You don't see wind speed in one particular area. It kind of just moves around. It's all like around the area. So, in this map as you can see the more like red of the yellow parts are around the center of center and then it kind of spreads out on its own. And then you might be thinking, "Hey Ashriel,

why not use satellite data to fill the gaps?" Remember what the Colombian researchers did? So, why not use satellite data? What exactly is satellite data and what it measures? It measures what we call the land surface temperature, which is very different from what the ground sensors measure. In land Satellites measure land surface temperature, which is on how hot the asphalt is, how hot the rooftops are and

the ground surface heat. Whereas, as mentioned earlier, WBGT is about the human experience. It measures air and wind speed. And what the human body actually experiences. To give you a context, we're going to show you an example of a shaded park versus a construction site. For example, if satellite measures a hot grass, which is about 38°, you know, um but it has a very low WBGT. And

the reason why it's good because, you know, there could be air movement, there could be shade, you know, it's actually comfortable. However, if you take a look at the construction site, where the satellite is more moderate, but the human might feel like it's too high and it's too dangerous for the body. That's cuz, you know, construction sites they're open to the sun, there's high humidity, there's no

wind, and it's actually dangerous for the workers. So, just like the Colombian case study that I showed you, the satellites saw the canopy color, but by they couldn't distinguish between forest and coca plants. And the satellite analysis disease heat, but it doesn't really tell you if it's safe to work there. Both of them are measuring different phenomena. So, before you publish a civic data map, before you

push it to production, always ask yourselves these five questions. Question number one, what question what question is this answering? Not what data do I have, but rather what question is the viewer trying to answer? There is a difference between where is it all the world unsafe right now and which neighborhoods experience chronic heat exposure. Secondly, who are we building the map for? Is it for a safety

officer who needs real-time peaks and conservative thresholds? Is it for a urban planner that needs cumulative exposure over months? Is it for a researcher that needs raw data access and transparency about the methodology methods? And also thirdly, what gets hidden in the aggregation? In temporal aggregation, are you erasing peaks that matter? In spatial, are you hiding coverage gaps? In categorical classification, are your thresholds hiding edge cases?

And number four, as you can see in the center map that I showed you, you know, it says like what does no data actually mean? Just because something is unmonitored doesn't mean that it's safe and it's normal and everything's okay. That's not true. Interpolated doesn't mean that it's not measured and historical doesn't mean that it's not current. And lastly, can your own map surface its own blind

spots? Can your map can viewers see when the sensors are does confidence fade with distance or data gaps marked explicitly and most importantly are your methodologies documented? And here's some of the cool patterns on how we can implement this. So, as you can see, firstly, we have confidence overlay which is the opacity based on sensor distance. High confidence near centers and it fades with distance. So, the

viewers can see where you're confident and where you're totally guessing. Secondly is explicit warnings for low confident areas. Add a hatch pattern where you're more than a kilometer from any center and a warning that says, you know, no data within the 1 kilometer. Don't let the interpolator guess guesses look identical to the measurement. Lastly, document everything as I've been like preaching for so long. It's really document

everything in your legend. What exactly do you document? Don't just document your color scale. Document your data source, your temporal resolutions, where these thresholds came from, what kind of interpolation methods did you use used, when was the last time the data was updated, was it real-time data, what is the map suitable for, and most importantly, what is the map not suitable for? You need to know you're

not adding complexity. You're just making these existing choices more explicit. The viewer now can see, okay, this map knows what it knows, but it also knows what it doesn't know. So, tying back to where we all started, right? In Colombia, the satellites measure the canopy cover accurately, right? But they miss what was happening on the ground, which was the coca plantations versus the trees. And that limitation

became the very famous conclusion, violence protects forests. Imagine and that data had blind spots. Can you even imagine if the policy policy makers actually acted on it and they ended up decreasing a forest protection in conflict zones? That would have been an environmental disaster. Thankfully not. They eventually fixed the analysis. They combined the satellite data with ground surveys and conflict records and they published correct findings with

full methodology. So, in reality, what we can conclude is the armed conflict really enabled the drug cultivation, which then showed the that the satellites measured. Coming back to Singapore's perspective, we measured 20 points accurately, right? But what about the localized exposed zones such as the dormitories, the construction sites, the industrial areas, the forested areas. You can do you can try it out and do the same with

heat maps, right? Using JavaScript and open geo spatial tools. Personally, I use Mapbox, turf.js, deck.gl, and try to apply these five question framework before you publish. In both from Columbia to Singapore, these map limitations became the analytical conclusion because people make decisions based on what the map show and not what it couldn't see. So, don't just ask only whether your map is accurate or what can be

inferred from this. Ask what it preserves, what it erases, and whether it can surface its own blind spots. And because every technical choice that you make is an analytical claim. So, make sure that you document the source. Once again, document about like what kind of sources you're using. Is it ACGIH, the WHO, or local regulation? Make it very uh specific explicit about uh the temporal aggregation because

it's a trade-off between smoothness and accuracy. So, make it visible. State whether you're showing the max, average, or an exceedance. And every interpolation is a claim about the unmeasured. Make it visible. Show the fake confidence. Show the sensor location and mark the gaps. If your maps hide its blind spots, you will end up making wrong decisions. And poor analysis of data will lead to poor sustainability outcomes.

So, because the best living data map isn't the previous one, it's the one that shows you where to put the next sensor. Here are the resources used for today's uh topic. The data source is once again And I've used the Mapbox gl.js, deck.gl, turf.js, and chart.js. Okay, that's all for me today. There's a feedback form for you to fill out. Um let me know how you did.

And because I'm here from my representing Women Who Code, here's a link tree to that. And um yeah, thank you so much for that. And yeah, if you're interested in being a volunteer,