How do I externalise my Data

Question

I am new to d3.js and Javascript and currently trying to build a graph using d3. My data is placed in a dataArray var currently but I want to externalise it. Every time I try use either another file or different data format it does not work. Here is my code:

<!DOCTYPE html>
<html>

<head>
  <meta>
  <meta http-equiv="refresh" content="">
  <meta name="description" content="Drawing Shapes w/ D3 - " />
  <meta charset="utf-8">
  <title>Resources per Project</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkgrey;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }
    h2 {
      font-size: 20px;
      color: black;
      font-family: Helvetica;
      text-decoration: underline;
      margin-left: 290px;
      margin-top: 0px;
    }
  </style>
</head>

<body>
  <h1>Resources used per Project</h1>
  <script type="text/javascript">
    var width = 600
    var height = 500
    var emptyVar = 0
    var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37];
    var emptyData = [];
    var widthScale = d3.scale.linear()
      .domain([0, 5])
      .range([0, width]);

    var color = d3.scale.linear()
      .domain([0, 5])
      .range(["#000066", "#22abff"])

    var axis = d3.svg.axis()
      .ticks("10")
      .scale(widthScale);

    var canvas = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(30, 0)");

    var bars = canvas.selectAll("rect")
      .data(dataArray)
      .enter()
      .append("rect")
      .attr("width", emptyVar)
      .attr("height", 50)
      .attr("fill", function(d) {
        return color(d)
      })
      .attr("y", function(d, i) {
        return i * 55
      })

     canvas.append("g")
      .attr("transform", "translate(0, 430)")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .call(axis);

    bars.transition()
      .duration(1500)
      .delay(200)
      .attr("width", function(d) {
        return widthScale(d);
      })
  </script>
  <h2>Resources</h2>
</body>

</html>

Attached are 2 files (one JSON and one CSV) which have the data I am trying to use. The data under "resources" is the current data in the dataArray. How do I externalise this data?

These may help. CSV: http://stackoverflow.com/questions/16231266/embedding-csv-in-html-for-use-with-d3-js JSON: http://stackoverflow.com/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom — Prashanth Chandra, Jun 27 '16 at 00:00

Klaujesi · Accepted Answer · 2016-06-27T00:56:56.317

If you want to load external data into D3. You have 2 option:

Option A: one single file (JSON or CSV or TSV)

d3.json("your.json", function (data) {
   // stuff here
})

or

d3.csv("your.csv", function (data) {
   // stuff here
})

or

d3.tsv("your.tvs", function (data) {
   // stuff here
})

Option B: multiples files (JSONs, CSVs and TSVs)

queue()
    .defer(d3.json, 'json_data.json')
    .defer(d3.csv, 'csv_data.csv')
    .defer(d3.tsv, 'tsv_data.tsv')
    .await(makeGraph);

function makeGraph (json_data, csv_data, tsv_data, error) {
    //your stuff here
}

To use queue you must to include the script at your header:

<script src="http://d3js.org/queue.v1.min.js"></script>

Queue await for all data to arrival and then execute the function.

JSON: JavaScript Object Notation
CSV: Comma Separated Values
TSV: Tab Separated Values

Then your code:

var width = 600
var height = 500
var emptyVar = 0
var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37];
var emptyData = [];
var widthScale = d3.scale.linear()
  .domain([0, 5])
  .range([0, width]);

var color = d3.scale.linear()
  .domain([0, 5])
  .range(["#000066", "#22abff"])

var axis = d3.svg.axis()
  .ticks("10")
  .scale(widthScale);

var canvas = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(30, 0)");

queue()
    .defer(d3.json, 'json_data.json')
    .defer(d3.csv, 'csv_data.csv')
    .await(makeGraph);

function makeGraph(json_data, csv_data, error) {
    if (error) {
       alert ("something went wrong!!");
    }
    var bars = canvas.selectAll("rect")
      .data(your_data_from_json_or_csv)
      .enter()
      .append("rect")
      .attr("width", emptyVar)
      .attr("height", 50)
      .attr("fill", function(d) {
        return color(d)
      })
      .attr("y", function(d, i) {
        return i * 55
      })

     canvas.append("g")
      .attr("transform", "translate(0, 430)")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .call(axis);

    bars.transition()
      .duration(1500)
      .delay(200)
      .attr("width", function(d) {
        return widthScale(d);
      })
}

How do I externalise my Data

1 Answers1