I can't get the data to show up in my stand-alone web example. No matter what format I put the data in, I can't get it to display like it does here in this notebook. I have tried just assigning it as a string (JSON format), JSON, etc. I have tried JSON.parse(graph). Not sure how else to pass this info to the function to get the data to load properly. My code in my web page is exactly like the code below. There must be a difference in how the data is set up here in the notebook. If anyone has any experience in both worlds and can help me understand the nuances of the data I would greatly appreciate it.
TIA
I could really use a hand from anyone who has done this both in notebook and stand-alone web apps. No matter how I format the data in my web app, I can't get the values to load properly. I always get a TypeError: values is undefined - it is in the D3 v7 library in a function called map$1, so I am not sure what the problem is - except that it seems that the data structure didn't parse properly, so the map function didn't load the values properly. I don't know why it works here in Observable and won't on a stand-alone web app.
It is the same data used here in the notebook. I tried quoting the entire string (as below) and also unquoted: var graph = {"nodes"....
I have tried bringing the data into a variable called "sampledata" and using both JSON.stringify() and JSON.parse() to load it to the graph variable. No dice.
No matter whether I directly bring it into the graph variable as text and hand it to the program, or try to use the JSON functions, it always returns the same problem, "TypeError: values is undefined" which implies that the data format isn't being parsed properly.
var graph = '{"nodes": [{"id": "1", "group1": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "2", "group1": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "3", "group1": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "4", "group2": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "5", "group2": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "6", "group2": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "7", "group3": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "8", "group3": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "9", "group3": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "10", "group4": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "11", "group4": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "12", "group4": "Cited", "radius": 2, "citing_patents_count": 2},{"id": "13", "group4": "Cited", "radius": 2, "citing_patents_count": 2}],"links": [{"source": "1", "target": "2", "value": 2}, {"source": "2", "target": "3", "value": 2}, {"source": "3", "target": "6", "value": 2}, {"source": "2", "target": "3", "value": 2}, {"source": "5", "target": "6", "value": 2}, {"source": "7", "target": "8", "value": 2}, {"source": "8", "target": "9", "value": 2}, {"source": "10", "target": "11", "value": 2}, {"source": "3", "target": "5", "value": 2}, {"source": "1", "target": "5", "value": 2} ]}';
// const graph = JSON.stringify(sampledata);
I did (see my description above). I created: var sampledata = the data
then
graph = JSON.parse(sampledata);
It doesn't throw an error, but it also doesn't render a graph (so far the best outcome, but still no graph...)
Beginning to suspect that I am not attaching the SVG to the div in the body properly.