I’m trying to display values from a dictionary in d3. I’m using two different datasets. One for constructing a Treemap, and the other for displaying information in a hovering tooltip. I’ve gotten to where the user can hover over the treemap and the display() function can access the object using an element id. But when I run index.html the display shows [Object,object] for each of the 5 values in the key.
The data I want to display in the tooltip is shown in the console
Console
How can I access the values from this dictionary to display in the tooltip?
function main() {
// set dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 645 - margin.left - margin.right,
height = 645 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.csv, "data/Genre Average Score Treemap Data.csv")
.defer(d3.csv, "data/Top Five Albums Each Genre.csv")
.await(function(error, file1, file2) {
if (error) {
console.error('Oh dear, something went wrong: ' + error);
}
else {
makeTreemap(file1,file2);
}
});
function makeTreemap(treeData,toolData) {
// stratify the data: reformatting for d3.js
var root = d3.stratify()
.id(function(d) { return d.genre; }) // name of the entity
.parentId(function(d) { return d.parent; }) // name of the parent (column name is parent in csv)
(treeData);
root.sum(function(d) { return +d.score }) // compute the numeric value for each entity
// d3.treemap computes the position of each element of the hierarchy
// the coordinates are added to the root object above
d3.treemap()
.size([width, height])
.padding(4)
(root)
let leafs = root.leaves()
var entries = d3.nest()
.key(function(d) { return d.genre; })
.entries(toolData);
// d.id to get genre name
// console.log(leafs);
// mapped each key from each object in nested array
var eachKey = d3.values(entries).map(function(d){ return d.values[0].genre });
// mapped each values from each object in the nested array
var eachValues = d3.values(entries).map(function(d){ return d.values });
function makeDict(keys, values) {
let x = {}
for (let i=0; i < keys.length; i++){
tools[keys[i]] = values[i];
}
return x;
}
const toolDisplay = makeDict(eachKey, eachValues);
function display(elem) {
// elem.id to get genre string
// console.log(elem.id)
// toolDisplay which gives the values from each genre
console.log(toolDisplay[elem.id]);
return toolDisplay[elem.id];
}
// use the above information to add rectangles:
svg
.selectAll("rect")
.data(leafs)
.enter()
.append("rect")
.attr('x', function(d) {return d.x0; })
.attr('y', function(d) {return d.y0; })
.attr('width', function(d) {return d.x1 - d.x0; })
.attr('height', function(d) {return d.y1 - d.y0; })
.style("stroke", "black")
.style("fill", "#FBFFF1")
.on('mouseover', function(d) {
d3.select(this)
.style("fill", "#DE9E36")
display(d);
})
.on("mouseout", function() {
d3.select(this)
.style("fill", "#FBFFF1");
});
// create variable for rounding review score 2 decimal places
const f = d3.format(".2f");
// add text labels
svg
.selectAll("text")
.data(root.leaves())
.enter()
.append("text")
.attr('x', function(d) { return d.x0+10 }) // +10 to adjust position (more right)
.attr('y', function(d) { return d.y0+20 }) // +20 to adjust position (lower)
.text(function(d){ return d.data.genre + "rn " + f(+d.data.score)
})
.attr("font-size", "16px")
.attr("fill", "black")
}
}
main()<!DOCTYPE html>
<meta charset="utf-8">
<!-- load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/javascript"></script>
<!-- Create div where the graph takes place -->
<div id="my_dataviz"></div>
<body>
<script src="treemap2.js"></script>
</body>