Search code examples
d3.jsheightwidthdimple.js

automatically set dimensions of d3/dimple data visualization for legibility

I'm trying to create a bar chart to visualize the number of Data-Science jerbs around the Federal Republic of Germany- right now it looks like this:

enter image description here

It's getting there, but it's not legible, which is a problem.

I want it to render in such a way that it will display the data in a comprehensible way no matter the size of the input file, i.e. it should be dynamic.

I know that data.length is the number of rows- but- what is meant by "rows", the number of lines in my input csv?

I've been recommended to use something like chart.setBounds(100, 100, data.length * k, 300) where k should be the height of the label + some margin. What is the best way to determine k?

I suppose that k is related to the y-axis and that really it is, or should be, just set by the maximum value of the inputs and that there isn't really much else I can do about that. Is it so?

I've been playing around with trying different values heuristically, i.e. trial and error- but that is clearly suboptimal.

What's a maintainable and effective way of always generating a map where the indices of the x-axis are all clearly readable and the y-axis is determined by the max value of inputs?

Here is the code I'm using to generate the bar chart. 

<!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 is a link to the data file Germany.csv on my GitHub).

Solution

  • Firstly I am iterating over the data that you have provided to remove all double quotes in the key and value of the json like this.

    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)
    })

    Then I make the width of the svg based on the data length.

    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;

    Set the width of svg an d chart like this

    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);

    working code 110 points here

    working code with all points here