标签: dc.js

我有一些数据集,其中一些字段值是数组,我想使用crossfilter和d3.js或dc.js来显示数据集中每个值存在多少次的直方图.

这是一个例子:

var data = [
    {"key":"KEY-1","tags":["tag1", "tag2"]},
    {"key":"KEY-2","tags":["tag2"]},
    {"key":"KEY-3","tags":["tag3", "tag1"]}];

var cf = crossfilter(data);

var tags = cf.dimension(function(d){ return d.tags;});
var tagsGroup = tags.group();


dc.rowChart("#chart")
    .renderLabel(true)
    .dimension(tags)
    .group(tagsGroup)
    .xAxis().ticks(3);

dc.renderAll();

和JSFiddle http://jsfiddle.net/uhXf5/2/

当我运行该代码时,它生成如下图形:

但我想要的是这样的:

为了使事情变得更加复杂,能够通过单击的标记单击任何行和过滤数据集将是非常棒的.

任何人有任何想法如何实现这一点？

谢谢,克斯特亚

我正在使用Dimensional Charting javascript库dc.js创建一个条形图,它基于d3和crossfilter.

我想要做的就是显示一个具有指定数量的bin的直方图,使用该barChart函数应该很容易.

我有一个调用的数组data包含0到90000之间的浮点值,我只想使用带有10个bin的直方图显示分布.

我使用以下代码生成下面的直方图:

  var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d[attribute.name]; });

  var n_bins = 10;
  var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
  var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
  grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
  chart = dc.barChart("#" + id_name);
  chart.width(200)
    .height(180)
    .margins({top: 15, right: 10, bottom: 20, left: 40})
    .dimension(dim)
    .group(grp)
    .round(Math.floor)
    .centerBar(false)
    .x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
    .elasticY(true)
    .xAxis()
    .ticks(4);

这看起来并不正确:每个酒吧都很瘦!我想要一个看起来很正常的直方图,其中条很粗,几乎相互接触,每个条之间可能有几个像素的填充.知道我做错了什么吗？

我正在尝试为其中一个dc.js示例创建一个jsfiddle.我无法使用URL加载外部文件d3.csv().

有人可以建议如何使用d3.csvjsfiddle 加载csv文件.

我有一个这样的数据数组:

var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];

我在用:

• dc.js
• crossfilter.js
• d3.js

我想创建一个条形图:

• x轴具有字母名称,和
• y轴具有字母表的出现次数.

问题:如何在x轴上绘制带有有序刻度的条形图？

我的代码:

var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];

var Filter = crossfilter(data);
var Dimension = Filter.dimension(function (d) { return d.Alphabet_Type; });
var Group = Dimension.group();

dc.barChart("#bar-chart")
    .width(800) 
    .height(275) 
    .transitionDuration(0) 
    .margins({ top: 10, right: 50, bottom: 30, left: 40 })
    .dimension(Dimension) 
    .group(Group) 
    .elasticY(false)
    .elasticX(false)
    .x(d3.scale.linear().domain([-1, 10]))
    .y(d3.scale.linear().domain([0, 5]))
    .centerBar(true)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .brushOn(false);

最后,我有另一个问题,那Alphabet_Type就是没有可预测的值.所以我需要获取Alphabet_Typevia crossfilter.js的值并将这些值合并到域中.我怎样才能做到这一点？

有没有办法使dc.js图表响应？

我正在努力使图表适合桌面大小.

我正在使用Twitter Bootstrap 3.我将div的宽度存储到变量并将其传递给图表宽度.这不会使图表响应.但在首次加载时,图表会根据屏幕大小达到宽度.

但现在我面临一个挑战,我有一个不同的dc.js图表文件.

而我正打电话给iframe.

当我通过iframe宽度调用它时所有div都为0,并且网页中不显示任何图表.

但是当我iframe单独重装时,图表就出现了.

当我们点击该特定导航项时,我甚至尝试加载框架.但即使这样对我也不起作用.

有人帮我克服了这个问题.

我想知道是否有任何已知方法可以有效地在dc.js中为我的数据表添加"重新排序"功能.如果我的用户在完成对图表的选择后,可以根据哪个列来决定过滤行的排序(例如,通过单击列标题),那将是很好的.

任何想法从哪里开始？

非常感谢

我花了一天的大部分时间试图获得一个漂亮的日期轴直方图,以至于我在stackoverflow上发布我的第一个问题.

轴和堆叠正是我想要的方式,但是对于没有(对我而言)明显的原因,条形图非常薄.换句话说,我真的很感激一些帮助.

这是一个最小化的版本(我正在使用dc.js库,但是我很自信挑战代表d3 + crossfilters):

var jsonstr = [{"timestamp": "2013-06-13T11:04:24.729Z"},{"timestamp": "2013-06-17T11:03:24.729Z"},{"timestamp": "2013-06-17T11:02:24.729Z"},{"timestamp": "2013-06-19T11:02:14.129Z"}];

var ndx = crossfilter(jsonstr);

var timestampD = ndx.dimension(function (d) {
    return new Date(d.timestamp);
});

var timestampDG = timestampD.group(function (d) {
    return d3.time.day(d);
});

var barChart = dc.barChart("#dc-bar");
barChart.width(500)
    .height(250)
    .dimension(timestampD)
    .group(timestampDG)
    .x(d3.time.scale().domain([(new Date(2013,05,12)), (new Date(2013,05,20))]).nice(d3.time.day))
    .xAxis().tickFormat(function (x) {
        return x.getDate() + "/" + (x.getMonth()+1);
    });

dc.renderAll();

我正在尝试在Vue.js项目中使用一些d3包和NPM进行包管理.我试图弄清楚我遇到的问题,但无法在那里复制问题 - 代码完全按照应有的方式工作.

我正在尝试确定在JSFiddle中运行的代码与在我的应用程序中运行的代码之间的差异(除了显而易见的事实,即我没有在小提琴中运行Vue.js),最重要的是我如何导入我的额外内容库.在小提琴中我添加了从CDNJS相关库的链接,而在我的应用程序中,我正在使用NPM和import.这就是使用dc基于许多d3功能构建的图表.我对图表组件的完整导入是:

import dc from 'dc'
import crossfilter from 'crossfilter2'
import * as time from 'd3-time'
import * as scale from 'd3-scale'

我没有使用基本d3模块的任何功能.

有问题的小提琴在这里:https://jsfiddle.net/y1qby1xc/10/

我发现Crossfilter的所有例子都使用这样的扁平结构:

[
  { name: “Rusty”,  type: “human”, legs: 2 },
  { name: “Alex”,   type: “human”, legs: 2 },
  ...
  { name: “Fiona”,  type: “plant”, legs: 0 }
]

要么

"date","open","high","low","close","volume","oi" 11/01/1985,115.48,116.78,115.48,116.28,900900,0 11/04/1985,116.28,117.07,115.82,116.04,753400,0 11/05/1985,116.04,116.57,115.88,116.44,876800,0

我有几百MB的平面文件我处理产生一个1-2MB的JSON对象,结构大致如下:

{
  "meta": {"stuff": "here"},
  "data": {
    "accountName": {
      // rolled up by week
      "2013-05-20": {
        // any of several "dimensions"
        "byDay": {
          "2013-05-26": {
            "values": {
              "thing1": 1,
              "thing2": 2,
              "etc": 3
            }
          },
          "2013-05-27": {
            "values": {
              "thing1": 4,
              "thing2": 5,
              "etc": 6
            }
          } …

我构建了一个具有多个维度和组的交叉过滤器,以使用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/

理想情况下它会起作用,以便只有顶部图表的数据首先加载:这会加载很快,因为它只是按天计算数据.然而,一旦它进入其他图表,它需要逐步更多的数据来深入细节.关于如何使其发挥作用的任何想法？