demo page
Champion code of 1st round

work from 20:00 - 4:00 Data Specification for web demo:

1. in json format, named as following:
   1. [day]_[weather]_[time], i.e. weekday_rainy_600
   2. [day]_[weather], i.e. weekday_rainy, with time data is listed in the file
2. 6 fields in a json file for each time

   {"map":[
       {
       "n_line":       10,             # number of bus lines
       "n_stops":      [4,5,...],       # number of stops in each bus line
       "names":        # name info of line1, line2, ..., line n
                       [
                       ['*子营','奶子房','磁器口','八王坟'],  # list of stop names, 0..3
                       ...
                       ],  
       "coordinates":  # coordinate info of line1, line2, ..., line n
                       [
                       [10,10, 300,300, 200,600, 1600,1100],  # list of stop coordinates, 0..3
                       ...
                       ],
       "index_up":     # up traffic index info of line1, line2, ..., line n-1
                       [ [               # time = 0(6:00)
                           [10,30,80],   # list of traffic index in each segment, 0..2
                           [5,5,5,7]
                           ...
                         ],[             # time = 1(7:00)
                           [10,30,80],   # list of traffic index in each segment, 0..2
                           [5,5,5,7]
                           ...
                         ],
                         ...
                       ]   # [time [line]] or [line [time]]?
       "index_down":   # down traffic index info of line1, line2, ..., line n-1
                       [ [               # time = 0(6:00)
                           [40,60,99],   # list of traffic index in each segment, 0..2
                           [80,50,30],
                           ...
                         ],[             # time = 1(7:00)
                           [40,60,99],   # list of traffic index in each segment, 0..2
                           [80,50,30,40],
                           ...
                         ],
                         ...                           
                       ]   # [time [line]] or [line [time]]?
       }
   ]}

   question: [time [line]] or [line [time]]?
3. data allocation

   data = data.map[0];

   info	val
   number of lines	data.n_line
   name of line i (from 0)	line_name[i]
   number of stops in line i(from 0)	data.n_stops[i]
   name of stop j (j from 0) in line i(from 0)	data.names[i][j]
   position of stop j (from 0) in line i(from 0)	(data.coordinates[i][2*j], data.coordinates[i][2*j+1])
   traffic index (or time) of segment [j,j+1] (j from 0) of line i (from 0)	data.index_up[i][j]

work from 12:30 - 0:52

1. Gradual change of line color
2. add animation of traffic flow, inspired from post1 and post2
3. add functionality of line highlight in map
4. add argument for onclick event for a DOM: use string instead of variable for the whole function call

work from 16:00-23:00 periodically

1. add highlight in table for selected starting stop
2. no flow for many-stop display
3. remove dash attribute in segments:

   var dashLength = 25;
   stroke-dasharray:dashLength+" "+dashLength

4. naming and reorganizing the data file: 4 data files: weekdays_regular.dat, weekdays_rainy, weekends_regular.dat, weekends_rainy
5. shift the map downward to fit a line name(808路 etc) at the top the map
6. add line names and stop names as text in svg
7. make a demo vedio for submission

1. enable the button of reset table.
2. add line break of stop names displayed in map
   1. svg 1.1 doesn't support line break (<br> in innerHTML doesn't work)
   2. solution: use first_line<tspan x=? y=? dx=? dy=?>second_line</tspan> in innerHTML of svg.text obj, here, I only use x=x0 and dy=15 to locate the new line.
3. adjust the fontSize of stop names displayed
4. adjust the fontStyle of line nemas displayed
5. shift the svg block to right to show tooltips of leftmost dots
6. update text in tooltips for line name and stop name