Skip to content

Instantly share code, notes, and snippets.

@namessanti
Last active September 16, 2015 19:06
Show Gist options
  • Save namessanti/df14ac5eff3cdc077edc to your computer and use it in GitHub Desktop.
Save namessanti/df14ac5eff3cdc077edc to your computer and use it in GitHub Desktop.
EDU: Data Journalism PH

CartoDB Workshop: Philippines Data Journalists

About Santiago: santiago@cartodb.com @namessanti

maps

Intro To CartoDB

If you're new to CartoDB, making an account is easy. Just click THIS LINK and follow the instructions. These accounts are a level-up from our standard free accounts because we <3 you!

Welcome to your CartoDB Dashboard!

The Dasboard is like the command center for managing your datasets, maps, and account.

Dashboard

The blue bar on top allows you to:

  • Navigate between your maps and datasets
    • Datasets are the backbone of your map visualization. It is important to note that by switching to the datasets view, you can work with the data stored on the CartoDB database directly.
  • Visit our CartoDB gallery
  • Learn new skills on our documentation page.

By clicking the icon on the far right you can:

  • Manage your account settings
  • Visit your public profile
  • View your API key
    • Which will be important for using our APIs and some external tools such as OGR.

image

Time to make our first map!

Let's begin by clicking the green New Map button. Then choosing to Make a map from scratch in the popup.

button

There are many ways to bring data into CartoDB.

import

From this area you can choose to:

  • Create an empty map with no data
  • Browse our ever growing data library
  • Make a map with datasets you have already brought into CartoDB, or
  • Connect a new dataset.
    • This allows you to choose files from your computer, URL, or one of our connectors such as Twitter.

Keep in mind that you can also drag and drop datasets onto your dashboard at anytime and let CartoDB take care of the rest!

<iframe width='100%' height='520' frameborder='0' src='https://team.cartodb.com/u/santiagoa/viz/3971d9f4-24e9-11e5-9574-0e5e07bb5d8a/embed_map' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

####Today we're going to be looking at forest fires in South East Asia.

Let's begin by bringing in NASA's MODIS Active Fire data for the past 7 days in South East Asia by command-clicking (or right clicking) on THIS LINK and selecting to "Copy Link Address".

  • Using a URL allows you to skip bringing data onto your computer as well as allowing users with certain plans to create automatically syncing and real-time maps

The CartoDB Editor

editor

The CartoDB editor makes it easy to style your map, and run analysis or query your data.

The Style Wizard

THe Style Wizard allows you to easily tap into CartoDB's Map design language CartoCSS.

  • Changes you make in the wizard change the CartoCSS.
  • By working with the CartoCSS directly, the styling possibilities are endless!

cartocss

Delete the CartoCSS found in your css tab and try copying and pasting the CartoCSS below to see how your map changes: Note that you must select Torque from the editor prior tpo putting in the CartoCSS

/** torque visualization */

Map {
-torque-frame-count:128;
-torque-animation-duration:5;
-torque-time-attribute:"acq_date";
-torque-aggregation-function:"count(cartodb_id)";
-torque-resolution:2;
-torque-data-aggregation:cumulative;
}

#southeast_asia_7d{
  comp-op: lighter;
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 0;
  marker-line-opacity: 1;
  marker-type: ellipse;
  marker-width: 2;
  marker-fill: #F11810;
}
#southeast_asia_7d[frame-offset=1] {
 marker-width:4;
 marker-fill-opacity:0.45;
}
#southeast_asia_7d[frame-offset=2] {
 marker-width:6;
 marker-fill-opacity:0.225;
}
#southeast_asia_7d[frame-offset=3] {
 marker-width:8;
 marker-fill-opacity:0.15;
}

It should look like this now:

torque

We just created a Torque animation. We could have just as easily created this animation in the Wizard also. Torque allows you to create amazing time based maps like the twitter map I shared above and the one we just made!

####SQL in CartoDB

The cartoDB platform is built on the super-powerful PostgreSQL and PostGIS which make it an incredibly robust tool for working with spatial data!

In the editor itself, it's easy to filter your data sets by using the built in SQL API.

Similar to the Styling Wizard, the 'filters' tab allows you to run queries against your datasets easily, while also making changes to lines of code in the 'SQL' tab.

filters

By making the query above we are filtering by the column 'brightness' and selecting our SQL tab shows us the SQL query being run.

sql

Once you run an SQL statement, CartoDB allows you to to create a new dataset from your selection.

new table

Fun with SQL!

Lets dive a bit more into SQL so we can better understand what's possible.

####Counting points in polygons

Let's bring in a new layer to make more sense of our Active Fires Point data. Click the 'Add Layer' tab in the editor.

add layer

In the popup window select 'Data file' and, same as before, Command-click (or right click) THIS LINK and select "Copy Link Address" then paste the link into the import popup. This will bring in administrative boundaries for South East Asia from the Natural Earth data library

import

we should see our boundary polygons over our Active Fire points. Let's move the polygon data under the point data by dragging and dropping the layer so that the Active Fires layer is on top.

Congratulations on making your first multi-layered map!

What we want to do now is count the active fires for each boundary to determine which areas have had higher concentrations of fires this past week.

I added an empty column called 'p_count' to our polygon dataset. We're going to populate this with instances of fires from our point data.

Copy and paste this SQL statement into your editor:

UPDATE south_east_asia SET p_count = (SELECT count(*) 
FROM southeast_asia_7d 
WHERE ST_Intersects(southeast_asia_7d.the_geom, south_east_asia.the_geom))

Going back to our Wizard, we can now make a Choropleth map of fire instances in the various zones.

###But... Maps have a tendency to distort the truth. Which is why we need to normalize our data by area in order to make a more accurate map. Back in the SQL tab copy and paste this statement:

SELECT the_geom, the_geom_webmercator, cartodb_id, p_count, income_grp, name_long, pop_est, gdp_md_est,
    (p_count / (ST_Area(the_geom::geography)/100000000000))
    as n_count
    FROM south_east_asia

This time we're creating a new column named 'n_count' and running a simple mathmatical function to determine number of fires by area, and attribute that to the polygons.

Let's style our map in the Wizard and see our new found accuracy shine!

####Publishing maps

  • Title & Metadata
  • Adding elements
  • Web vs. Mobile view
  • Annotations
  • Infowindows & legends
  • The publish button

Resources

  1. Map Academy
  2. CartoDB Tutorials
  3. CartoDB Editor Documentation
  4. CartoDB APIs
  5. Community help on StackExchange
  6. CartoDB Map Gallery

###Feedback!

I love to get feedback on our presentations and workshops. Take a moment to let me know what you liked, what you didn't like, or just general thoughts! Go to the feedback form.

That's all! Don't forget to share your work and don't hesitate to email me with questions at santiago@cartodb.com!

#Thank You!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment