Search code examples
d3.jsdimple.js

d3.js and dimple, reading data in from a file rather than hard coded

I'm trying to transition from a hard-coded version of a Dimple/D3 visualization which works well, and a more "dynamic" one that reads data in from a file, however, I'm finding it quite problematische.

Here is more or less what I'm going for:

enter image description here

Towards that aim, the following code works perfectly, i.e. it generates exactly that image you just saw:

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

<script>

console.log(data);

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
          { '"loc"': '"Hamburg, Deutschland"', '"title"': "CNC-Dreher/in" },
          { '"loc"': 'M?nchen (Kreis), Bayern', '"title"': "Data Scientist" },
          { '"loc"': '"D?sseldorf, Nordrhein-Westfalen"', '"title"': "Praktikant m|w" },
          { '"loc"': '"Rheinland-Pfalz, Deutschland"', '"title"': "Senior Softwareentwickler Logistikdienstleistung(w/m)" },
          { '"loc"': '"D?sseldorf, Nordrhein-Westfalen"', '"title"': "Projektmanager (m/w) Information Engineering" },
          { '"loc"': '"Grimma, Leipzig (Kreis)"', '"title"': "Softwareentwickler (m/w)" },
          { '"loc"': '"Hannover, Region Hannover (Kreis)"', '"title"': "Bauleiter (m/w)" },
          { '"loc"': '"M?nchen (Kreis), Bayern"', '"title"': "Backend Software Developer (m/f)" },
          { '"loc"': '"Ratingen, Mettmann (Kreis)"', '"title"': "Ausbildung Industriekaufmann (m/w)" },
          { '"loc"': '"Bayern, Deutschland"', '"title"': "Dualer Studiengang Bachelor of Arts (Fachrichtung Bank/Vertrieb) Bayern" },
          { '"loc"': '"Landshut, Landshut (Kreis)"', '"title"': "Spezialist CFK m/w" },
          { '"loc"': '"Frankfurt am Main, Hessen"', '"title"': "Data Analyst / Consultant analytisches CRM (m/w) f?r unseren Premium Partner EDEKA" },
          { '"loc"': '"Hamburg, Deutschland"', '"title"': "Produktmanager (m/w) im Bereich Privat Kraft" },
          { '"loc"': '"Unterf?hring, M?nchen (Kreis)"', '"title"': "Controller / Assistent der Gesch?ftsleitung" },
          { '"loc"': '"Berlin, Deutschland"', '"title"': "Projektmanager (m/w)" },
          { '"loc"': 'Royal Leamington Spa', '"title"': "SOFTWARE TEST ENGINEER / QA (m/w)" },
          { '"loc"': '"Lauf an der Pegnitz, N?rnberger Land (Kreis)"', '"title"': "Bilanzbuchhalter/in" },
          { '"loc"': '"Buchenb?hl, N?rnberg"', '"title"': "Inhouse Business Intelligence Berater (m/w)" },
          { '"loc"': '"Berlin, Deutschland"', '"title"': "Praktikant Vertriebscontrolling (m/w) f?r die Dauer von 6 Monaten (Pflichtpraktikum)" }
        ];
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]);

lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;

chart.draw();

</script>

However when I attempt to load the data from an external file (link to said file on my GitHub), which is much much larger, (with very similar characteristics as the toy data in the code above) I get an error- or- in fact- I get a map that is essentially meaningless, here is photo of that despicable mess, followed by the code from the latest iteration of what I have been using:

enter image description here

In that one point "loc" is undefined and "title" is 0.0.

<!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">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.csv("Germany.csv", draw);
  </script>
</body>

</html>

QUESTION

So as you can see, what I'm trying to do is just read the data in from that file on my GitHub rather than hard coding it- how to do that?

--> Could this possibly have something to do with the size of the file being too large for the bounds of the svg? I kind of doubt it, because I've been trying with small subsets of that Germany.csv file and encountering the same issue.

I was once told that it would be possible manipulate the data using a variable as I've done with the first example above, something like:

var data;

d3.csv("nameOfCsv.csv", function(thisData) {
      data = thisData;
    }

but in fact that code snippet doesn't work, for starters it's missing a ), and I've never gotten anything like it to work before- so- I'm not sure that it's a reasonable way to go.

--------------------

UPDATE @MauricioPoppe solved it, but the sizing is a bit wonky, is there a way to make the look better dynamically, maybe with css or something?

enter image description here

Solution

  • Your csv shows that each field is wrapped inside a single space therefore instead of 

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

    You should use

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


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

};

d3.csv('https://raw.githubusercontent.com/s-matthew-english/bookish-adventure/master/data/Germany.csv', draw)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>