HualuCup: Open Data Innovation Competition
demo page
Champion code of 1st round
work from 20:00 - 4:00 Data Specification for web demo:
- in
json
format, named as following:[day]_[weather]_[time]
, i.e.weekday_rainy_600
[day]_[weather]
, i.e.weekday_rainy
, with time data is listed in the file
- 6 fields in a json file for each time
question: [time [line]] or [line [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]]? } ]}
- 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
- Gradual change of line color
- add animation of traffic flow, inspired from post1 and post2
- add functionality of line highlight in map
- 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
- add highlight in table for selected starting stop
- no flow for many-stop display
- remove dash attribute in segments:
var dashLength = 25; stroke-dasharray:dashLength+" "+dashLength
- naming and reorganizing the data file:
4 data files:
weekdays_regular.dat
,weekdays_rainy
,weekends_regular.dat
,weekends_rainy
- shift the map downward to fit a line name(808路 etc) at the top the map
- add line names and stop names as
text
insvg
- make a demo vedio for submission
- enable the button of reset table.
- add line break of stop names displayed in map
- svg 1.1 doesn't support line break (
<br>
in innerHTML doesn't work) - solution: use
first_line<tspan x=? y=? dx=? dy=?>second_line</tspan>
in innerHTML ofsvg.text
obj, here, I only usex=x0
anddy=15
to locate the new line.
- svg 1.1 doesn't support line break (
- adjust the fontSize of stop names displayed
- adjust the fontStyle of line nemas displayed
- shift the svg block to right to show tooltips of leftmost dots
- update text in tooltips for line name and stop name