sha*_*sen 10 javascript json d3.js crossfilter dc.js
我构建了一个具有多个维度和组的交叉过滤器,以使用dc.js直观地显示数据.可视化数据是自行车旅行数据,每次旅行都将加载.目前,有超过750,000条数据.我正在使用的JSON文件大70 MB,并且只需要在未来几个月收到更多数据时增长.
所以我的问题是,如何使数据更精益,以便它可以很好地扩展？现在加载我的互联网连接需要大约15秒钟,但是我担心一旦我有太多的数据需要太长时间.此外,我已经尝试(不成功)在数据加载时显示进度条/微调器,但是我没有成功.
我需要的数据列是start_date, start_time, usertype, gender, tripduration, meters, age.我已经在我的JSON中缩短了这些字段,start_date, start_time, u, g, dur, m, age因此文件更小.在横向过滤器上,顶部有一个折线图,显示每天的总行程数.下面是星期几的行图(根据数据计算),月份(也计算得出)以及用户类型,性别和年龄的饼图.下面是start_time(向下舍入到小时)和tripduration(向上舍入到分钟)的两个条形图.
该项目在GitHub上:https://github.com/shaunjacobsen/divvy_explorer(数据集在data2.json中).我试图创建一个jsfiddle,但它不起作用(可能是由于数据,甚至只收集了1000行并将其加载到带有<pre>标签的HTML中):http://jsfiddle.net/QLCS2/
理想情况下它会起作用,以便只有顶部图表的数据首先加载:这会加载很快,因为它只是按天计算数据.然而,一旦它进入其他图表,它需要逐步更多的数据来深入细节.关于如何使其发挥作用的任何想法？
我建议将JSON中的所有字段名称缩短为1个字符(包括"start_date"和"start_time").这应该有点帮助.此外,请确保在服务器上打开压缩.这样,发送到浏览器的数据将在传输过程中自动压缩,如果尚未开启,则可以加快速度.
为了更好地响应,我还建议首先设置Crossfilter(空),所有维度和组以及所有dc.js图表,然后使用Crossfilter.add()以更多的方式将更多数据添加到Crossfilter中.最简单的方法是将数据划分为一口大小的块(每个几MB)并连续加载它们.因此,如果您使用的是d3.json,则在前一个文件加载的回调中启动下一个文件加载.这导致了一堆嵌套的回调,这有点讨厌,但应该允许用户界面在加载数据时做出响应.
最后,有了这么多数据,我相信你会在浏览器中遇到性能问题,而不仅仅是在加载数据时.我怀疑你已经看到了这个,你看到的15秒暂停至少部分在浏览器中.您可以通过浏览器的开发人员工具进行分析来检查.要解决此问题,您需要分析和识别性能瓶颈,然后尝试优化这些瓶颈.此外 - 确保在速度较慢的计算机上测试它们是否在您的受众中.