2
I Use This!
Very Low Activity

News

Analyzed about 21 hours ago. based on code collected 2 days ago.
Posted over 9 years ago
On the 24th of July, our senior scientist Andrew Hill hosted a webinar to teach how you can use CartoDB to develop geospatial applications. CartoDB for developers was hosted for creators who would like to learn about our APIs, have full SQL ... [More] access to their data directly from their application or the web and power GIS calculations on the fly. If you were not able to attend our webinar or want to go through it again, here is the link to the presentation and the recording: CartoDB for Developers - Webinar from vizzuality on Vimeo. Feel free to share it with your colleagues and friends. And remember you can contact [email protected] if you have any question. To learn more about CartoDB stay on alert for more webinars and sign up for your free account. [Less]
Posted over 9 years ago
CartoDB is the easiest way to create amazing maps with your data. The interface is creating a new standard for user experience in the mapping and data analytics community. This allows us to work with users from diverse backgrounds to create maps. ... [More] From hobbyists to educators, researchers, and general business, we are enabling a new generation of mappers to work with their data. We are excited to announce the release of our CartoDB Enterprise offering: Just like we transformed the way that people make their own maps online, CartoDB is now going to transform the way you work with data as a team or an organization. CartoDB Enterprise brings the power of a consumer web service together with a secure and scalable environment for collaboration. This is a new type of GIS. When you start using the CartoDB Editor in one of our new multi-user environments, these are some of the new capabilities: Collaboration We want to enable collaborative map creation. This can mean sharing datasets with specific team members or visualizations with your entire organization. It can mean read-only access to some people or write access for you team members. Imagine the possibilities when you can quickly transfer datasets across departments from sales to outreach to design, all with the click of a button. No limits Enterprise accounts allow you to grow way past the 1GB limit of standard CartoDB accounts. Adding more storage space is simple, so you can grow from 5 to 500 employees. CartoDB is ready to scale. Easy control and administration Consolidated billing (only one bill for your CartoDB usage), easy access and control of resources (give different quotas for different users in your organization), and easy provision of resources (need accounts for 15 new users? Just two clicks and they’re set-up). VIP support and professional services VIP support, training, and professional services will have you up and running fast. On-premise and customizations Do you need CartoDB installed in your private cloud behind your firewall? We’ve got your back. We can deploy CartoDB in any environment and provide custom SLAs and specific terms & conditions. Database connectors Already loaded with tons of data in your corporate databases that needs to be analysed? Worry not. connect CartoDB to your existing databases, or use our easy drag and drop import. In addition to the seamless functionality of the CartoDB Editor and the CartoDB Platform, we believe that a supportive, secure cloud environment is essential to the success of every organization. Select groups are already using CartoDB Enterprise, and we’ll be rolling it out for more in the coming weeks. Interested? Contact us to sign-up, and start re-imagining your cloud experience. [Less]
Posted over 9 years ago
We welcome Timo Grossenbacher to our Map of The Week. He’s currently working as Interactive News Developer at the Swiss daily newspaper Tages-Anzeiger, based in Zurich. Tages-Anzeiger published a couple of week ago their newest data driven ... [More] journalism project built with CartoDB: An interactive map of spatial distribution of Swiss soccer fans. The map shows where the fans of Swiss Football League soccer clubs reside, ready for the start of this year’s “Super League” tournament. Tages-Anzeiger published a couple of weeks ago their newest data driven journalism project built with CartoDB: An interactive map of spatial distribution of Swiss soccer fans. The map shows where the fans of Swiss Football League soccer clubs reside, ready for the start of this year’s “Super League” tournament. This blog post summarizes the kind of data utilized by the developers, how they made use of the CartoDB Editor to style the map and how they built a full-blown Javascript application on top of the CartoDB.js API. Data collection and pre-processing It all started when one of the journalists I work with had the idea to ask Swiss soccer clubs for data on where their fans live. Surprisingly, at least to me, most of the clubs store detailed data about the holders of their season tickets (which allow those to watch all the games in the club’s home stadium). So my colleague tediously phoned each of the ten top-flight clubs and got provided with spreadsheets showing the amount of season ticket holders per zip code for as many as 9 clubs (one club would not give us the data because of data privacy concerns, although it is technically impossible to reidentify people based on such data). Another colleague pre-processed the data, and specifically, matched the zip codes with actual municipalities (as the map shows municipality borders, not zip code areas). Data classification and styling He then provided me, the developer of the map, with a CSV showing the amount of ticket holders for each of the somewhat 2,400 municipalities of Switzerland, which I imported into the CartoDB editor. I quickly merged it with the most recent polygon boundaries of the municipalities, available from the Swiss Federal Office of Topography. As I didn’t need the polygons of foreign countries and as some cantons (Swiss institutional units, something like provinces) needed to be excluded because we didn’t have data on their “native” Soccer clubs, I used the following query to only show the relevant polygons on the map: SELECT * FROM sg_2014_07_fussballfans_merge WHERE canton IN ('BE','VD','AG','ZH','GR','SO','LU','BL','SG','TG','JU','GE','NE','SZ','SH','AR','UR','ZG','NW','AI','OW','BS','GL') AND kt IS NOT NULL Concerning the styling, the final map has two different modes. One shows all the 9 clubs together, and the municipalities are colored according to the dominant one (the one selling the most season tickets). In the other mode, only one club, which the user can choose, is shown. For the first mode, the following CSS was set in the CartoDB editor: /** category visualization */ #sg_2014_07_fussballfans_merge { polygon-opacity: 1; line-color: #FFFFFF; line-width: 0.5; line-opacity: 1; } #sg_2014_07_fussballfans_merge[best="keine"] { polygon-fill: #FFFFFF; } #sg_2014_07_fussballfans_merge[best="FCB"] { polygon-fill: #db4140; } #sg_2014_07_fussballfans_merge[best="YB"] { polygon-fill: #FFCC00; } #sg_2014_07_fussballfans_merge[best="FCLS"] { polygon-fill: #b0764e; } #sg_2014_07_fussballfans_merge[best="FCSG"] { polygon-fill: #4ab969; } #sg_2014_07_fussballfans_merge[best="FCL"] { polygon-fill: #0091d0; } #sg_2014_07_fussballfans_merge[best="FCZ"] { polygon-fill: #9f6eaf; } #sg_2014_07_fussballfans_merge[best="unentschieden"] { polygon-fill: #a7a9ac; } #sg_2014_07_fussballfans_merge[best="GCZ"] { polygon-fill: #f7941d; } #sg_2014_07_fussballfans_merge[best="FCT"] { polygon-fill: #f49ac1; } #sg_2014_07_fussballfans_merge[best="FCA"]{ polygon-fill: #163479; } #sg_2014_07_fussballfans_merge [ dom2 <= 79.4726803182168] { polygon-opacity: 1; } #sg_2014_07_fussballfans_merge [ dom2 <= 9.03346994535519] { polygon-opacity: 0.8; } #sg_2014_07_fussballfans_merge [ dom2 <= 3.69344413665743] { polygon-opacity: 0.6; } #sg_2014_07_fussballfans_merge [ dom2 <= 1.96850393700787] { polygon-opacity: 0.4; } #sg_2014_07_fussballfans_merge [ dom2 <= 0.931181269953885] { polygon-opacity: 0.2; } #sg_2014_07_fussballfans_merge[best="keine"] { polygon-opacity: 0; } As you can see, the polygons’ opacity is set according to a variable called dom2, which basically takes into consideration the size of the municipality (in terms of inhabitants) and the percentage of tickets the dominant clubs has sold. We classified this variable into five classes using the CartoDB editor’s quantile method, and manipulated the generated CartoCSS. Other than that, we took print-friendly colors (as the map also appeared in the printed edition) from Colorbrewer.org to visualize the dominant club. The challenge here was to pick a color for each club so that “neighboring” clubs are easily distinguishable. For the second mode, I also used the editor’s ability to calculate quantiles of a variable, but only imported the generated CSS into the code of our application. In fact, our frontend does not actually switch between layers (of the CartoDB visualization) but updates the CSS as soon as somebody chooses a club. Building the application As mentioned before, I used the CartoDB.js API to build a full-blown standalone app. To initialize the map, only a few lines of code were necessary: var initializeMap = function() { // map initialization cartodb.createVis('map', VIZAPI, { shareable: false, title: false, description: false, search: true, tiles_loader: false, center_lat: 47, center_lon: 8.5, zoom: (isMobile ? 7 : 9), cartodb_logo: true }) .done(function(vis, layers) { // remove spinner $('#map .spinner').remove(); // layer 0 is the base layer, layer 1 is cartodb layer // setInteraction is disabled by default window.layers = layers; window.vis = vis; layers[1].setInteraction(true); // layers[1] is "all" layers[1].on('featureOver', function(e, pos, latlng, data) { if (isMobile) { updateClubInfo(data.cartodb_id); } }); layers[1].on('featureClick', function(e, latlng, pos, data) { if (isMobile) { updateClubInfo(data.cartodb_id); } else { // open popup showMuniPopup(pos, data.cartodb_id); } }); // save original map css clubs['all'].css = layers[1].getSubLayer(0).getCartoCSS(); // custom google map styles vis.getNativeMap().setOptions(gmapstyles); // take search and append it to panelBody if (!isMobile) { var searchBox = $('.cartodb-searchbox').detach(); $('#ui .panel-body').append(searchBox); } $('.cartodb-searchbox').find('input.text').attr('placeholder', 'Nach Gemeinde suchen'); }) .error(function(err) { console.log(err); }); }; As you can see, in line 39, the original CSS (the one that is used when all clubs are displayed together) is stored in a variable so it can be restored whenever the user switches back from the single-club-mode to the overview (see below for further explanation). From line 24 to line 36 I also defined custom actions to be taken whenever the user hovers over a municipality or clicks on it. Based on whether he or she uses a mobile device, different actions are taken -mobile detection and other responsiveness goodness are provided by Bootstrap-. In order to filter the data to be displayed upon these interactions, I give the respective functions the CartoDB-ID of the element that was interacted with. In line 42, by the way, I set a custom Google Map style which is very light and does hardly interfere with the different transparency values of the CartoDB layer. As a last step in the done-callback, the search box is taken (as it does not exist prior to map loading) and “moved” to the custom UI panel I added (not visible in mobile mode). Speaking of the data that needs to be displayed in the tooltip (“featureClick”) or upon touch on mobile devices (“featureOver”), i.e., information about each club and each municipality: As I am only provided with the CartoDB-ID in the callbacks I specify to these events and as I didn’t specify info windows or anything in the editor, I needed to separately load the data from CartoDB, using the SQL API: var loadData = function() { var sql = new cartodb.SQL({ user: 'wnstnsmth' }); var overallDataPromise = sql.execute("SELECT cartodb_id,fca,fcb,fcls,fcl,fcsg,fct,fcz,gcz,yb,name,total,kt,einwohner FROM sg_2014_07_fussballfans_merge where kt is not null and kt != 'VS' and kt != 'FL' and kt != 'TI'"); var teamDataPromise = sql.execute("SELECT ct,gj,mt,mw,n,sk,stgr,team,zs FROM s_2014_07_vereine ORDER by team ASC"); // CartoDB promises need to be transformed var jQueryPromise1 = $.Deferred(); var jQueryPromise2 = $.Deferred(); teamDataPromise .done(function(data) { var teams = data.rows; window.teamData = {}; $.each(teams, function(index, item) { window.teamData[item.team.toLowerCase()] = item; }) jQueryPromise1.resolve(); }) .error(function(errors) { console.log("errors:" + errors); jQueryPromise1.reject(); }); overallDataPromise .done(function(data) { window.allData = data.rows; jQueryPromise2.resolve(); }) .error(function(errors) { console.log("errors:" + errors); jQueryPromise2.reject(); }); $.when(jQueryPromise1, jQueryPromise2).done(function() { $(window).trigger('dataLoaded'); }); } As you can see, I specified two SQL calls, one for the season ticket counts of each club in each municipality, and one for general information about each club (such as name, overall tickets sold, stadium capacity), etc. The interesting part in this code snippet is that I have to wait for both calls to be done, so I transformed the promises given by both calls into jQuery promises, which in turn allow me to specify a callback that should be executed only when both SQL calls have succeeded (line 38). Unfortunately, I didn’t know what kind of promises are used by CartoDB, but jQuery was readily available anyway (with Bootstrap). Now, what happens exactly whenever a user picks a club? As mentioned above, nothing else than the CartoCSS is changed (for this reason, I needed to store the original CSS: var updateUi = function() { // update carto css window.layers[1].getSubLayer(0).setCartoCSS(clubs[window.currentTeam].css); // clean ui panel // ... // update ui panel // ... } }; In this function, the only interesting part is line 3, where I specify the CSS to be applied according to window.currentTeam, which is set upon changing the club selector. As I said above, the clubs’ individual CSS styles are hardcoded into the application, like such: clubs['gcz'].css = '#fussballfans_merge { polygon-opacity: 0; line-color: #FFFFFF; line-width: 0.5; line-opacity: 1; polygon-fill: #f7941d; } #fussballfans_merge [ dom2_gcz <= 32.3844125609574] { polygon-opacity: 0.9;} #fussballfans_merge [ dom2_gcz <= 0.789733464955576] { polygon-opacity: 0.8;} #fussballfans_merge [ dom2_gcz <= 0.368822227686255] { polygon-opacity: 0.6;} #fussballfans_merge [ dom2_gcz <= 0.123331597563727] { polygon-opacity: 0.4;} #fussballfans_merge [ dom2_gcz <= 0.0289901288611228] { polygon-opacity: 0.2;} #fussballfans_merge [ dom2_gcz = 0] { polygon-opacity: 0;} #fussballfans_merge[best="keine"] { polygon-opacity: 0; }' Which is just the CSS copied from the editor. This might not be the most maintainable and elegant architecture, but did the best job for my use case, as it was, in my opinion, easier than specifying a separate layer for each club in the editor. Summary In this project, CartoDB was a very helpful foundation for our application, not only in terms of its API but also because we could easily style the municipality polygons in the editor. This helped us in deciding what colors to use for the clubs, and in generating the opacity classes with CartoDB’s overlay wizards. Check our other Maps of the Week, and create your free CartoDB.com account to start building your own map-based projects. [Less]
Posted over 9 years ago
Welcome Sarah Ryley to our Map of the Week series. Sarah is the data projects editor at the New York Daily News, which has the second-largest newspaper website in the United States. Crime reporting is the bread and butter of the Daily News, so ... [More] Sarah has been focused on making crime data interactive and accessible to the publication’s millions of readers. The Daily News’ transit reporter Pete Donohue recently received a Freedom of Information Law request with police data on all felonies and misdemeanors over a roughly five-year period, from July 1, 2008 to Aug. 4, 2013. The data included the time, location, category and crime classification of 48,749 incidents. Sarah developed an interactive web package that allow readers to explore this data in several different ways -by station, crime type, hour, day, month and quarter- while also uncovering trends such as the hours when the most crimes occur and the crowded train line that is the source of half the system’s groping complaints. She also calculated a station-by-station crime rate by merging the dataset with the Metropolitan Transportation Authority’s (MTA) ridership statistics. The CartoDB map displays both the rate and total of various crime categories by station. Prepping the data The raw data, which can be downloaded here, needed a lot of work before I could load it into CartoDB. First, I removed all records after June 30, 2013 so we would have a clean five-year period. The train lines in the New York City Police Department data are based on an old map, possibly this one from 1998, when an S train stopped at Lexington Avenue and Roosevelt Island, and the Q ran along the B/D line in Manhattan. So I did a “change alias” on many line and station dimensions to match them up with the current system. I did this manually because many of the routes half-matched the current ones and figuring out the rest took some research. The locations are by post, not station. A post is roughly equivalent to a platform, so a multi-platform station like Union Square has multiple posts, and in some cases an additional post if there is a district office located in the station. I did these groupings based on how the MTA does them for the purpose of calculating ridership. Then there are 123 crime classifications. I grouped these dimensions based on New York State Penal Law. Then I was ready to do a lot of the more granular queries for the story and other two interactives. For the map, I made a separate set of broader groupings -violent crimes, property crimes, drug crimes, weapon possession, and misdemeanor sex crimes-. I then queried the number of records for each broader group by station, and exported the results into a spreadsheet. I then joined the exported data with annual ridership figures and station entrance geocodes from the MTA’s website. Calculating the rate Once I had all of this in one spreadsheet, I could begin to calculate a rate. I consulted several academics on the best methodology, and finally decided on a calculation per 100,000 trips. A few things to consider: -MTA Ridership data is a count of the number of people swiping into a station. That doesn’t include transfers at the station, which the MTA has no good way of tracking, or people exiting the station. -We decided against using the term “riders” to avoid giving the impression we were talking about a population of individuals, versus the traffic in a station. -Even though the lack of transfer figures obviously skews the data for express and transfer stations, the academics I consulted still agreed it was a worthwhile and interesting exercise, as long as the deficiencies in the analysis were clearly noted. And there are so many stations where riders can transfer between lines, it somewhat evens out the analysis. Further, a city’s crime rate is based on its resident population, but does not include commuters or tourists, even though they can also become the victim or perpetrator of a crime. So, rates are rarely a perfect science. -The station with the highest crime rate, Broad Channel, is a required transfer station for those continuing on to the last four stops on a branch of the A train, but not many people actually swipe into the station (only an average of 224 per day). So the lack of transfers in the analysis has a significant impact. But even when factoring in the total ridership on the four stops where riders must use Broad Channel as a transfer during non-peak hours, the station still has one of the highest crime rates in the system. -Interestingly, most of the stations with the highest crime rate are not express or transfer stops, indicating that overall you are MOST LIKELY to encounter crime in low-volume or far-flung stations. This again contradicts the conventional wisdom that had long been held by many academics, that packed stations were the most dangerous, before some studies like this began debunking that myth. You can see on the map that, for all crime, the stations in the heart of Manhattan have among the lowest rates per 100,000 trips, and that’s not even taking into account transfer traffic. -I also found it interesting that, for the rates misdemeanor sex crimes, violent crime, and to a certain extent property crime are more evenly distributed throughout the system. But drug crimes and weapon possession incidents -crimes that are more likely to generate reports from police stops versus straphanger reports - have rates more weighted in low-income minority communities. CartoDB time! Finally, I had a table to import into CartoDB, with a column for each of the rate and total categories. I had an ambitious vision for this map given my very novice status as a coder, so here I need to extend my bottomless thanks to Michael Keller from Al Jazeera America and Matt Clark from Newsday for their help in making this happen. I wanted a mode change to switch between the total and rate, and buttons to switch between crime categories. Here is a link to a full tutorial on how to make buttons that toggle between map views, which would not include a mode change. To solve the double button issue, Michael made LayerActions into an object that under each of the six crime categories has a key called “rate” and another called “total.” The variable “mode” tells it which function to use. This sets the active filter (all crime) and mode (total), and allows you to click on a different mode and make that the current mode: https://gist.github.com/sarahryley/c23bfb202b979b6eda67 This sets the query for the first layer (from the crime_total column): https://gist.github.com/sarahryley/6dd210b5ccdc4eddf175 And this is the function for the buttons and the mode, which is written so that once it finds the right function group, it will pick the correct function and execute for that mode: https://gist.github.com/sarahryley/42da4ae6f3dffe189b94 This assigns IDs and labels for the buttons and mode: https://gist.github.com/sarahryley/bf9c86043e6d5f5a88be And here is the code that creates the style for the buttons and mode. (This is without all the adjustments made by our front-end architect, Wissam Abayad. All of his code can be found in the project’s GitHub repository). https://gist.github.com/sarahryley/ce81adbf3ac58e8a9fb0 I also wanted a fixed infobox because it had too much information to float in the page. This script sets the position at the top right: https://gist.github.com/sarahryley/e17e103a521535303dde And this style sets it 175 px from the top: https://gist.github.com/https://gist.github.com/sarahryley/ae7f85a5f63e2da0a88a I also needed to disable the scroll wheel so the reader doesn’t get “stuck” when trying to scroll down the story: https://gist.github.com/https://gist.github.com/sarahryley/15c1801ec1d7f1871951 A few other notes: I set a consistent scale range in the marker widths across all six categories, rather than the default CartoDB setting that changes the scale range based on the range of numbers in each category. I felt this was important because otherwise, the viewer could erroneously perceive a station as having a higher number of sex crimes than violent crimes, for example, because the scales are set differently. If the marker width increments are the same, than the viewer can also see greater than or less than across categories. Michael also made the point that the markers should vary in size based on the area, not the marker width (diameter), so I created a formula that would come up with a marker width based on an area proportionate to the increase or decrease in rate or total. You can signup for free to learn how to create maps like this in CartoDB.com. [Less]
Posted over 9 years ago
Welcome Sarah Ryley to our Map of the Week series. Sarah is the data projects editor at the New York Daily News, which has the second-largest newspaper website in the United States. Crime reporting is the bread and butter of the Daily News, so ... [More] Sarah has been focused on making crime data interactive and accessible to the publication’s millions of readers. The Daily News’ transit reporter Pete Donohue recently received a Freedom of Information Law request with police data on all felonies and misdemeanors over a roughly five-year period, from July 1, 2008 to Aug. 4, 2013. The data included the time, location, category and crime classification of 48,749 incidents. Sarah developed an interactive web package that allow readers to explore this data in several different ways -by station, crime type, hour, day, month and quarter- while also uncovering trends such as the hours when the most crimes occur and the crowded train line that is the source of half the system’s groping complaints. She also calculated a station-by-station crime rate by merging the dataset with the Metropolitan Transportation Authority’s (MTA) ridership statistics. The CartoDB map displays both the rate and total of various crime categories by station. Prepping the data The raw data, which can be downloaded here, needed a lot of work before I could load it into CartoDB. First, I removed all records after June 30, 2013 so we would have a clean five-year period. The train lines in the New York City Police Department data are based on an old map, possibly this one from 1998, when an S train stopped at Lexington Avenue and Roosevelt Island, and the Q ran along the B/D line in Manhattan. So I did a “change alias” on many line and station dimensions to match them up with the current system. I did this manually because many of the routes half-matched the current ones and figuring out the rest took some research. The locations are by post, not station. A post is roughly equivalent to a platform, so a multi-platform station like Union Square has multiple posts, and in some cases an additional post if there is a district office located in the station. I did these groupings based on how the MTA does them for the purpose of calculating ridership. Then there are 123 crime classifications. I grouped these dimensions based on New York State Penal Law. Then I was ready to do a lot of the more granular queries for the story and other two interactives. For the map, I made a separate set of broader groupings -violent crimes, property crimes, drug crimes, weapon possession, and misdemeanor sex crimes-. I then queried the number of records for each broader group by station, and exported the results into a spreadsheet. I then joined the exported data with annual ridership figures and station entrance geocodes from the MTA’s website. Calculating the rate Once I had all of this in one spreadsheet, I could begin to calculate a rate. I consulted several academics on the best methodology, and finally decided on a calculation per 100,000 trips. A few things to consider: MTA Ridership data is a count of the number of people swiping into a station. That doesn’t include transfers at the station, which the MTA has no good way of tracking, or people exiting the station. We decided against using the term “riders” to avoid giving the impression we were talking about a population of individuals, versus the traffic in a station. Even though the lack of transfer figures obviously skews the data for express and transfer stations, the academics I consulted still agreed it was a worthwhile and interesting exercise, as long as the deficiencies in the analysis were clearly noted. And there are so many stations where riders can transfer between lines, it somewhat evens out the analysis. Further, a city’s crime rate is based on its resident population, but does not include commuters or tourists, even though they can also become the victim or perpetrator of a crime. So, rates are rarely a perfect science. The station with the highest crime rate, Broad Channel, is a required transfer station for those continuing on to the last four stops on a branch of the A train, but not many people actually swipe into the station (only an average of 224 per day). So the lack of transfers in the analysis has a significant impact. But even when factoring in the total ridership on the four stops where riders must use Broad Channel as a transfer during non-peak hours, the station still has one of the highest crime rates in the system. Interestingly, most of the stations with the highest crime rate are not express or transfer stops, indicating that overall you are MOST LIKELY to encounter crime in low-volume or far-flung stations. This again contradicts the conventional wisdom that had long been held by many academics, that packed stations were the most dangerous, before some studies like this began debunking that myth. You can see on the map that, for all crime, the stations in the heart of Manhattan have among the lowest rates per 100,000 trips, and that’s not even taking into account transfer traffic. I also found it interesting that, for the rates misdemeanor sex crimes, violent crime, and to a certain extent property crime are more evenly distributed throughout the system. But drug crimes and weapon possession incidents -crimes that are more likely to generate reports from police stops versus straphanger reports - have rates more weighted in low-income minority communities. CartoDB time! Finally, I had a table to import into CartoDB, with a column for each of the rate and total categories. I had an ambitious vision for this map given my very novice status as a coder, so here I need to extend my bottomless thanks to Michael Keller from Al Jazeera America and Matt Clark from Newsday for their help in making this happen. I wanted a mode change to switch between the total and rate, and buttons to switch between crime categories. Here is a link to a full tutorial on how to make buttons that toggle between map views, which would not include a mode change. To solve the double button issue, Michael made LayerActions into an object that under each of the six crime categories has a key called “rate” and another called “total.” The variable “mode” tells it which function to use. var LayerActions = { crime: { total: function() { sublayers[0].set({ sql: "SELECT * FROM mtacartodb_1", cartocss: "#mtacartodb_1{marker-fill-opacity:0.9;marker-line-color:#960916;marker-line-width:1;marker-line-opacity:1;marker-placement:point;marker-multi-policy:largest;marker-type:ellipse;marker-fill:#eb1024;marker-allow-overlap:true;marker-clip:false;}#mtacartodb_1 [ crime_total <= 1810] { marker-width: 40.6;} ... #mtacartodb_1 [ crime_total <= 5] { marker-width: 2.1;}" }); return true; }, rate: function() { sublayers[0].set({ sql: "SELECT * FROM mtacartodb_1", cartocss: "#mtacartodb_1{marker-fill-opacity:0.9;marker-line-color:#960916;marker-line-width:1;marker-line-opacity:1;marker-placement:point;marker-multi-policy:largest;marker-type:ellipse;marker-fill:#eb1024;marker-allow-overlap:true;marker-clip:false;}#mtacartodb_1 [ crime_rate <= 27.4] { marker-width: 50;} ... #mtacartodb_1 [ crime_rate <= 0.0] { marker-width: 0;} "}); return true; } } } This sets the active filter (all crime) and mode (total), and allows you to click on a different mode and make that the current mode: <script> var map; var active_filter = 'crime'; var mode = 'total'; function init() { $('#mode-change input').on('change', function(){ var radio_btn_value = $(this).val(); // If the mode you clicked on is not the current mode, then make it the current mode and referesh the map if (mode != radio_btn_value) { mode = radio_btn_value; console.log(active_filter, mode) LayerActions[active_filter][mode](); } }); } This sets the query for the first layer (from the crime_total column): cartodb.createLayer(map, layerUrl) .addTo(map) .on('done', function(layer) { var subLayerOptions = { sql: "SELECT * FROM mtacartodb_1", cartocss: "#mtacartodb_1{marker-fill-opacity:0.9;marker-line-color:#960916;marker-line-width:1;marker-line-opacity:1;marker-placement:point;marker-multi-policy:largest;marker-type:ellipse;marker-fill:#eb1024;marker-allow-overlap:true;marker-clip:false;}#mtacartodb_1 [ crime_total <= 1810] { marker-width: 40.6;} ... #mtacartodb_1 [ crime_total <= 5] { marker-width: 2.1;}" } }); And this is the function for the buttons and the mode, which is written so that once it finds the right function group, it will pick the correct function and execute for that mode: $('.button').click(function() { $('.button').removeClass('selected'); $(this).addClass('selected'); console.log($(this).attr('id'), mode); active_filter = $(this).attr('id'); LayerActions[active_filter][mode](); }); This assigns IDs and labels for the buttons and mode: <body onload="init()"> <div id='map'></div> <div id='menu'> <div id="mode-change"> <label><input type="radio" name="mode" value="total" checked/> <strong>Total incidents</strong></label> <label><input type="radio" name="mode" value="rate"/><strong>Rate per 100,000 trips</strong></label> </div> <a href="#violent" id="violent" class="button violent">VIOLENT CRIME</a> <a href="#sex" id="sex" class="button sex">MISD. SEX CRIMES</a> <a href="#crime" id="crime" class="button crimet selected">ALL<br> CRIME</a> <a href="#weapons" id="weapons" class="button weapons">WEAPON POSSESSION</a> <a href="#drug" id="drug" class="button drug">DRUG CRIMES</a> <a href="#property" id="property" class="button property">PROPERTY CRIMES</a> And here is the code that creates the style for the buttons and mode. (This is without all the adjustments made by our front-end architect, Wissam Abayad. All of his code can be found in the project’s GitHub repository). #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10; } #menu a { margin: 15px 10px 0 0; float: right; vertical-align: baseline; width: 70px; padding: 10px; text-align: center; font: bold 11px "Helvetica",Arial; line-height: normal; color: #555; border-radius: 4px; border: 1px solid #777777; background: #ffffff; text-decoration: none; cursor: pointer; } #menu a.selected, #menu a:hover { color: #F84F40; } #mode-change{ text-align: right; color: #fff; } I also wanted a fixed infobox because it had too much information to float in the page. This script sets the position at the top right: var infobox = new cdb.geo.ui.InfoBox({ width: 255, position: 'top|right', layer: sublayer, template: '<p> </p>' }); $("body").append(infobox.render().el); And this style sets it 175 px from the top: div.cartodb-infobox { display: none; top: 175px !important; font: 13px "Helvetica"; } I also needed to disable the scroll wheel so the reader doesn’t get “stuck” when trying to scroll down the story: map.scrollWheelZoom.disable(); A few other notes: I set a consistent scale range in the marker widths across all six categories, rather than the default CartoDB setting that changes the scale range based on the range of numbers in each category. I felt this was important because otherwise, the viewer could erroneously perceive a station as having a higher number of sex crimes than violent crimes, for example, because the scales are set differently. If the marker width increments are the same, than the viewer can also see greater than or less than across categories. Michael also made the point that the markers should vary in size based on the area, not the marker width (diameter), so I created a formula that would come up with a marker width based on an area proportionate to the increase or decrease in rate or total. You can signup for free to learn how to create maps like this in CartoDB.com. [Less]
Posted over 9 years ago
More Odyssey.js stories keep popping up from different parts of the world. Here are some recent examples: Germany’s way through 2014 Fifa World Cup Riccardo Klinger made this map after the soccer World Cup final. It shows the location of ... [More] each match played by this year’s World Cup Winners Germany starting from the first match against the Portuguese team at Arena Fonte Nova to the final versus Argentina in The Maracana stadium. Financial Times: A world without water This is a perfect example of how Odyssey.js can be part of an investigative journalism story. The Financial Times gathered data on 78 corporate water projects around the globe and they used Odyssey.js to show how and where those projects have spent billions of dollars. The story of James Rodriguez This Odyssey.js is a summary of James Rodriguez’s story. Karla Jaramillo used the tool to tell all about the colombian football player childhood and his career. Check out this blog post to know more about the story making process. Check out more Odyssey.js examples, and go to Odyssey.js to start creating your own map-based interactive stories. Have you done one already? Share it with us on Twitter: #Odyssey.js. [Less]
Posted over 9 years ago
Cash Atlas is an interactive global mapping tool aiming to visually represent cash transfer programmes at a global level, envisioned to be an advocacy and learning tool. Cash Atlas lets the public understand how, when, where and for what purpose ... [More] cash programmes are being used. According to the Global Humanitarian Assistance report, “between 2008 and 2011 humanitarian spending on cash and voucher-based programming ranged between US$45 million and US$188 million”. Cash Atlas is a Cash Learning Partnership (CaLP), supported by American Red Cross, ECHO and USAID/OFDA, and developed by Simbiotica, a CartoDB partner. The data used to create this map was shared by the organizations involved in the programmes. The main aim of the project is to improve the quality of emergency cash transfer and voucher programming across the humanitarian sector. You can browse data by regions, countries, organisations, sectors, donors… The information comes from more than 500 projects and have impact in almost 20M beneficiaries. The CartoDB Platform is the perfect backend for storing and mapping this kind of data. The different APIs lets developers manipulate data with ease, build the maps, show the data dynamically on maps, draw polygons, infowindows, labels… This is another neat example of what type of projects CartoDB Partners are developing using our tech. The network of CartoDB Partners keeps growing, and they are developing more and more interesting projects using CartoDB. Cash Atlas or NGO Aid Map, both developed by our partner Simbiótica, are examples of it. Take a look of our CartoDB Partners page for more information and apply to be a CartoDB Partner. [Less]
Posted over 9 years ago
The CartoDB Platform Many people come to CartoDB and see the Editor, our simple and easy to use tool that runs in your browser and helps you publish beautiful maps. Fewer of them discover the full range of capabilities CartoDB offers when you dig ... [More] into SQL or the Platform capabilities. The CartoDB Platform is a collection of APIs that allow you to perform data manipulation, map creation, and data analysis all without ever touching the Editor. One of the most appealing aspects of the Platform is that you can access it from any language you like. The CartoDB APIs are simple to use and even let you run raw SQL queries, no idiosyncratic API endpoints or methods to learn. Just you, your data, and all the power of the CartoDB service. If you take a look at our Gallery, you will find a nice mix of maps created primarily in the Editor and others that make use of the Platform to integrate CartoDB’s capabilities into complete web applications. An Example in Python A few weeks ago I was asked how to push new data to CartoDB and later replace that data with a new version. There are a few ways to do this using CartoDB. One of my favorites is using our Sync Tables and a spreadsheet on Dropbox, but that is something we’ve covered in other posts. This user needed to be able to control the updates from their own end, without using our Editor at all. I saw this as a nice opportunity to refresh my knowledge of all our APIs. In about 2 hours of coding and a little bit of debugging I was able to put together a custom command line tool written in Python. While the library isn’t a perfect example of Python code, it does demonstrate how quickly you can integrate your CartoDB account into any language you choose. I kept it very simple and linear so you can follow the methods I use to perform some key functions on CartoDB. For example, uploading a new file to CartoDB is as simple as: cmd python cartodb-utils.py import -f -k -u If you are creating examples in other languages, we’d love to hear about them. Drop us an email or shoot us a Tweet. If you have any questions about using CartoDB from Python or any other language, post your questions over on the GIS StackExchange community. [Less]
Posted over 9 years ago
The CartoDB Platform Many people come to CartoDB and see the Editor, our simple and easy to use tool that runs in your browser and helps you publish beautiful maps. Fewer of them discover the full range of capabilities CartoDB offers when you dig ... [More] into SQL or the Platform capabilities. The CartoDB Platform is a collection of APIs that allow you to perform data manipulation, map creation, and data analysis all without ever touching the Editor. One of the most appealing aspects of the Platform is that you can access it from any language you like. The CartoDB APIs are simple to use and even let you run raw SQL queries, no idiosyncratic API endpoints or methods to learn. Just you, your data, and all the power of the CartoDB service. If you take a look at our Gallery, you will find a nice mix of maps created primarily in the Editor and others that make use of the Platform to integrate CartoDB’s capabilities into complete web applications. An Example in Python A few weeks ago I was asked how to push new data to CartoDB and later replace that data with a new version. There are a few ways to do this using CartoDB. One of my favorites is using our Sync Tables and a spreadsheet on Dropbox, but that is something we’ve covered in other posts. This user needed to be able to control the updates from their own end, without using our Editor at all. I saw this as a nice opportunity to refresh my knowledge of all our APIs. In about 2 hours of coding and a little bit of debugging I was able to put together a custom command line tool written in Python. While the library isn’t a perfect example of Python code, it does demonstrate how quickly you can integrate your CartoDB account into any language you choose. I kept it very simple and linear so you can follow the methods I use to perform some key functions on CartoDB. For example, uploading a new file to CartoDB is as simple as: https://gist.github.com/Kathypennacchio/d80c739c12e35242bd88 If you are creating examples in other languages, we’d love to hear about them. Drop us an email or shoot us a Tweet. If you have any questions about using CartoDB from Python or any other language, post your questions over on the GIS StackExchange community. [Less]
Posted over 9 years ago
The maps we have been seeing come from you lately have been amazing. We are seeing incredible projects like the Urban Reviewer, insanely popular Twitter maps, and the NGO Aid Map coming online everyday it seems. We love it and couldn’t be more ... [More] grateful for such an awesome and inspiring community of users. Now, we want to make it easier for new users to see the full potential of CartoDB in your projects. Today we are announcing a 10x increase in space for free accounts! That’s 50MBs to start mapping for free! These changes are immediate, so if you are using a free account, you should be able to login and see the update right now. We think that our free accounts will go a long way for journalists, NGOs, and businesses to start seeing data come to life right away. In just our free account, you get access to all the simplicity of data uploads, styling wizards, Torque and our new Odyssey.js tool. If you know users that have been reluctant to dive into CartoDB, now is a great opportunity to get them started. If you haven’t already, sign-up today. Don’t forget, CartoDB grows with you, so if 50MB still isn’t enough, we’ve got accounts that will work. In addition to higher quotas, paid accounts will still bring you increased privacy controls, removable branding, increased geocoding, data solutions such as Twitter maps and more! Get in touch if you want to know how to make use of bigger accounts on our service. For now though, enjoy our greatly expanded free account and spread the word! Be sure to let us know what you build. We love your Tweets! (If you already had a CartoDB account, your quota has been upgraded, so take this opportunity to keep creating visualizations) Happy mapping! [Less]