V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jasli2
V2EX  ›  分享发现

自己撸了个票房可视化的项目

  •  
  •   jasli2 · 2018-06-05 16:08:21 +08:00 · 4500 次点击
    这是一个创建于 2352 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一直很喜欢优秀的数据可视化项目,自己也一直关注这一块。

    趁着周末有空,撸了个项目。这两天完善了一下,觉得可以见人了。

    喜欢数据可视化的,欢迎拍砖。

    http://www.visualboxoffice.cn/

    后续有空想加入点动效,改进下数据表达和配色。

    39 条回复    2018-06-08 15:29:29 +08:00
    tlemar
        1
    tlemar  
       2018-06-05 16:12:33 +08:00
    挺有意思的
    F1024
        2
    F1024  
       2018-06-05 16:14:15 +08:00
    带上影片封面 岂不美哉
    F1024
        3
    F1024  
       2018-06-05 16:14:34 +08:00
    和豆瓣连接
    jasli2
        4
    jasli2  
    OP
       2018-06-05 16:23:46 +08:00
    @F1024 可以考虑加上封面,不过感觉没地方塞了
    gamecreating
        5
    gamecreating  
       2018-06-05 16:41:01 +08:00
    这鼠标 移过去 好蛋疼......想砸鼠标
    yimity
        6
    yimity  
       2018-06-05 16:47:50 +08:00
    很棒。
    th00000
        7
    th00000  
       2018-06-05 16:48:49 +08:00
    太小了 鼠标点不到啊
    jasli2
        8
    jasli2  
    OP
       2018-06-05 16:49:03 +08:00
    @gamecreating 是移到那个小圆点上很蛋疼是吧,确实有点不方便。我想把圆点做大点来着,无奈塞不下,要不就要把圆做得更大。
    jasli2
        9
    jasli2  
    OP
       2018-06-05 16:49:50 +08:00
    @th00000 慢慢慢慢地移动过去,你会 hover 到的 ^^
    wplct
        10
    wplct  
       2018-06-05 16:53:11 +08:00
    楼主。2 月 16 三个加起来超过 100%
    jasli2
        11
    jasli2  
    OP
       2018-06-05 17:02:40 +08:00
    @wplct 2018 年 2 月 16 的三个电影单日票房?
    meppy
        12
    meppy  
       2018-06-05 17:03:18 +08:00
    圆点可以保留,点到柱状图的时候 Hover 出一个表格最好了,一目了然
    zavieryip
        13
    zavieryip  
       2018-06-05 17:05:31 +08:00
    在焦点位置下点功夫
    建议鼠标移到内圈直接把内圈放大至覆盖外圈,毕竟想点内圈的话外圈是不相关的
    jasli2
        14
    jasli2  
    OP
       2018-06-05 17:06:10 +08:00
    @zavieryip 外圈会显示单个电影的日票房走势哦。
    yiciyuansky
        15
    yiciyuansky  
       2018-06-05 17:07:06 +08:00
    很棒。
    wplct
        16
    wplct  
       2018-06-05 17:13:19 +08:00
    @jasli2 对啊。
    jasli2
        17
    jasli2  
    OP
       2018-06-05 17:13:40 +08:00
    @wplct 我做了平方根的 mapping,想把票房差距缩小点,可能还是不好,我恢复成线性 mapping 了。这样数据的表达应该正确了。
    jasli2
        18
    jasli2  
    OP
       2018-06-05 17:18:48 +08:00
    线性 mapping 后,发现日票房的差距不是一般的大,2018 年春节票房简直爆炸。
    wplct
        19
    wplct  
       2018-06-05 17:47:41 +08:00
    蓝色的太多了,2017 年只有战狼不是蓝色
    jasli2
        20
    jasli2  
    OP
       2018-06-05 17:50:30 +08:00
    @wplct 战狼 2 可是历史票房冠军,配色上还要再优化,主要是票房数据确实差距蛮大的。
    chenyu8674
        21
    chenyu8674  
       2018-06-05 17:58:32 +08:00
    LZ 你这个操作方式会诱发癫痫的你造么……
    183387594
        22
    183387594  
       2018-06-05 18:02:46 +08:00
    点的我浑身难受
    jasli2
        23
    jasli2  
    OP
       2018-06-05 18:26:53 +08:00
    @183387594 确实有点难操作,得再想想办法。
    jasli2
        24
    jasli2  
    OP
       2018-06-05 18:28:38 +08:00
    @wplct 我调整了颜色过渡的步幅,让他不是线性过渡的,调整平均数所在的颜色位置,这样,颜色应该能发挥一点指示作用了。
    jasli2
        25
    jasli2  
    OP
       2018-06-05 18:31:11 +08:00
    zwithz1998
        26
    zwithz1998  
       2018-06-05 19:16:35 +08:00
    果然是 d3.js
    Huang77
        27
    Huang77  
       2018-06-05 19:45:16 +08:00
    不错啊
    jasli2
        28
    jasli2  
    OP
       2018-06-05 20:14:55 +08:00 via iPhone
    @zwithz1998 必须是 d3 啊,好用
    paloalto
        29
    paloalto  
       2018-06-05 21:26:32 +08:00
    鼠标 hover 到某个月份上时,这个月份区域放大(包括其中的点状区域和条状区域);
    在这个月份区域中,鼠标 hover 到点状区域或者条状区域时,对应的区域就再次放大;
    鼠标 hover 到点点上,可以 ajax 读豆瓣电影信息,展示海报。
    jasli2
        30
    jasli2  
    OP
       2018-06-05 23:43:49 +08:00 via iPhone
    @paloalto 电影日票房数据有些跨度可以超过三个月,你的方案可能会影响这个数据的展示,不过确实要放大点才好交互,有人都要发癫痫了。
    Mbin
        31
    Mbin  
       2018-06-06 00:35:30 +08:00 via iPhone
    挺好玩的哎
    duck2u
        32
    duck2u  
       2018-06-06 09:29:11 +08:00
    这个 hover 真是让人抓狂
    fanhaipeng0403
        33
    fanhaipeng0403  
       2018-06-06 10:23:16 +08:00
    有点意思
    jasli2
        34
    jasli2  
    OP
       2018-06-06 10:55:24 +08:00
    @duck2u 你不是一个人在抓狂,我在考虑如何放大每个电影的圆点,让交互舒服点。
    jasli2
        35
    jasli2  
    OP
       2018-06-06 11:06:23 +08:00
    @Mbin 好玩你就多玩玩 😀
    exocell
        36
    exocell  
       2018-06-06 16:48:38 +08:00
    很棒
    exocell
        37
    exocell  
       2018-06-06 16:53:00 +08:00
    电影建议用甘特图.然后元素颗粒过小,截取一部分滚动就可以了
    jasli2
        38
    jasli2  
    OP
       2018-06-08 09:14:22 +08:00
    @exocell 你指的是内圈的单个电影的圆点吗?怎么用甘特来表示呢?
    exocell
        39
    exocell  
       2018-06-08 15:29:29 +08:00
    @jasli2 直线的起点跟终点是电影上线跟下线的时间,多条直线堆叠,先把时间短放一行.时长的再摊下来节约地方.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1056 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:39 · PVG 03:39 · LAX 11:39 · JFK 14:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.