自动设置 d3/dimple 数据可视化的维度以提高易读性

Question

我正在尝试创建一个 bar chart 来可视化德意志联邦共和国周围的 Data-Science jerbs 的数量 - 现在它看起来像这样：

它到达那里，但它不清晰，这是一个问题。

我希望它以这样一种方式呈现，无论输入文件的大小如何，它都能以一种易于理解的方式显示数据，即它应该是动态。

我知道 data.length 是行数 - 但是 - "rows" 是什么意思，我输入的 csv 中的行数？

有人建议我使用 chart.setBounds(100, 100, data.length * k, 300) 之类的东西，其中 k 应该是标签的高度 + 一些边距。确定 k 的最佳方法是什么？

我想 k 与 y-axis 相关，而且实际上它是，或者应该是，只是由输入的最大值设置，并没有太多其他我可以做到这一点。是这样吗？

我一直在试探性地尝试不同的值，即反复试验——但这显然不是最优的。

什么是始终生成地图的可维护且有效的方法，其中 x-axis 的索引都清晰可读，而 y-axis 由输入的最大值决定?

这是我用来生成条形图的代码。

<!DOCTYPE html>


<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>

<script type="text/javascript">
  function draw(data) {

  "use strict";
  var margin = 75,
      width = 9000 - margin,
      height = 600 - margin;

  var svg = d3.select("body")
              .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
              .append('g')
              .attr('class','chart');


  var chart = new dimple.chart(svg,data);
  chart.setBounds(100, 100, 500, 300);

  var x = chart.addCategoryAxis("x", '"loc"');
  var y = chart.addMeasureAxis("y", '"title"');

  var lines = chart.addSeries(["project"], dimple.bar, [x, y]);


  chart.draw();

  };

</script>

<body>
  <script type="text/javascript">

  d3.csv("Germany.csv", draw);
  </script>
</body>

</html>

(This 是我GitHub上的数据文件Germany.csv的link。

Answer 1

首先，我将遍历您提供的数据，以像这样删除 json 的键和值中的所有双引号。

datas = [];
data.forEach(function(d) {
      var ob = {};
      for (var key in d) {
        var k = key.replace(/"/g, "").trim();//remove all double quotes and trim
        var v = d[key].replace(/"/g, "").trim();//remove all double quotes and trim
        ob[k]=v;
      }
      datas.push(ob)
    })

然后我根据数据长度制作svg的宽度

var width = data.length*5 -margin;//5 is a constant width of the text label font
if (width < 500)//set the minimum width in case data set is low.
  width =600;

像这样设置svg和d图表的宽度

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin)//set the calcuated width to svg
//set  width to the chart object
chart.setBounds(100, 100, width -margin, 300);

工作码110分here

所有点的工作代码here

自动设置 d3/dimple 数据可视化的维度以提高易读性

automatically set dimensions of d3/dimple data visualization for legibility

height

width

d3.js

dimple.js