使用 D3.js 的 3 维(X、Y 和 Z)图 [英] 3 dimension (X, Y and Z) graph using D3.js

查看:35
本文介绍了使用 D3.js 的 3 维(X、Y 和 Z)图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在搜索具有 3 个维度(x、y 和 z) 并使用 D3.js 的图表.请让我知道是否有任何数据可视化站点可以找到这样的图表,或者

您说过您的三个维度是客户产品内容.不知道内容"有什么价值是(数字或类别),但我很确定客户"是和产品"是类别.

这是一个示例,其中使用两个分类维度来布置表格,然后表格的每个单元格都包含一个大小为第三个数字维度的圆圈.如果你的第三个变量是一个类别,你可以使用一个形状来指示哪个内容"是一个类别.类型(如果有的话)与每个客户"配对一起使用和产品":

<子>(来源:

当然,一个普通的堆叠条形图是另一种显示两个类别和一个数字数量的方式:

我希望这给了你很多想法......

I am searching for a graph which has 3 dimensions (x, y, and z) and uses D3.js. Please let me know if there are any data visualization site where I can find such graph or if there is one on d3js.org that I have missed out somehow.

解决方案

The 3D scatterplot linked to by VividD and Lars Kotthoff is probably the best example of what you're asking for, but I'm going to be contrary and suggest that maybe you're asking the wrong question.

Trying to simulate three spatial dimensions on a flat screen will always be imperfect and make it difficult to read the data. However, it is very easy to graph three different data dimensions in D3. You use the horizontal and vertical layouts for two of your data variables, and then size, shape, color or shading for your third variable.

If all three of your data variables are best represented by continuous numbers, then your best approach is to use a bubble-scatterplot, where your three display dimensions are horizontal positions, vertical position, and bubble size.

Here's an example the also uses the online interactive component to add a fourth dimension shown via motion:

You said that your three dimensions are Customer, Product and content. I don't know what kind of value "content" is (number or category), but I'm pretty sure that "customer" and "product" are categories.

Here's an example where two categorical dimensions are used to lay out a table, then each cell of the table contains a circle sized by the third, numerical dimension. If your third variable is a category, you could use a shape to indicate which "content" type (if any) goes with each pairing of "customer" and "product":

(source: fastly.net)

Bubble Matrix -- click for original](http://neuralengr.com/asifr/journals/)

Here's another one, where the third dimension is shown by colour instead of by size. The colours represent a continuous variable, but you could easily choose a set of high-contrast colours to represent categories:

Of course, a plain-old stacked bar chart is another way to show two categories and a numerical quantity:

And you don't have to stop at three data variables. If two of the data variables are either categories or numbers that you don't mind grouping into categories, you can graph four variables with a "small multiple" approach, where you create a table representing the categorical variables and then repeat a graph of the other two variables inside each table cell.

Like this:

Or this (where week and day-of-week are two dimensions of the data, and category/amount are the other two):

Pie Chart Small Multiples -- click for original

I hope that gave you lots of ideas...

这篇关于使用 D3.js 的 3 维(X、Y 和 Z)图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆