天天看點

JavaScript代做程式設計輔導:CSE6242 D3 Graphs and Visualization

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:

  1. Speed of wind in km/h.
  2. Month of the year.
  3. 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.

  1. Using labels for each node.
  2. All nodes can be pinned.
  3. Draw links with different color.
  4. 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.

  1. Your should transfer Q4.csv to Q4_transfer.csv, you can use a Python script or Java program to do this job.
  2. Use a table to show the relationship inside this dataset, you can draw any graph you like.
  3. 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