I'm kind of new to D3.js. I'm reading Getting Started with D3 by Mike Dewar. I tried the very first example in the book, and it doesn't work. I've been tearing my hear out over this. What is wrong with my code here?
In the <head> section:
<script src=".js"></script>
<script>
function draw(data) {
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) {
return d.name + ": " + d.status;
});
}
</script>
In the <body>:
<script>
d3.json("flare.json", draw);
</script>
And the JSON file:
[
{
"status": ["GOOD SERVICE"],
"name": ["123"],
"url": [null],
"text": ["..."],
"plannedworkheadline": [null],
"Time": [" 7:35AM"],
"Date": ["12/15/2011"]
}
]
I'm kind of new to D3.js. I'm reading Getting Started with D3 by Mike Dewar. I tried the very first example in the book, and it doesn't work. I've been tearing my hear out over this. What is wrong with my code here?
In the <head> section:
<script src="http://mbostock.github./d3/d3.js"></script>
<script>
function draw(data) {
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) {
return d.name + ": " + d.status;
});
}
</script>
In the <body>:
<script>
d3.json("flare.json", draw);
</script>
And the JSON file:
[
{
"status": ["GOOD SERVICE"],
"name": ["123"],
"url": [null],
"text": ["..."],
"plannedworkheadline": [null],
"Time": [" 7:35AM"],
"Date": ["12/15/2011"]
}
]
- Try changing the script include to: <script src="d3js/d3.v3.min.js"></script>? – Tyanna Commented Feb 6, 2013 at 5:15
- Nope, still nothing. I think those are just two URLs to the same files. – user1781186 Commented Feb 6, 2013 at 13:14
4 Answers
Reset to default 5If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. Try Firefox to see if that's the case (it will probably let you load the file correctly).
If that is the problem, you will want to install a local web server like WAMP (if you're running Windows) or follow instructions on the wiki page here: https://github./mbostock/d3/wiki
Good luck
Have you checked your browser console to see if your XHR request was successful?
When I attempt to run the code on my machine, with a local version of d3 (v3) in VS 2012 Express, the XHR request es back with an error message:
HTTP Error 404.3 - Not Found
However, when I change the extension of the "flare" file from .json to .txt or .js, as alluded to here: https://serverfault./questions/39989/iis-cant-serve-certain-file-extension, then the XHR request succeeds.
Well d.name and d.status are both arrays and should be just strings if you want to show their contents or yo should be accessing the 0 index value of those arrays; I.e., d.name[0] + ':' + d.status[0];
It might be your JSON. I did the same exercise, and it worked fine. Here is my js(I appended to a div, not body). I'm running a local web server.
d3.json("data/mta001.json", drawli);
function drawli(data) {
"use strict";
d3.select('#mta001')
.append('ul')
.selectAll('ul')
.data(data)
.enter()
.append('li')
.text(function (d) {
return d.name + ': ' + d.status;
});
d3.selectAll('#mta001 li')
.style('color', function (d) {
if ( d.status == 'GOOD SERVICE') {
return 'green';
} else {
return 'fuchsia';
}
});
}
and here is my JSON:
[
{
"name": "123",
"status": "DELAYS",
"text": "delay text",
"Date": "12/08/2012",
"Time": " 1:03PM"
}
]