V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Meteor Official Site
http://www.meteor.com/
Follow @meteorjs on Twitter
loddit
V2EX  ›  Meteor

全国铁路数据的可视化app

  •  
  •   loddit · 2012-12-09 18:55:45 +08:00 · 8686 次点击
    这是一个创建于 4127 天前的主题,其中的信息可能已经有所发展或是发生改变。
    其实没怎么利用 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 就好了)
    第 1 条附言  ·  2012-12-17 08:39:51 +08:00
    在上次基础更新一次,一期 TODO 里的事情基本完成:
    1 hover 显示站名有了,原来是需要 svg:title 来支持才行~
    2 列车类型选择和颜色高亮都做了,效果不太好。
    3 修复错误的数据,大概修复了200多错误坐标,预计还有100个剩余,这个真的很难做。

    TODO 2:
    1 可以高亮指定车次的线路, 比如 D21 K29 等。
    2 火车站的详细信息,通过几个车,附近车站等~。
    3 查看TOP10 最长线路,最多站数,经过的线路最多等...的排行榜。
    第 2 条附言  ·  2012-12-23 21:05:29 +08:00
    第2次更新

    1 修改了一些交互设计,增加了按照车号搜索的功能,比如 T27,K186 什么的~
    2 用了新的 tooltip 反应更快,效果更好
    3 改用了 Albers 投影法,这个多说点:之前大家提出了地图变形问题,我也趁机学习一点地图学的基本概念,这里现学现卖一下。

    地球是个球体(去看地球仪),所以要把位置关系投射到平面上需要做一些特殊处理才行。

    如果直接按照经度纬度作为x轴y轴的话,能把球面变成平面,但是在越靠近极点的地方,比例尺就会越大,靠近极点的经线比较短,每一度转换到x轴上在平面图中就被放大了。这种方法叫 Mercator
    投影法。之前用的就是这样的~见11楼截图。

    为了避免这种失真,在跨经度很大的中纬度国家,经常使用 Albers 投影法,相当于把球形映射到锥形上,在这张图上面积不会发生是失真。一般大家看到的带有曲线纬线的中国地图都是使用这种投影法的。

    以下链接可以参考:

    http://en.wikipedia.org/wiki/Map_projection
    https://github.com/mbostock/d3/wiki/Geo-Projections
    39 条回复    1970-01-01 08:00:00 +08:00
    loddit
        1
    loddit  
    OP
       2012-12-09 18:58:33 +08:00
    代码很简单,为了方便部署我把需要的数据也放在 git 里了。https://github.com/loddit/railway
    isy
        2
    isy  
       2012-12-09 19:22:16 +08:00
    二手本完全卡死。等楼下回复
    lackar
        3
    lackar  
       2012-12-09 19:25:27 +08:00
    cool
    ispinfx
        4
    ispinfx  
       2012-12-09 19:26:08 +08:00
    很流畅,但没见到hover……准确来说是一个字都没看到
    bluef
        5
    bluef  
       2012-12-09 19:48:14 +08:00
    cool!
    gavingeng
        6
    gavingeng  
       2012-12-09 20:01:28 +08:00
    黑夜里的萤火虫,其他啥也没了
    pepsin
        7
    pepsin  
       2012-12-09 20:11:45 +08:00
    很漂亮
    loddit
        8
    loddit  
    OP
       2012-12-09 20:50:35 +08:00
    每个点是可以点击的,大家发现了没?
    yangchenyun
        9
    yangchenyun  
       2012-12-09 21:23:10 +08:00
    好棒啊,直接看到上海出发的铁路线。
    citydog
        10
    citydog  
       2012-12-09 21:38:55 +08:00
    没感觉,跟打开一般网页一样的...
    zl8723
        11
    zl8723  
       2012-12-09 21:45:05 +08:00

    啥也看出来呀,就一张可以点的图,没其他信息。是这样么?
    mew7wo
        12
    mew7wo  
       2012-12-10 00:25:01 +08:00
    楼主有没什么d3的资料?
    最近也在弄d3,打算用来做一些可视化的东西
    kofj
        13
    kofj  
       2012-12-10 10:45:21 +08:00
    真心的一个字都没有看到,就只有图了
    loddit
        14
    loddit  
    OP
       2012-12-10 10:46:27 +08:00   ❤️ 1
    @mew7wo 这里有一本O'reilly 的书 http://www.douban.com/group/topic/33530044/

    属于入门的,具体使用时还要看文档。d3要用好我觉得需要有点图形方面知识或灵感吧~我也需要补补
    dallaslu
        15
    dallaslu  
       2012-12-10 11:04:34 +08:00
    @kofj “增加的地点的hover效果,显示地名什么的”还是 to do
    chuangbo
        16
    chuangbo  
       2012-12-10 11:35:07 +08:00
    地图变形了,应该用 Albers 投影 http://www.cnblogs.com/flyingfish/archive/2007/03/12/671844.html

    可以用 d3.geo.albers().origin([105, 38]) 进行转换
    holmesabc
        17
    holmesabc  
       2012-12-10 11:55:58 +08:00
    其实我完全不知道,这是干什么的。。。
    loddit
        18
    loddit  
    OP
       2012-12-10 12:07:36 +08:00
    @chuangbo 恩 纬度不同时同角度经度的位移是不一样的~ 其实平面版的google地图也是变形了,所以还在考虑下那种更好。

    原来有直接的算法,我还想过自己转换呢。好谢谢你
    Ricepig
        19
    Ricepig  
       2012-12-10 13:45:45 +08:00
    @chuangbo albers投影是为了等积,Google地图所采用的Web Mercator对于小比例尺的图形其实基本够用。
    Ricepig
        20
    Ricepig  
       2012-12-10 13:47:16 +08:00   ❤️ 1
    lz可以考虑结合铁路路网(这个是公开的),这样站站连接就可以不一定是直线。并且套上行政境界为底图,这样能看的更清楚一点。
    loddit
        21
    loddit  
    OP
       2012-12-10 14:26:10 +08:00
    @Ricepig 问下铁路路网是在哪里能获得呢?
    mew7wo
        22
    mew7wo  
       2012-12-10 15:25:12 +08:00
    @loddit 谢谢了。
    我也找到一个blog,也是入门的。
    cnfy
        23
    cnfy  
       2012-12-10 16:45:41 +08:00
    xsaps
        24
    xsaps  
       2012-12-10 16:49:05 +08:00
    有火车直通台湾半岛? 应该包含了飞机航线吧?
    GreatHan
        25
    GreatHan  
       2012-12-10 17:04:34 +08:00
    是 canvas画的吧?
    loddit
        26
    loddit  
    OP
       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
        27
    shuson  
       2012-12-17 10:53:49 +08:00
    期待加入搜索功能
    thwawar
        28
    thwawar  
       2012-12-17 21:27:28 +08:00   ❤️ 1
    建议加上以下特性:
    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
        29
    thwawar  
       2012-12-17 21:58:40 +08:00   ❤️ 1
    更多的建议
    --------------
    1. 给出一种方式:一开始不绘制所有线路,当点击某个城市时进行动态绘制,再点击时隐藏原来的线路加载新的线路。给一个下拉框让用户切换两种方式。

    2. 考虑直接在 Google maps上绘图,比如这个: http://bl.ocks.org/899711
    loddit
        30
    loddit  
    OP
       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
        31
    chuangbo  
       2012-12-23 23:47:32 +08:00   ❤️ 2
    @loddit 呵呵,不客气。还有如果你真的想用 d3 画出一个有各个省份的中国地图,我这里有数据
    http://report.dnspod.cn/static/china-province.json
    loddit
        32
    loddit  
    OP
       2012-12-24 00:01:22 +08:00
    @chuangbo Wow~ 这个太有用啦, 精度要是在高点就更棒了~ 赞!

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

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

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

    关注
    kebot
        36
    kebot  
       2012-12-25 00:16:00 +08:00
    很赞, 能看到我家, 哈哈
    chuangbo
        37
    chuangbo  
       2012-12-25 18:38:42 +08:00
    @claliu 有工具能简化数据就太好了。我试试你这个工具,谢谢。
    hbc
        38
    hbc  
       2013-01-18 22:23:10 +08:00
    @chuangbo (上面的那个我还没测试)有精确到省会和部分大城市的吗?
    mew7wo
        39
    mew7wo  
       2013-01-23 17:10:39 +08:00
    楼主用d3的时候,是否遇到过中文显示乱码的事情。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5739 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:52 · PVG 09:52 · LAX 18:52 · JFK 21:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.