Assignment 4

Data Links

• IL County Boundaries GeoJSON: https://gist.githubusercontent.com/dakoop/2d6f78f5bbe75c0cea60cd7dfec3bb39/raw/dbb35c139c5147e14b2971835948d0af8362ed68/il-counties.geojson
• IL Farming Data: https://gist.githubusercontent.com/dakoop/2d6f78f5bbe75c0cea60cd7dfec3bb39/raw/dbb35c139c5147e14b2971835948d0af8362ed68/il-farm-acres.json
• Full Gist: https://gist.github.com/dakoop/2d6f78f5bbe75c0cea60cd7dfec3bb39

0. Info

Like Assignment 1, start by creating an HTML web page with the title “Assignment 4”. It should contain the following text:

• Your name
• Your student id
• The course title (“Data Visualization (CSCI 490/680)”), and
• The assignment title (“Assignment 4”)
• The text “This assignment is all my own work. I did not copy the code from any other source.” (Your inclusion of this text indicates that you understand the consequences of violating the NIU Academic Integrity Standards.)

If you used any additional JavaScript libraries or code references, please append a note to this section indicating their usage to the text above (e.g. “I used the jQuery library to write callback functions.”) Include links to the projects used. You do not need to adhere to any particular style for this text, but I would suggest using headings to separate the sections of the assignment.

A template for the assignment is provided: html, js; save them both as source. You may use this or create your own files.

1. IL County Map (30 pts)

Create a map that shows the county boundaries. You will only need the GeoJSON data for this part of the assignment.

Remember that you will need a projection for the map. For this assignment, we will use the Illinois East State Plane projection. Noah Veltman has provided a handy list of these in d3.geo format here.

For the map, you will want to use each county as a separate feature. Thus, you should use mapData.features with the normal selection plus data binding. Each feature has a number of properties that will be useful for the next steps. If you wish, you could implement a tooltip using the COUNTY_NAM attribute (note the missing “E”) to show a county’s name (for a data item d, this is stored in d.properties.COUNTY_NAM). You can load the mapData via d3.json. Note that this is an asynchronous call, and you should use promises to call the function to draw the map after the data is loaded.

2. IL Farmland by County (40 pts)

You will create two visualizations, but you should work to create a single function to facilitate most of the work, passing data accessor functions and color scales as necessary. Do note that it may be easier to first create the visualizations individually and then refactor them.

    function processData(data) {
        let file1Data = data[0];
        let file2Data = data[1];
    }
    
    Promise.all([d3.json("http://example.com/path/to/file1.json"),
                 d3.json("http://example.com/path/to/file2.json")])
           .then(processData);

3. [CS 680 Only] Overlay (30 points)

While these maps are useful if you are familiar with Illinois geography, it can be difficult to tell what features are covered by particular counties. Web mapping technologies (e.g. Leaflet, MapboxGL) can display features like towns, highways, parks, etc., using map tiles. We can use D3 to overlay the farming information (from Part 2b) on top of such maps so that we can explore the county boundaries and farming trends in relationship to other features. It is also possible to create native choropleth layers using routines in libraries like deck.gl (these also exist for leaflet and MapboxGL). You may choose to do one of:

1. Create a D3 overlay for MapboxGL
2. Create a D3 overlay for Leaflet
3. Create a choropleth using deck.gl’s native layers

All of these libraries are open-source but MapboxGL requires a developer access token. To use Mapbox layers (also in deck.gl), you need to sign up for a free account that will provide you with a token that allows 50,000 map views per month. This should be sufficient for your work on this assignment. Sign up for an account. Your token is visible here in your account here.

In options 1 and 2, we will still create an SVG, but this SVG will sit on top of the map from Leaflet or MapboxGL. You will need to create an SVG for the overlay. In Leaflet, you can use the built-in overlay pane (map.getPanes().overlayPane), and in MapboxGL, you can add the svg to the canvas container (map.getCanvasContainer()). We will update D3’s paths when a user moves or zooms in on the map. This is done using a point geoTransform that uses the underlying map’s projection information. Here is some example code based on Mike Bostock’s work assuming map is the existing map object:

    function projectPoint(lng, lat) {
        let point = map.latLngToLayerPoint(new L.LatLng(lat, lng));
        this.stream.point(point.x, point.y);
    }

    transform = d3.geoTransform({point:projectPoint});
    path = d3.geoPath().projection(transform);

For MapboxGL, replace the second line with

    let point = map.project(new mapboxgl.LngLat(lng, lat));

Note that the order of latitude and longitude is swapped!. Then, projectPoint must be called whenever the map view is changed (generally, the viewreset, move, and movestart events). For Leaflet, you also need to update some transformations (see the render function in this example).

For deck.gl, refer to the GeoJSONLayer example but note that is in 3D and we want a 2D choropleth. In addition, if you use D3’s color scale support, note that deck.gl expects an array with the RGB values, not a string. You can convert using d3.rgb and extracting the r, g, and b fields. Also, note that you should specify a container and the map information including the Mapbox access token and style. Note that for this option, you will not need to handle interactions because the layers are handled by deck.gl.

Extra Credit

For extra credit, CS 490 students may complete Part 3. In addition, all students may implement a way for users to interactively update which year (or year range) is shown (year for Part 2a, range for Part 2b or Part 3). Use D3 transitions to animate the change from one year (or year range) to the other.