Introduction
D3.js是Javascript中的一個利用Html5的SVG的圖形庫,主要用于資料可視化。用他畫出來的網頁的确是狂拽炫酷吊炸天,但是如果浏覽器很差的話,或者計算機性能很差,或者資料計算量很大的話,會卡到死。 D3總體來說還是不錯的,内置了jQuery文法,熟悉選擇器的話,這個庫上手很快。 但是,這個庫要求有很好的HTML5基礎,特别是SVG标簽的用法。
Requirement
這個程式設計作業就一個字:累。需要實作的東西非常多,而且雜,互相之間也沒有什麼關系。
Part 1: Visualizing Data using D3
Q1
Create a scatter plot visualization with the provided data in the file Data.csv. According to the examples for scatter plot. Attributes / features of the data:
- Speed of wind in km/h.
- Month of the year.
- The forest burnt area.
Any appropriate range for scale is allowed, and any appropriate size for squares is allowed. Submit Q1.pdf with a screenshot of this page.
Q2
According to data provided in the file Q2.csv, a bar chart visualization should be drawn. Your task requires to visualize the number of students in Q2.csv. Transfer the data in Q2.csv to Q2_transfer.csv, you can use a Python script or Java program to archive this goal.
Q3
Now you knows a lot of features in D3 for graph visualization. This time you need to use D3 to draw a graph.
- Using labels for each node.
- All nodes can be pinned.
- Draw links with different color.
- Use tooltips when mouse over.
Part 2: Visualizing Statistics of Refugees in Europe
Q4
After Part1, this time you need to work on real data, and try to find out the appropriate data visualization technology.
- Your should transfer Q4.csv to Q4_transfer.csv, you can use a Python script or Java program to do this job.
- Use a table to show the relationship inside this dataset, you can draw any graph you like.
- Use D3 to visualize your data, you should use d3.slider library.
Part 3: Visualizing College Scorecard data
Q5
After Part2, this time you should find a real dataset, and use your data visualization technology to show it, good luck!
Summary