Skip to content

Instantly share code, notes, and snippets.

@eesur
Last active May 25, 2017 18:42
Show Gist options
  • Save eesur/765098d96d743269606eca638280fdd2 to your computer and use it in GitHub Desktop.
Save eesur/765098d96d743269606eca638280fdd2 to your computer and use it in GitHub Desktop.
d3 | object literal as data
// data is an object literal
var data = {
'key_1': 10,
'key_2': 20,
'key_3': 30,
'key_4': 40,
'key_5': 50
}
// we create a nested array of the keys and map them with the values
var listData = d3.keys(data).map(function (d) { return [d, data[d]]; })
console.log(listData)
// just to make this sketch fun
var sizeScale = d3.scaleLinear()
.domain([0, 80])
.range([
'normal 18px/40px Consolas, monaco, monospace',
'normal 160px/200px Consolas, monaco, monospace'
])
// list them out
listAllData(listData)
function listAllData(_data) {
var update = d3.select('ul.js-info')
.selectAll('li')
.attr('class', 'ml1 mb4')
.data(_data)
var enter = update.enter()
.append('li')
.merge(update)
.style('font', function (d) {
console.log(d[1])
console.log(sizeScale(d[1]))
return sizeScale(d[1])
})
.html(function (d) { return ("<span>" + (d[0]) + ":</span> " + (d[1])); })
update.exit().remove()
}

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]
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- http://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>
// data is an object literal
const data = {
'key_1': 10,
'key_2': 20,
'key_3': 30,
'key_4': 40,
'key_5': 50
}
// we create a nested array of the keys and map them with the values
const listData = d3.keys(data).map(d => [d, data[d]])
console.log(listData)
// just to make this sketch fun
const sizeScale = d3.scaleLinear()
.domain([0, 80])
.range([
'normal 18px/40px Consolas, monaco, monospace',
'normal 160px/200px Consolas, monaco, monospace'
])
// list them out
listAllData(listData)
function listAllData(_data) {
const update = d3.select('ul.js-info')
.selectAll('li')
.attr('class', 'ml1 mb4')
.data(_data)
const enter = update.enter()
.append('li')
.merge(update)
.style('font', d => {
console.log(d[1])
console.log(sizeScale(d[1]))
return sizeScale(d[1])
})
.html(d => `<span>${d[0]}:</span> ${d[1]}`)
update.exit().remove()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment