eesur/.script-compiled.js

## .script-compiled.js
// 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()

}


## README.md

      
    Raw
  

              README.md
            
          
    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]
]


## index.html
<!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>


## preview.png

      
    Raw
  

              preview.png
            
          
## script.js
// 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()

}


## thumbnail.png

      
    Raw
  

              thumbnail.png
	// 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()

	}
	<!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()

	}