Currently, I am in the process of learning D3 using various tutorials. Here is the code snippet I have been working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
function draw(data)
{
"use strict";
console.log("test");
console.log(data);
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) { return d.NAME + ": " + d.FACILITYID; });
}
</script>
</head>
<body>
<script>
d3.json("http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=NAME&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&f=json",
function(error,json)
{
if(error) return console.warn(error);
data = json;
console.log(data);
}
);
</script>
</body>
</html>
The dataset corresponds to ESRI Feature Classes for Parks. Although each park contains a multitude of attributes, I am facing difficulties accessing them within my script. While I have successfully achieved this using regular Javascript on this link, adapting it to D3 has proven challenging. Since my experience with D3 is limited, specifically how to access fields like NAME or FACILITYID for each Park remains unclear. My current approach involves extensively using Console.Log statements to troubleshoot and understand the data structure better.