jasli2

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

  •  
  •   jasli2 · Jun 5, 2018 · 5706 views
    This topic created in 3080 days ago, the information mentioned may be changed or developed.

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

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

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

    http://www.visualboxoffice.cn/

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

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