 I'm a developer and map scientist at CardoDB, which is a geospatial platform in the cloud. We basically build a Postgres database that you can dump data into and then style it however you want in our GUI or also use our JavaScript libraries and APIs to do it in your code. So the title of the talk is Stylish Living Maps Creativity with Cardo CSS. I'm talking about comics, so I did use Comic Sans, but you can rage tweet me because my Twitter is up there. And I come from the sciences, my background was in chemistry before this, so we are the people of Comic Sans for presentations. We make yellow on red presentations. We run them on our way through conferences, but it should be fun. So the reason I have Superman in the background is because I usually like to start with flattened images because when you're dealing with maps, you're dealing with a kind of mythology that's already a 2D projection of your 3D environment, so it's already kind of a farce. And how you style that really determines how clear the data that you're trying to represent is to your public. And also there's kind of a reflexive way that you read a comic, that you approach narrative and that's the kind of narrative reflexivity that we want to echo when we make maps. And also I like to use images because I think when you're building interactive visualizations online, you're competing with some of the most advanced compression algorithms known to man, which are in your eyes, right? Your eyes are capable of processing your 3D world, prioritizing things, depending on the quality of your vision, understanding depth, recolorizing it. And they do this quite immediately, very reflexively, it's something we try to echo in engineering. Oh, and I also want to make a comment on the fact that this is Google Slides and because sometimes they load scarily and don't render my animated GIFs, so I decided to do this sublime text like sidebar here so that I can make sure that it loads so I don't hate. But yeah, so it's something we strive for in engineering to develop those processors that can deliver you images with that same kind of reflexive intuition. But again, all maps are sort of farcical representations, there's all kinds of arguments in the geo community about projections and what is the ideal one for the data you're trying to represent on top of a map or a base map, or even just demonstrating the size of continents can come into question when you're developing a 2D flat representation of a 3D world. So here's New York, this is from Wonder Woman, right now I love Wonder Woman, she's great. So what is a slippy map? Slippy maps, everybody's familiar with, right? You can slip around, you can zoom, you can pan, they create kind of the burgazian map of the world, the size of the world, right? You can explore the entire world in a slippy map which kind of transforms our approach to the 2D projection in a sort of way. And I was sort of inspired by this slide that I saw at a conference, a geo conference a couple months ago. It was a developer, it was a friend of mine, Jeff Larson, he works at ProPublico, which is a news organization that does a lot of longitudinal investigative journalism pieces and they had just finished Losing Ground, which was this big retrospective about Louisiana land loss using satellite imagery. And his complaint was that slippy maps are optimized for location and wavefinding, so like what you would search for in navigation with Google Maps, but not for awe. And it was really sad to me because this is my chosen profession, so it's not very fun to have people say like, your work is awful and not awesome. Ha, you can laugh, you're allowed. So these are my blocks, these are the kind of things I make. I make a lot of maps, but I also use our SQL API mostly to make charts and graphs and things to complement those maps as well. But these are the kind of maps you can make now, right? This is a map made with CardoDB, it's an ISO map. So the resolution isn't super good, but you can kind of see the dendrochronology defined by these little rings. And this is like an elevation map of Iceland based on elevation data. And it's beautiful, right? You wouldn't necessarily take a hike based on this elevation information across Iceland, but you can appreciate that it's just as important to render things that are lovely and gorgeous and attractive as it is to represent the data with authenticity. This is using Torq, which is our time series library. All of our stuff is open source, so you can host it yourself. But you can also use our cloud and GUI interface, it should you choose to. Torq, basically if you have a timestamp or a time column in your data for rendering data on maps, you can play it back like an animated GIF or like a video based on that timestamp. So this is Indian election data, it's a categorical map, so every color represents people tweeting about a different candidate. And these are the kind of animated sort of dynamic maps you can make now, even in a slippy map. And then this is a common pun in the geo world. There's a lot of t-shirts made at conferences, a lot of stickers. Null Island is located at 00 Lat Long. A lot of people have it as an Easter egg on their base maps. We do at a certain zoom level. Google Maps also does, there's actually a buoy that's sitting out in the water right below Africa, where Null Island is located. This is where it is, and there's some CSS just to tie you over to get to the cool stuff. So Null Island has CSS and a location. It has a Twitter, it has a flag. There's a whole, it has a website, it's a really bad website. But it has a website, and this is the one we made for our maps. So we do a lot of crazy SQL at work because part of our GUI interface that lets you kind of filter your maps on the fly with SQL queries. Life supports post-just functions as well, if you know what those are, those are pretty rad. But we also allow you to edit Carto CSS on the fly. And this is an ISO map made with SQL and buffers instead of with CSS. And of course, people were not satisfied with there being one Null Island because there are multiple SRSs, there are multiple projections. So there are actually, there's an archipelago of Null Islands that someone plotted based on all the different projections on the same map. This is actually a Stamen based map. Stamen, if you're familiar, is a company that makes some beautiful base maps. I'll talk about some of their CSS work in a bit. And I also thought about, what did I want to talk about in terms of maps and how they're dynamic and exciting and not boring. This should actually be cryptography. But I changed it to cartography because my talk and he could just as easily be using legacy TIS software as decrypting things. But I also love the world and its mysteries. And then I looked at the last two slides and I thought, okay, well, there has to be some dynamism in this. And I like to think of Carto CSS, which is like it used to be called Cascade Nick. It's an implementation of CSS for map styling specifically. But I like to think of it as the Anamanapia of Slippy Maps, right? It gives them that pow and that wow factor because it's a lot you can do to apply dynamism to even static maps, even non-slippy maps, raster maps with CSS. So we'll go back to the origin stories and I'm going to carry this superhero metaphors throughout the entire talk. But the magic behind Anamanapia maps, maps by themselves are kind of magical, right, in terms of visualizations. Because there's no more easy to identify with type of visualization out there. Require pie charts even require some kind of digital literacy, right? So do bar charts, so do box and whisker plots. But as soon as someone sees a map, they can recognize how their physical world rectifies to that digital and kind of data dense topography. So it's really kind of a magical way to connect with people and that's why I love it. This is the architecture for OpenStreetMap, which is what CascadeNIC came out of. It was based on a map styling service called MapNIC, which is in the center area here in orange. That's where the tile server is and the postgres database. And some things you might be familiar with, your JavaScript are in the blue area. So there's leaflet and open layers which kind of show and serve you up those layers, those tiles. But it's kind of a complicated architecture and this also includes some editors for OSM. OpenStreetMap is like an online community that lets people edit maps and create more articulated areas based on their actual experience and their vicinity. So editors are actually living in those places. It's not calculated from satellite imagery and there's not as much math behind it. But there's clearly a lot of engineering behind how you can contribute to OpenStreetMap. But the problem with the previous way with MapNIC worked, the way CascadeNIC worked, is that this is a kind of workflow. This is part of a PowerPoint presentation that's online to describe how you should contribute to OpenStreetMap and how you can start up your mapping system locally. These are just six slides from over 45, about how you set up your environment for this. And it's a non-trivial process. These are the most relevant ones to style sheets and styles. But it's quite a process that involves a lot of VIM and Debian and lots of other things that maybe if you just want to make a map, you want it to be a bit faster, a bit more like web development now. So these are some of the companies that are working with that. So CardoDB is my company, but also MapBox is doing amazing things. They really support OpenStreetMap. They donate a lot of their developer time to developing that kind of database of information. Stamen, as I said before, makes some beautiful base maps. They do a lot of crazy code of CSS. And MapBox actually developed code of CSS out of CascadeNIC. So then MapsN does a lot of experimental WebGL stuff with maps too. So there's a lot of people doing really dynamic awesome things with maps, and mostly in the browser. So this is kind of what our interface looks like. You load in your data, it renders as a map, we geocode it for you. And then we have these little styling trays that allow you to select things with buttons and a wizard. But then you can also style your CSS if you know the rules. And then you can also run SQL queries across your data and filter it and create little histograms so that you can browse and understand your information a bit better before you map it. And this is really more what the interface looks like. So when you load your data in, you get this kind of table in the background, which looks like an Excel table. And you can filter it like you would with some moderate macros in Excel. But it's more powerful to use the SQL component of our software to do that. And then you can really achieve some beautiful high-definition maps with the styling you're capable of in Cardo CSS. And this is kind of the architecture for how all of that works. The things at the top are the most relevant to the stuff that I work on, the stuff that I build, CardoDB.js, lets you kind of work with our Postgres database or your own should you choose to and has all kinds of methods for dealing with geospatial information. Odyssey.js allows you to kind of create narratives. So it lets you write in YAML markdown kind of how you want someone to progress through your map so you can set zoom levels, you can set center lat longs where you want the map to focus and then kind of play it back as people click so that they can navigate your map as you intended when you plotted your data on it. And Torq is, as I said, before the time series. And Vecnic is for vector maps. And I'll talk about that a little bit later. It's pretty cool. Then we also have the editor, which is for non-developers, people who want to do things in the browser, and they can do it. And it's all built on the same like Mapnic sort of stack with Postgres and Postgresql. So these are the kind of things you can make with CSS. So this Null Island was kind of an obsession for a while. So this is an election map for Null Island. There's the Nata party and the Nix party. And you can separate the polygons into districts and then apply some CSS to color them according to the vote count in your data. So how does Cardo CSS work? The anatomy of Cardo CSS. It's kind of like CSS based on less. But what you're styling in Cardo CSS is often the data. You can also style the main map element, but you're styling data sets. So the name of your data set is the ID in this case. And what you style is the data that plots to your map. You can also style base maps on base layers and that's what Stamen does. But if you're styling your data is often what people want to do. They want to make their data pop off of the base map. And so that's what you can do. But it has some of the similar properties you might recognize. So nested styles, named variables, attachments are like pseudo elements. So you can add glows to your lines, points lines and polygons. So the difference between the previous version of how you would work with Cascade Nick and how you would work with Cardo CSS when it first came out was using Tile Mill. You could kind of batch create your tiles and then render them as maps or use leaflets to show your map tiles. But CardoDB lets you create it on the fly. So you can create tiles live while you're editing your CSS and just reload them in the browser to see how it works before you try it in your JavaScript. And so symbolizers are kind of like superheroes of special properties. They're the things that you can sort of style in Cardo CSS. You have points lines and polygons as you might expect because that's usually what you render when you're rendering data on the map. But then you also have texts and all of these other things and raster as well I highlighted because I'll be talking a bit more about vector maps and why they're superior. So some awesome maps instead of awful maps. Let's talk about some examples. So simple styles. So this is actually an open data set of bike lanes. I'm kind of obsessed with bikes as well and bike transportation, infrastructure and the lack of maps for that. So I pulled on some public data from Madrid about bike lanes and it was slightly offset when it came to me because the projection that they manufacture their open data in is not a projection that anyone else uses. So I had to reset it with SQL but then you can style it in many different ways. So the SQL here is kind of boring. You're just like doing a post just transform to reset it. So it was kind of off slightly. So I was driving my bike through buildings and such. But when I reset it to the right correct projection and there's a couple of ways you can do that which is what's shown at the top left here. But the courtesy of this is really what gives it kind of like wow factor because you can add glows, you can add some character to your lines. You can even add conditional zooms. So at certain zoom levels you have different visual properties or ways of appreciating the information that you're plotting. And that was a very simple kind of dumb example. And I had a GIF to show you the zooms but it was just not loading, right? There's a couple of those in here that I'll comment out. But this is an example of an app that was built using those kind of glows. So I'm not sure if you can see it with this resolution but these are bike lanes and both protected bike lanes and non-protected ones in New York. It's a app called bike storming that's built on top of CardoDB using Cardo CSS. They made kind of glow lines that look like lightsabers throughout the city. So they have dark basemaps and it's a really beautiful app. You can also add a bunch of other data layers like Wi-Fi hotspots and things that might help you strategize about what's the best navigation pattern for you through the city. So basemaps, let's talk about basemaps. These are some beautiful basemaps. Stamen makes some awesome basemaps. This is their top one is their watercolor basemap which is really famous. And then that one too as well. But then the terrain map is very common. People usually choose that. I'm sorry if this is really annoying. I feel like it's all sounding really shrill so I apologize for that. And then toner is their really extremely popular one. It's usually the one that people default to because it's just very simple black and white and gray. But oh, I don't think I have a, oh I'm supposed to keep talking, okay. So toner, I thought about toner and then I thought about like face wash and how I was talking about pop art and comics as well. And how when you zoom in to different levels the way that the tiles load and the delay and the pixel rendering of those tiles sometimes gives you these weird pixelated effects or only certain things render progressively. But toner is actually a pretty common basemap that Stamen was dealing with a lot of problems with that with people zooming or people wanting only certain features of the basemap and wanting to be able to edit them so when they ported it from Cascade Nick to Cardo CSS you could make certain parts of it transparent so you could edit the map element and sort of highlight either just the features, the basic geographic features or streets and lines or you could highlight the labels and they have a bunch of different ways that you can filter it now. This is a way of filtering by building height so this is the kind of nested sort of zoom setup you can do, you can set different, the way the map renders when you zoom at different levels will affect kind of the topography that you see before you so you can apply patterns or images of course to buildings and change those in Cardo CSS. So labels, labels are also a problem in maps too because people zoom in and they zoom out and sometimes the text labels that you apply to a city might be very long, it's very common in Germany for example there's a lot of agglutinated words that are very long, sometimes you have to cut them down or you do tricks where you say if it's longer than 12 characters just cut it off and don't render it, make it invisible so an empty string in this case. This is if you want to render all of the labels but you want to kind of twist certain ones of them if they go beyond a character length so California and Mississippi for example can be twisted in this way with Cardo CSS and the text size can be adjusted as well on a case by case basis although that involves a lot of editing. But art is what you can get away with Andy Warhol said that and I like this image because it's all tiled images and I was talking about tiles. Composite operations, composite operations are really rad. This is actually a map of bathymetry data so that gives you kind of depth of the oceans and water bodies and they render different polygons on top of each other so that the darker those composite renders are the more deep the ocean is. But you can also do composite operations on map layers and then apply them on top of each other so this looks like kind of boring but the seams give away that it's on top of another layer of information or another base layer and this is actually eight maps layers on top of each other to make this sort of soupy swamp map but they have over 20 different composite operations you can apply to your map layers to sort of determine the kind of color and ideal like opacity of what you want to display it for you. So this is some example of like some of my earlier attempts with dealing with the bathymap. So conditional zooms. Conditional zooms are a really desired feature because a lot of the times you want your points or your lines to shrink or grow depending on how close people are to the base map as they zoom in and you can do this in the same way that you would do any other conditionals. So the column value would be just zoom. So zoom level up to 16 usually and you can change all the properties. So this is like the Cycle Street network at different zoom levels. You can zoom 16 to 14 and changes a certain color has a certain glow. And then you can also nest them too so you could add other things like other data if this column is this value like if it's a protected bike lane versus an unprotected one then you change some of the property of it. This is, we have a lot of data from Google Trends. They send us some data sometimes. So these are people searching about Nepal on Google and it involves some kind of conditional zooms with Torq because you wanted the bubbles and the kind of plume that develops the trail as we call it from the bubble to change depending on the zoom level. And there's a couple of different ways you can do this frame offset as a way of kind of determining as the bubble grows, how far it grows and then what are the visual properties of it as it grows, color by category. So the Null Island map, it's colored by category because certain, the next party wins one time and then not a party wins in another district and you have to represent that differently so people can appreciate who won in their area. Election maps are very common. A lot of journalists use our software to make election maps and they need to be made fast and they need to render live. So the data pipeline is really key and being able to render quickly is also very important. In this case again, the sequel is kind of boring. There's nothing going on there but the courtesy assess is kind of exciting. So again, you're applying like zoom level difference to the text size for the labels and then the labels depending on who, if they win or lose have a different kind of buffer area around them depending on the zoom but they also have different colors and they correspond to the polygon fills for the polygon pattern fills which later became patterns but in this case they're not patterns. I added that later. So this is what it would look like in the GUI. This is how you can edit it before and you can also export this as HTML templates and put it in your JavaScript. You can add buttons that change how it renders and it renders pretty fast. Torque and Tyler. So I like talking about Torque a lot because it's really visually pretty but a lot of people just make these sort of little point bubble maps like explosion maps, right? And sometimes if there's a particular density of points it can be very interesting or if they suddenly change there's a map that Simon Rodgers made of people tweeting about sunrise and he put kind of a sine wave of when the sun was coming up and it sort of follows the sine wave as people are tweeting all across the world. It's really beautiful, right? And those kind of things are kind of like, oh, that's lovely. That's so nice. But sometimes it's just like, this looks like a population map. This doesn't look like anything that represents the data and that's kind of part of the mythology of plotting anything on what would otherwise be kind of a farcical representation of the world. But we try to make that better. So this is an example of a map made by Influ Amazonia. In Brazil they wanted to track fires in the Amazon based on data that they collected and over time. So that's why I'm doing that over time. This is a hackathon visualization of science data. So these scientists have been collecting kind of the migration routes of different sea life but only with kind of a geolocation and timestamp and then the name of the species and such but it was all in a table. So this makes it a little bit more understandable and visually beautiful, right? To have it on a map to see it kind of animate as it goes, as little animals travel and to see where they cluster is also kind of fascinating relative to the world. This is a snow plow heat map. So TORQ also does heat map functionality. And this is kind of where the snow plows cluster after a big snow storm in Chicago and we had a journalist who wanted to make this. He was very excited and he wanted to determine if certain districts were getting snow plow preference because they had aldermen in those districts, right? So he was trying to find out where all of the political figures in Chicago lived and whether the snow plows were prioritizing them and he found a cluster that he thought was particularly promising. But it turns out it was just like a snow plow car park when he looked at the satellite images. It's where the snow plows go to bed. It's not necessarily where bad things are happening. This is another map made the Euro bird portal. It shows bird migration from data sent in by bird watchers. So these are people viewing these bird species and you can kind of filter by species. This is done with TORQ and some pretty fancy sequel to get it to project ideally for Europe. But you can also compare it to other information that might be important for understanding bird migration. So like temperature in this case, there's a temperature heat map that should do how the birds kind of go up when it gets hot and then they sort of say static when it gets cold. Oh, it's interesting too to comment on the political nature of maps too. Sometimes you get very excited about how the information renders and how beautiful it is, but you don't really appreciate that there's a lot of skewage in the data that you're collecting or maps are often criticized for people putting data on maps that doesn't need to be mapped necessarily. In this case, there's not much activity in Spain, right? Nobody's really looking at birds in Spain. What's up with that? It turns out that Catalonia sort of launched this project and they had a partnership with the rest of Europe, but Spain and Catalonia don't so much get along so they didn't submit their data. So there's no activity in Spain, but that's not a reflection of a lack of bird watchers. That's just a reflection of politics. So Mapnic and Vecnic. So Vecnic is our JavaScript library on HTML5 and modest maps that lets you do vector data styling on the fly. So there's a lot of interactivity that you can achieve with vector versus raster maps. It's very exciting for a couple of different reasons. You can animate render without loading tiles it's all done on the client. So that's pretty cool. The geometries are amenable to interaction because they're all in the browser. So that's pretty cool, you can do hovers and all kinds of other interactivity and zoom sort of rotate and pop. All of the qualities of vector are baked into it and it's an open source JavaScript library so you should check it out. I'll kind of link to it at the end. But we're trying to think of different ways that people can use torque too because people often just do the bubble maps where it just kind of populates and sometimes it's sort of meaningless. Sometimes you need to group and cluster it but the math behind that can be kind of complicated for some people but you can leverage it really effectively with CURTO CSS. So this is kind of the zoom how the bubble clusters change as you zoom in and then here's some of the CSS that achieves that. So torque has its own like little prefix properties for dealing with the time series information so you can control the step how fast it goes. You can apply aggregation functions which are assigned to a variable called value that then you can style against which you see in the lower part there. So that's pretty cool and it's a different way of rendering torque. And then we have very simple things. So for like earthquake in Nepal there was a lot of activity on open street map. They make all of their data, their edit data available to use. So we made a map of different roadways and the categorical classification of those roadways and as people were editing kind of populating those edits live. And in this case it was kind of a cheat because the time stamp isn't provided in the open data so you had to sort of hack the OSMID to sort all of the way that the edits were populating but in this case the type column gives you all of these different categorical values that you can then use in your CSS to sort of control the colors and what kind of CSS you want to apply to those elements. So this is the sequel kind of just the boring OSMID stuff and then the carto CSS is a bit more exciting. There's a little frame offset again is going on there because this is the torque layer. This is kind of what gives it that pop and that animation and that live feel. It's using a base map developed very quickly by Stamen for humanitarian relief so they develop a lot of cool base maps and a lot of all this open source projects and software sort of blend together so we're always working together to create collaborative projects which is pretty cool. So pop maps, so carto CSS and its complements. This is not a map. It's actually not even a full GIF. I couldn't get it to load before I got on stage but I thought it was kind of funny how Sisyphian. What is Sisyphus? The guy who could never like push it up the mountain. So he can never like jump over this little thing. He normally like vaults over it and he can't but this is done with torque and it's just a instead of using a base map you just load in your own image which you can also do and you can just render maps of GIFs or of animations using torque. Okay, it's almost done just for fun. So because I was talking about kind of onomatopoeia and comic books and all of that kind of thing I felt compelled to reference a map so this was kind of a little experiment in SQL to allow you to click on certain polygons and then just have them explode out so the geometry of that polygon is changed in SQL so that it kind of fans and then all of the dynamism of JavaScript and clicks and stuff can be applied to that too and then the CSS is all of the patterns. So the animation looks a little, or the privacy assess looks a little like this. The polygon powder fills like I said they're just uploaded images that are tiled across those polygons fairly seamlessly and then this is the SQL. So it's pretty gross, right? It's a lot of post-just functions in there a lot of transforms, a lot of craziness. It's so much more fun to write neat things than to write, I mean it doesn't look like this normally you would do returns and we'll format it but I didn't. Right, so this is how it works so you just kind of like load it and you can click on different states if you want. This is 1840s US by the way so that's why there's no, the rest of it that's why Wisconsin is like all the way out there you can't see that on this map but. 1840s data. Oh, carto CSS puns so I'm so glad someone mentioned carto or CSS puns because I have a Twitter of carto CSS puns, they're mostly just geopolitical puns but there's some conditionals in there too some specific carto CSS things and then Null Island, display none. Null Island because, hey Geo girl there's also some memes, it's not all CSS. But Null Island if you wanna learn how to do like a Null Island map or learn how to embed it in your base maps, we have a tutorial for it we have this platform that my team works on called Academy and it's like Code Academy but for GIS so we teach you PostGIS, we teach you how to deal with geospatial information in general and then also how to style it in this case this is a lesson in styling an election map like this. So I guess the sum ups of my talk make pop maps aim for awe, some not aweful. And then render with some kind of reflex right because it should be fast, it should be like vision it should be beautiful and you shouldn't have to wait for the tiles to load as you scroll. It's all over, thanks.