import d3 data in a React component

Question

So, i'm trying to import data to draw a line chart. The following :

import input from './data.json';

d3.json(input, function(err, d){
  console.log(d)
});

Doesn't work, and returns:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

That's data.json :

[
    {"date" : "12/09/17", "value": 83, "module": 0},
    {"date" : "19/09/17", "value": 79, "module": 1},
    {"date" : "26/09/17", "value": 78, "module": 2},
    {"date" : "30/09/17", "value": 73, "module": 3},
    {"date" : "08/10/17", "value": 71, "module": 4},
    {"date" : "15/10/17", "value": 67, "module": 5},
    {"date" : "22/10/17", "value": 65, "module":6}
]

If I attempt to import the data in csv format, it does not work either. With a console log in the d3.csv function, it will log 0, 1, 2, 3, 4 .... basically the index of each data.

What am I missing here ? Is it something wrong with the way data is imported ? I'm struggling to identify what is wrong. I've browsed several examples on blockbuilder. There aren't many ways to import data.

EDIT : my react component :

class Reactchart extends React.Component {

    componentDidMount(){
      this.myfunc();
    }

    componentDidUpdate(){
      this.myfunc();
    }

    myfunc() { 
        d3.json(input, function(err, d){ 
            console.log(d) }); 
        } 
    }
}

Matt · Answer 1 · 2019-02-20T01:00:14.327

0

You could use require instead of import.

let data = require("./data.json");

Edit: I was just reading the answer to a similar question and it seems that you can import json files but your syntax is off:

import * as input from "./data.json";

Edit: example:

import * as input from "./data.json";

class Chart extends React.Component {
    constructor() {
        console.log(input);
    }

    render() {
        // just use 'input' as-is, it's a json object
        d3.select("svg")
          .append("svg")
          .selectAll("rect")
          .data(input)
          .enter()
          // ... all your d3 attr() etc
    }
}

edited Feb 20 '19 at 01:00

answered Feb 19 '19 at 04:54

Matt

3,677
1
14
24

Here's my React component : `class Reactchart extends React.Component { componentDidMount(){ this.myfunc(); } componentDidUpdate(){ this.myfunc(); } myfunc() { d3.json(input, function(err, d){ console.log(d) }); } }` – John Doe Feb 19 '19 at 09:00
can you share your react component where you say both versions work for you ? I'm not sure what it is I am doing wrong here. – John Doe Feb 19 '19 at 09:02
I just made a simple component and printed out the value of the json data (see edit). Is the path to your json file correct? – Matt Feb 19 '19 at 09:27
well, yes, that works. That's not the problem. The problem is with the d3.json function. Sorry if that was not clear in my first post. – John Doe Feb 19 '19 at 09:38
Ah ok I see the problem now. You are calling `d3.json()` but that function expects a path to the json object, no the json object itself. Because you've already parsed the json file into an object (import / require) you can just go ahead and use it i.e. `d3.select("svg").append("svg").data(data).enter()...` You don't need to call `d3.json()`. – Matt Feb 19 '19 at 10:17
ok. So I was looking at samples on blockbuilder to understand how to import the data. In all examples, the data is imported with d3.json (or d3.csv, d3.tsv). As in here : https://blockbuilder.org/denisemauldin/e60c610fa4d615472e9a83b9969e9103 In the above example, the data is imported in json format. If I do this : `d3.json('./input.json', function(err, d) { console.log(d); });` it does not work either. I tested my input.json file with a json formater and validator. I get the same error message : `JSON.parse: unexpected character at line 1 column 1 of the JSON data` – John Doe Feb 19 '19 at 11:12
Those examples aren't react projects. `.json()` just reads the json file and executes your callback. You can skip that if you already read the file with require or import. – Matt Feb 19 '19 at 11:19
ok I get it. But now, why does it not work if I import the data in the d3.json function ? as in `d3.json('./input.json', function(err, d) { console.log(d); });`, without requiring the data before that. Do you know ? – John Doe Feb 19 '19 at 11:48
I'm not sure, but I think Webpack is running the import statements at build time (when the path makes sense) whereas d3.json() runs at runtime and the json file has been packed into the bundle and the path no longer makes sense. – Matt Feb 19 '19 at 21:25
yeah, now that you say it, that would make sense. Thanks for your kind replies. I'll have to adapt the code i'm guessing :) – John Doe Feb 20 '19 at 00:35

import d3 data in a React component

1 Answers1