As a newcomer to D3, I am facing challenges in visualizing my json file. My task involves plotting the locations (sites) as circles with their radius determined by the "amount" value. The concept of working with nodes and links is causing me great confusion. I have included an example of the JSON code below. Any assistance in identifying errors within my code would be greatly appreciated.
<html>
<head>
<title>D3 Visualisation </title>
<h1> Trading Data </h1>
<style>
.svgCanvas {
border: solid 1px
}
</style>
</head>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script> <script>
window.onload = function(){
var width = 800;
var height = 300;
var thisCanvas = d3.select("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "svgCanvas");
d3.json("data.json", function(d){
console.log(d);
var svgCanvas.selectAll("circle")
.data(d).enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.amount; } )
.style("fill", “lightgreen”); })
})
}
</script>
</body>
</html>
The Json sample code looks like this:
{
"nodes": [
{
"id": "location09",
"x": 317.5,
"y": 282.5
},
{
"id": "location01",
"x": 112,
"y": 47
},
{
"id": "location03",
"x": 69.5,
"y": 287
}
],
"links": [
{"node01": "location05", "node02": "location08", "amount": 10},
{"node01": "location05", "node02": "location02", "amount": 120},
{"node01": "location05", "node02": "location03", "amount": 50}
]
}