DataViz Final – CWP Project

Posted on

Files to be transferred:

  • The geojson file for the 37 towns. Label: cwp-37-towns-v8.geojson. This file contains the data provided by the Capital Workforce Partners. The organization owns and has access to the file.
  • The csv file for 37 towns. Label: cwp-37-towns-v8.csv. This file contains the data in the geojson file but in the excel format.

Part 1: Maintain the website

  1. Sign up for a free GitHub account.
  2. Go to This is the repository for the Leaflet map. Click on “Fork” to make your own copy of the map.Screen Shot 2016-04-21 at 11.09.00 AM
  3. Go to the README file. Click on the edit icon. In the demo link change “ngocdo67” to your github username. Click on the green button Commit changes.Screen Shot 2016-04-21 at 11.33.08 AM
  4. Go to the branches tab. Delete all branches, except for the master branch. Go back to the repository main page. Click on Branch: master. On the Find or create a branch, type in gh-pages to create your own gh-pages branch. The code in here would be the one that goes live on the link you have on the README file.Screen Shot 2016-04-21 at 11.35.08 AM
  5. Replace the current link on your account with your own demo link.

How to do a pull request

  1. On the main page of the repository, click on the green button New Pull Request

Make sure the base fork is your username, NOT “ngocdo67”.  Use the drop-down menus to CAREFULLY select the direction of the merge in this TO-FROM format. In this example, it is TO master branch FROM gh-pages branchScreen Shot 2016-04-21 at 11.38.31 AM

  1. Follow these steps to finish the pull request, which merges all content TO the master branch FROM gh-pages branch:
  • Create the pull request (select green button)
  • Give it a title (such as “updated index and ReadMe”)
  • Send pull request (green button)
  • Merge pull request (another green button)
  • Confirm merge (and another green button!)
  • Always double-check your repository branch names to do editing and live web testing in the gh-pages branch, then make sync a copy to public share in the master branch.

Part 2: Update the Information

  1. On the main page of the repository, download the zip file. Open the compressed file.
  2. Open the cwp-37-towns.csv file in the zip. The column number corresponds to the tab number. For example, number 2 means Median age. Change the data and save it as a new csv file

Solution 1: Mapshaper

  1. Import the geojson file to by dragging the file to the site’s browser window. Click on the i icon and hover over (NOT clicking on) the map to check if the field that contains towns’ names is named “name”.                       Screen Shot 2016-04-30 at 2.16.45 PM
  2. Import the new csv file to mapshaper by dragging the file to the site’s browser window. When a window pops up, select the Import button to add the csv file as a second layer. This table layer will appear as a rectangular cells, because it does not contain geographic information.mapshaper-join-select-map-layer
  3. Click the drop-down menu and select the map to display it as the active layer
  4. Click the Console button, type this command( -join your-new-csv-file-name.csv keys=name,name) and press return Screen Shot 2016-04-21 at 11.46.15 AM
  5. Click the Export button, select the GeoJSON option to download your new GeoJSON file.

Solution 2: If the merge fail in mapshaper, you can go to the page to fix the data manually

  1. Go to the website If there already exists a file on the website, click New. Click Open and select File to upload your geojson file.
  2. On the right side of the website, select the Table tab. In here you could directly change the data in that table.Click Save and select GeoJSON to download the new geojson file to your computer.
  1. Click on the New pull request to see if the master branch and gh-pages branch are similar or not.
  2. If there is any difference, then do a pull request from gh-pages to master branch.
  3. Upload the GeoJSON file to the master branch by clicking the Upload button on the main repository page. After dragging the new GeoJSON file to the browser, click the green button Commit changes.
  4. Do a pull request from master to gh-pages branch
  5. Go to script.js in the gh-pages branch. Find the line  $.getJSON(“cwp-37-towns-v4.geojson”, function (data) and change “cwp-37-towns-v4.geojson” to the name of the new geojson file. Click the Commmit Changes button.
  6. Go back the the main page of the repository. Do a pull request from gh-pages to master branch.

Delete a Repository

Screen Shot 2016-04-27 at 10.30.11 PM

  1. On the main page of the repository, go to Settings.
  2. Click on Delete this Repository
  3. Type in the name of your repository to confirm that you want to delete it.

Reference: Data Visualization for All – Jack Dougherty