The 100 Most Segregated School Districts in America / / No Comments In the United States school district boundaries drawn onto economically and racially segregated neighborhoods ensure that most poor and non-white students receive a much worse education than students in the more affluent school districts.Back in 2016 NPR examined how school funding in the USA is used to ensure that the rich get the best schools. They created an interactive map which visualized Maps Mania… more → Posted in: Interactive Maps Tagged with: America, Districts, most, school, Segregated
Responding to HTML Changes in a Web Component / / No Comments While driving my kids to school this morning, I had an interesting thought. Is it possible for a web component to recognize, and respond, when its inner DOM contents have changed? Turns out of course it is, and the answer isn’t really depenedant on web components, but is a baked-in part of the web platform, the MutationObserver. Here’s what I built as a way to test it out. The Initial Web Component # I began with a simple web component that had the following simple feature – count the number of images inside it and report. So we can start with this HTML: <img-counter> <p> <img src="https://placehold.co/60x40"> </p> <div> <img src="https://placehold.co/40x40"> </div> <img... more → Posted in: JavaScript Tagged with: changes, Component, HTML, Responding
Real-time Air Pollution Alerts / / No Comments In February the Copernicus Atmosphere Monitoring Service (CAMS) launched an Aerosol Alerts service to provide warnings about upcoming air pollution. You can view an animated map of today’s alerts on the Aerosol Alerts interactive map.Aerosols are tiny particles that are suspended in the air, which can come from both natural and human-made sources. Natural sources of aerosols include dust Maps Mania… more → Posted in: Interactive Maps Tagged with: Alerts, Pollution, realtime
Not Everyone Commutes by Car / / No Comments In Canada and the United States 95% of journeys to and from work are made by car. Elsewhere in the world people often walk, cycle or use public transport in order to get to work.Cities Moving is a research project by the Complexity Science Hub of the University of Vienna, which analysed the mode of transport most commonly used for commuting to work in 794 cities in 61 countries around the Maps Mania… more → Posted in: Interactive Maps Tagged with: Commutes, everyone
Using Intl.RelativeTimeFormat for Localized Relative Timings / / No Comments I’ve been singing the praises of the web platform’s Intl object for years now, but it still continues to impress me. While I’ve seen it before, today I came across the RelativeTimeFormat API which looks absolutely fabulous. I played with it a bit and thought I’d share some tips. The Basics # The RelativeTimeFormat API works like so: Given a locale… Given a difference (in either a positive or negative value)… And given a unit of time, like ‘hour’ (or ‘hours’) Report the difference in the user’s desired language. So for example: 3 and day, "in 3 days" -1 and day, "one day ago" 18 and hour, "in 18 hours" Also,... more → Posted in: JavaScript Tagged with: Intl.RelativeTimeFormat, Localized, Relative, Timings, using
There are 2,773 stories in the Naked City / / No Comments The 1960’s procedural police series the Naked City used to conclude every episode with the line: “There are eight million stories in the naked city. This has been one of them.” If there are eight million stories in New York then The City has got quite a long way to go before it is finished reporting on them. So far it has managed to find only 2,773 stories in NYC.The City asked ChatGPT to find Maps Mania… more → Posted in: Interactive Maps Tagged with: 2773, City, Naked, Stories, there
Converting a Vue 2 App to Alpine.js / / No Comments A little over two years ago I published an "idle clicker game" built in Vue.js. I called it "IdleFleet" and was heavily inspired by games like A Dark Room, where I relied on simple text graphics and game mechanics that would change as you played. In my last <Code><Br> session, I walked through the process of building a simple text game and brought up IdleFleet as an example. While playing the game to refresh my memory about what I actually built… I discovered I actually really liked it. I decided it would be good to give it some attention with new features and other updates, but before I could do that, I knew I needed to switch from Vue to Alpine.js. Why... more → Posted in: JavaScript Tagged with: Alpine.js, Converting
Solar Symbology / / No Comments The one thing that you are guaranteed to see before a solar eclipse is lots of maps. With just over a month to go before April 8th’s total solar eclipse new solar eclipse maps are being released almost daily. Over on the Esri blog Kenneth Field has introduced his new Total Eclipse map. Kenneth’s map uses small symbols to visualize the extent of the eclipse possible at different locations Maps Mania… more → Posted in: Interactive Maps Tagged with: Solar, Symbology