Years ago, I came across some outdated solutions for D3 which have since changed. As a complete beginner with D3.JS, I'm currently exploring it to enhance my understanding.
In the same folder as my D3 file, I have a json file named mydata.json. Here's what the content of the json file looks like...
[
{"name": "Maria", "age": 30},
{"name": "Fred", "age": 50},
{"name": "Francis", "age": 12}
]
The script along with the entire file appears as follows...
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
d3.json("mydata.json").then(function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.age * 2; })
.attr("height", 50)
.attr("y", function (d, i) { return i * 50;})
.attr("fill", "blue")
})
</script>
</body>
I've been trying to troubleshoot my code as no basic graph is being displayed. Can anyone provide suggestions?
Extra!
To debug, I added console.log(data) and received the following error message:
d3.v5.min.js:2 Fetch API cannot load file:///C:/Users/Tom/Desktop/D3.JS%20practice/mydata.json. URL scheme "file" is not supported.
t.json @ d3.v5.min.js:2