[SOLVED] Scheme html graph CUSP-GX-6006.001: Data Visualization SUMMER 2019

CUSP-GX-6006.001: Data Visualization SUMMER 2019
Homework 1 (20 points) Due Date: 2:00PM on July 3rd, 2019
INSTRUCTIONS: We will review plotting principles, and building an interactive spatial visualization to explore restaurant cuisines in New York City. For your submission, you must turn in a single URL that can be accessible from the Internet to show your results. This could be:
A link to your working JS Bin (you must have our JS Bin and GitHub accounts linked up to do this)
A private web page (i.e. only accessible if the URL is known) showing your visualization hosted on,
for example, GitHub Pages or bl.ocks.org, or a combination of GitHub Gist and raw.githack.com. For this homework, we would like to explore the different cuisines that restaurants in New York City have to
offer by zip code. You are asked to build an interactive visualization that:
Display the top 25 popular cuisines in NYC (ranked by the number of restaurants of those cuisines). We assume that the more restaurants there are for a cuisine, the more popular it is.
Allow users to select any of the 25 top cuisine, and display the distribution of restaurants of that cuisine across zip codes in NYC.
Your code must work with D3 v5
A target visualization is provided at the end of the document. In Figure 1, a user can browse through the top cuisines ranked by the number of restaurants on the left. The image shows that when the user hovers the mouse over the American cuisine, the map on the right displays the distribution of the cuisine across all zip codes. On the top left corner of the map, there is also a color scale with an appropriate title indicating the scale for each zip code. In this case, the mid and lower part of Manhattan have the most American restaurants, with some zip codes consisting of almost 3,000 restaurants. In Figure 2, when the user moves the mouse over to Chinese cuisine using the bar graph on the left, the map on the right is updated accordingly, showing the distribution of Chinese restaurants throughout NYC. They are mostly in China Town in Manhattan, Queens, and Brooklyn with close to 2,000 restaurants in some zip codes.
We only need to display 5 different color ranges for the map (the four colors shown on the scale, and a transparent one, aka. none). All zip codes without data or with a 0 count should be displayed with a transparent color. The example above uses 5 shades of blue including the transparent color. You can either setup your color scale, or use d3.scaleThreshold with d3.schemeBlues that is available in the add-on D3s d3-scale-chromatic package. You can use the following script in your HTML code when using D3 v5:
CUSP-GX-6006: Data Visualization Page 1 CUSP

SUMMER 2019

DATA SET Two data sets are provided for this task:
nyc_zip.geojson: the boundaries for all zip codes in NYC. This is a GeoJSON file, where each feature
only contains a zip code string (named zipcode), and the boundary for that zip code. For example:
[
[-73.881919, 40.906666]]]],
type: MultiPolygon
},
properties: [object Object] {
zipcode: 10471
},
type: Feature
}, ]
nyc_restaurants_by_cuisine.json: this contains a list of restaurant distributions by zip code for each type of the cuisine. Each entry, which corresponds to a cuisine, consists of a cuisine name, a total field giving the total number of restaurants of that cuisine in NYC, and an associated array named perZip that has the count for each zip code with one or more restaurants of that cuisine. For example:
[
[object Object] {
cuisine: Latin,
perZip: [object Object] {
},
10001: 67,
10002: 111,
10003: 52,
10004: 59,

total: 17400
}
]
The data sets are both available on NYU Classes, and from my GitHub repo:
https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json
EXTRA CREDIT: +5 pts if you can add animation to your spatial visualization, i.e. when the user moves from cuisine to another, the map can smoothly transition its color distribution in half a second, for example.
CUSP-GX-6006: Data Visualization Page 2 CUSP
SUMMER 2019

Figure 1. The distribution of American restaurants in NYC.
Figure 2. The distribution of Chinese restaurants in NYC.
CUSP-GX-6006: Data Visualization Page 3 CUSP
SUMMER 2019