使用D3库，对Housing Virginia的数据进行数据可视化。
Introduction
- The Housing Virginia web site (https://www.housingvirginia.org/) is undergoing an update.
- The Sourcebook section (https://www.housingvirginia.org/sourcebook/ ) includes a collection of pages that provide a comprehensive housing affordability resource that includes the most current available information on housing affordability.
- A number of pages includes interactive Virginia maps that display various indexes (percentages).
For example: https://www.housingvirginia.org/toolkits/sourcebook/housing-quick-facts/ - The maps are displayed using FusionCharts library.
Problem
FusionCharts library has to be replaced with a D3 implementation of maps.
Approach
Create a web page that displays a map that replicates the map shown in https://www.housingvirginia.org/toolkits/sourcebook/housing-quick-facts/ for a specific data element.
Requirements
- When the mouse pointer hovers over a county area on the map, the county area color changes to light blue and a tooltip is displayed.
- The tooltip shows a line plot showing the change in data values over time.
- The map data is available at https://github.com/deldersveld/topojson/blob/master/countries/us-states/VA-51-virginiacounties.json
- Every county has a unique id, represented as COUNTYFP attribute.
- For example, for Montgomery county, the unique county id is 121.
- The data is available from http://census.gov
- However, it is possible that some counties did not provide data. In that case the county is rendered grey and only the county name is displayed in the tooltip.
- It is also possible to that id does not match any county on the map. In that case the corresponding data is ignored.
- The color of a county area on the map depends on the percentage value:
- Not reported: grey.
- Between 0% (green) and 30% (yellow): a linear interpolation between green and yellow.
- Between 30% (yellow) and 100% (red): a linear interpolation between yellow and red.
- Above 100%: red.
- The web page title is:
- PID is your VT PID
- My VT PID is gracanin so in my case the title would be: Homework 1: gracanin
Skeleton Code
- A skeleton code is provided:
- hw1.html: HTML5 source code
- hw1.css : CSS source code
- hw1.js : D3 JavaScript source code
- You can use the skeleton code as a starting point for your Homework 1 solution (don’t forget to change the author name in the comments and in the window title).
Gradding
- Basic map, title and subtitle: 30 points
- Data display using the color scheme: 30 points
- Interactive tooltips: 40 points
Submission
Submit (upload) your solutions as a single ZIP archive file named is hw1PID.zip. For example, my PID is gracanin so my file would be called hw1gracanin.zip. The ZIP archive must contain the following files:
- hw1.html: HTML5 source code
- hw1.css: CSS source code
- hw1.js: D3 JavaScript source code