A while ago, I wrote some sample code to generate Euler diagrams from an array of dictionaries. Strangely enough, it only works when the array is explicitly defined in my .js file; using input from a .json file to construct it incrementally does not yield the desired results.
Below is the snippet of code that successfully produces the expected output:
var sets = [ {sets: ['A'], size: 12},
{sets: ['B'], size: 12},
{sets: ['A','B'], size: 2}];
// create the venn diagram, place in <div> with id="matrix_venn"
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);
However, my goal was to reconstruct this by extracting data from a json file. Here is the content of my json file named matrix_breakdown.json:
{
"A": 12,
"B": 12,
"A, B": 2
}
Here is the code I used to recreate the 'sets' variable for the diagram:
// import our json file with matrix counts
import data from './matrix_breakdown.json' assert { type: 'json' };
// set an array to append with dictionaries for set names and size
var sets = [];
for (let set in data) {
// get set names in a list
var set_split = set.split(',');
// get the set count (size)
var set_size = Number(data[set]);
// setup dictionary for appending to our sets array
var dict = {};
dict['sets'] = set_split;
dict['size'] = set_size;
// append our array with the set dictionary
sets.push(dict);
}
// create the venn diagram, place in <div> with id="matrix_venn"
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);
This resulted in the following error message: "Uncaught TypeError: Cannot read properties of undefined (reading 'size')"
Even after console.logging both variables, they appear identical to me. What could be causing the 'size' key to be undefined in this scenario?
Lastly, here is the HTML code that imports all necessary components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="matrix_venn"></div>
</body>
<!-- import d3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- import venn/euler diagram module -->
<script src="./venn/venn.js"></script>
<!-- import our code for producing the plot -->
<script type="module" src="./matrix_venn.js"></script>
</html>