全国铁路数据的可视化app

2012-12-09 18:55:45 +08:00
 loddit
其实没怎么利用 meteor 的特性了,完全是冲着 meteor 有 d3 支持和部署空间的光。

地址在 http://goo.gl/JJpsG (计算量比较大,cpu不行的电脑慎点)

这个是我用来练习 nodejs 抓取,和用 d3 做数据可视化的小作品。
从几个网站上(比如 trainby.com)抓下了车次信息,再用 google 的 geocoder API 获取地址坐标解析出来。但是结果都有不准确的地方(整体错误率不超过 1% 吧 所以还好),反应在图上就是几个莫名奇妙的点和线路。

todo:
1 增加的地点的hover效果,显示地名什么的(用常用的方法比如title,bootstrap 的 tooltips 都不起作用了,还需要研究下怎么回事)
2 增加列车类型的区分。
3 修复错误数据脚本,并定期更新准确数据(哎,要是这种开放数据有个服务能提供更友好的 API 就好了)
8732 次点击
所在节点    Meteor
39 条回复
loddit
2012-12-10 14:26:10 +08:00
@Ricepig 问下铁路路网是在哪里能获得呢?
mew7wo
2012-12-10 15:25:12 +08:00
@loddit 谢谢了。
我也找到一个blog,也是入门的。
cnfy
2012-12-10 16:45:41 +08:00
xsaps
2012-12-10 16:49:05 +08:00
有火车直通台湾半岛? 应该包含了飞机航线吧?
GreatHan
2012-12-10 17:04:34 +08:00
是 canvas画的吧?
loddit
2012-12-17 01:45:13 +08:00
更新一次,一期 TODO 里的事情基本完成:
1 hover 显示站名有了,原来是需要 svg:title 来支持才行~
2 列车类型选择和颜色高亮都做了,效果不太好。
3 修复错误的数据,大概修复了200多错误坐标,预计还有100个剩余,这个真的很难做。

TODO 2:
1 可以高亮指定车次的线路, 比如 D21 K29 等。
2 火车站的详细信息,通过几个车,附近车站等~。
3 查看TOP10 最长线路,最多站数,经过的线路最多等...的排行榜。
4 该设计下界面交互了。
shuson
2012-12-17 10:53:49 +08:00
期待加入搜索功能
thwawar
2012-12-17 21:27:28 +08:00
建议加上以下特性:
1. 缩放:这个挺简单的:https://github.com/mbostock/d3/tree/master/examples/zoom-pan
2. 搜索:给节点加上 id ,然后参考这里: http://bl.ocks.org/3828981

我用过的资源:
1. More examples: http://bl.ocks.org/mbostock
2. Example source code: https://github.com/mbostock/d3/tree/master/examples
3. API Reference: https://github.com/mbostock/d3/wiki/API-Reference

>>> 这是我做的效果(可搜索,呃,其实搜索框是用了 bootstrap-typeahead ......的) :http://ahorn.me/topo
thwawar
2012-12-17 21:58:40 +08:00
更多的建议
--------------
1. 给出一种方式:一开始不绘制所有线路,当点击某个城市时进行动态绘制,再点击时隐藏原来的线路加载新的线路。给一个下拉框让用户切换两种方式。

2. 考虑直接在 Google maps上绘图,比如这个: http://bl.ocks.org/899711
loddit
2012-12-23 21:13:12 +08:00
@chuangbo @Ricepig 修改成 Albers 投影啦,谢谢你们让我长了不少知识

@thwawar 谢谢你的建议和资源,部分已经采用,“直接在 Google maps上绘图”或着增加地图其实效果会有些乱,而且绘制地图的投影法不同,能在座标上对上就已经很难做到。

其实目前最让我头痛还是错误数据的问题,很多小地方,难以得到正确的座标。往往需要人工修订。

不知到大家用什么办法没有,目前我是用地名在goolge api获取座标: http://maps.googleapis.com/maps/api/geocode/json?address=%E8%80%81%E5%AF%A8%E5%B1%B1&sensor=false
chuangbo
2012-12-23 23:47:32 +08:00
@loddit 呵呵,不客气。还有如果你真的想用 d3 画出一个有各个省份的中国地图,我这里有数据
http://report.dnspod.cn/static/china-province.json
loddit
2012-12-24 00:01:22 +08:00
@chuangbo Wow~ 这个太有用啦, 精度要是在高点就更棒了~ 赞!

话说这个东西没怎么用到 meteor 的实时特性,总觉的少了点什么 @_@
chuangbo
2012-12-24 00:49:31 +08:00
@loddit 这个精度我觉得在 Web 上已经太高了,100K 以下才是可以接受的范围。我还有更高的,会让浏览器卡死。。
claliu
2012-12-24 01:16:01 +08:00
@loddit @chuangbo

JSON 文件用在 Web 上的时候,在不影响设计初衷和表达数据的前提下,文件越小越好。我用过的表现中国人口密度的地图(包括台湾)的 JSON 文件只有不到 56 K,所以加载很快。

我是用下面的这个网站简化数据的,
http://mapshaper.com/test/MapShaper.swf
dexter
2012-12-24 17:31:17 +08:00
很好
有心

关注
kebot
2012-12-25 00:16:00 +08:00
很赞, 能看到我家, 哈哈
chuangbo
2012-12-25 18:38:42 +08:00
@claliu 有工具能简化数据就太好了。我试试你这个工具,谢谢。
hbc
2013-01-18 22:23:10 +08:00
@chuangbo (上面的那个我还没测试)有精确到省会和部分大城市的吗?
mew7wo
2013-01-23 17:10:39 +08:00
楼主用d3的时候,是否遇到过中文显示乱码的事情。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/54491

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX