was just making some tools and wanted to pass in an object (instead of an array) to render out it's details using enter update loop; thought it may be useful to make a sketch, the transformation of this data (the object literal):
const data = {
'key_1': 10,
'key_2': 20,
'key_3': 30,
'key_4': 40,
'key_5': 50,
}
if we create a nested array of the keys and map them with the values:
const newData = d3.keys(data).map(d => [d, data[d]])
we get this back (which we can now pass into our data():
[
["key_1",10],
["key_2",20],
["key_3",30],
["key_4",40],
["key_5",50]
]
xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <!-- https://www.basscss.com/ --> <link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet"> <style> body { color: #FDBB30; background: #130C0E; } span { opacity: 0.3; } </style></head><body> <ul class="list-reset js-info ml4"></ul><script src="https://d3js.org/d3.v4.min.js"></script><!-- d3 code --><script src=".script-compiled.js" charset="utf-8"></script><script> // change frame height d3.select(self.frameElement).style('height', '550px');</script></body></html> https://d3js.org/d3.v4.min.js