Skip to content
Quyen Tran edited this page Oct 15, 2015 · 51 revisions

Broward Elected Officials CartoDB Tutorial

Broward cities

Contents

Steps

1. Creating a CartoDB account

  • Go to https://cartodb.com
  • Find and click the "Sign Up" button CartoDB Sign Up
  • The easiest option is to sign up with your Google account
  • Once you have signed in, you will see the dashboard without any created maps CartoDB dashboard

2. Downloading the data

3. Creating a new CartoDB map

  • On the CartoDB dashboard, click "New Map" CartoDB dashboard new map
  • Choose to "Connect dataset", then ensure "Data file" is selected, then click "Browse" New map choose dataset

4. Uploading the data

  • Select the zip file downloaded earlier File chooser zip file
  • Click "Connect Dataset" to upload the zip file. It is optional to "Let CartoDB automatically guess the data type and content". Connect dataset
  • Wait a minute for the dataset to be uploaded. Once finished the dashboard will show the created map Uploaded dataset

5. Viewing the map

  • Click on the map to view it. An initial map is shown. Initial map
  • Click on the "Data View" tab to see the raw data of each city Data view

6. Use default visualizations

  • Go back to the "Map View" and click the "wizards" menu Map view wizards
  • Select "Category" from the options and "cityname" as the "Column" Category wizard
  • Click on an empty area to hide the wizards menu then click to zoom out the map to show Broward county Zoom out

7. Changing the styles

  • Click on the "CSS" icon to open the CartoCSS editor. As we can see, default styles have been created by the Category wizard based on the "cityname". CartoCSS editor
  • Replace the content with your own styles. For example, use the following styles. Note that '#cities9999' could be replaced by the actual dataset name if that is not the default 'cities' name.
/** category visualization */

#cities {
   polygon-opacity: 0.7;
   line-color: #FFF;
   line-width: 0.5;
   line-opacity: 1;
}

#cities[cityname="COUNTY REGIONAL FACILITY"] {
   polygon-fill: #DDDDDD;
}
#cities[cityname="FORT LAUDERDALE"] {
   polygon-fill: #b30000;
}
#cities[cityname="CORAL SPRINGS"] {
   polygon-fill: #084081;
}
#cities[cityname="PLANTATION"] {
   polygon-fill: #0868ac;
}
#cities[cityname="SUNRISE"] {
   polygon-fill: #2b8cbe;
}
#cities[cityname="WESTON"] {
   polygon-fill: #a8ddb5;
}
#cities[cityname="DANIA BEACH"] {
   polygon-fill: #1F78B4;
}
#cities[cityname="DAVIE"] {
   polygon-fill: #B2DF8A;
}
#cities[cityname="HOLLYWOOD"] {
   polygon-fill: #33A02C;
}
#cities[cityname="NORTH LAUDERDALE"] {
   polygon-fill: #FB9A99;
}
#cities[cityname="POMPANO BEACH"] {
   polygon-fill: #4eb3d3;
}
#cities[cityname="COCONUT CREEK"] {
   polygon-fill: #d7301f;
}
#cities[cityname="DEERFIELD BEACH"] {
   polygon-fill: #00441b;
}
#cities[cityname="TAMARAC"] {
   polygon-fill: #cc4c02;
}
#cities[cityname="MARGATE"] {
   polygon-fill: #cb181d;
}
#cities[cityname="PARKLAND"] {
   polygon-fill: #E31A1C;
}
#cities[cityname="OAKLAND PARK"] {
   polygon-fill: #addd8e;
}
#cities[cityname="LAUDERHILL"] {
   polygon-fill: #ffffcc;
}
#cities[cityname="PEMBROKE PINES"] {
   polygon-fill: #FDBF6F;
}
#cities[cityname="SOUTHWEST RANCHES"] {
   polygon-fill: #FF7F00;
}
#cities[cityname="TRIBAL LAND"] {
   polygon-fill: #CAB2D6;
}
#cities[cityname="UNINCORPORATED"] {
   polygon-fill: #6A3D9A;
}
#cities {
   polygon-fill: #5CA2D1;
}
  • Click "Apply style" and see the map change colors based on the styles

8. Adding hover popup

  • Click the popup icon to open the infowindow menu, then click the "Hover" tab infowindow menu
  • In the hover tab, click the cityname toggle button
    infowindow hover cityname
  • Hover your mouse over any city on the map. The city name will display when you hover. You can enable any other column to display. Hover mouse over map

9. Adding click popup

  • Click the popup icon and then the "Click" tab. Select the cityname and acreage toggle buttons. Drag the cityname item above acreage to determine the order those items are displayed in the popup. infowindow click popup
  • Click on any city on the map. A popup appears with the city name and the acreage. Click map to display popup

10. Finishing up

  • Let others view your map by clicking "Publish" at the top right of the screen. Choose to share a link or embedding it on a website. Publish map
  • You can also choose to export the map by clicking "Edit" then "Export layer"
    Export layer
  • The map data can be exported to many other formats such as CSV and GeoJSON
    Export layer options

Other Topics

Displaying map on a website

  • Click "Publish" at the top right of the screen. Copy the link ending with viz.json.
    Publish viz json link
  • Create a simple web page such as creating an index.html file in your GitHub repo then creating a 'gh-pages' branch. In the index.html file of the 'gh-pages' branch or your own web page, you should have the following content:
<html>
<head>
  <title>Broward Elected Officials</title>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <style>
    html, body, #map {width:100%; height:100%; padding: 0; margin: 0;}
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    cartodb.createVis('map', 'https://codeforftl.cartodb.com/api/v2/viz/4b423d54-658a-11e5-9994-0ec6f7c8b2b9/viz.json');
  </script>
</body>
</html>

Merging cities table with elected officials dataset

  1. View all your datasets by clicking the top "Map" menu and selecting "Your datasets"
    View datasets
  2. Import the "Elected Officials" dataset by clicking "New Dataset" then pasting in the URL for the dataset such as https://github.com/qtrandev/BrowardElectedOfficials/master/ElectedOfficials.txt
    New dataset from URL
  3. Click "Submit" then "Connect Dataset" to import. The "electedofficials" dataset now appears.
  4. Click the original "cities" dataset you have been working with to begin the merge process
    View imported dataset
  5. Click the "Edit" menu at the top right of the screen, then click "Merge with dataset..."
    Merge dataset
  6. Choose "Column join" since both datasets have matching "cityname" columns
    Merge column join
  7. Select to merge with the "electedofficials" dataset. Select "cityname" columns from both datasets and click "Next Step"
    Merge with cityname columns
  8. Uncheck the "cityname" column on the "electedofficials" dataset since we don't want to duplicate the column in the merged dataset. Click "Merge Datasets" to merge.
    Merge datasets
  9. A new dataset is created. You'll have to start all over to create a new map by clicking "Visualize". Choose to create a new map when prompted.
    Dataset created
  10. You can style the new map like before. Note that the dataset has a new name so any CSS style code should use that name.
    New map styling

Possible future topics:

  • Using custom CSS to embed images in popups
  • Creating custom points and polygons on a map
  • Advanced embed of the map on web pages using CartoDB.js