Object vizualization using cluster

by Marlin Forbes

HTML

<ul class="object"></ul>

CSS

* {
    font-family: sans-serif;
    font-size: medium;
}
.key::after {
    // content:':\0000a0';
}
.key, .value {
    padding: 6px;
    display: inline-block;
}
.key {
    background-color: salmon;
}
.value {
    background-color: lightblue;
}
.object {
    color: white;
    background-color: wheat;
    display: inline-block;
    margin: 0;
    padding: 6px;
    list-style-type: none;
}
.object .property {
    margin: 6px;
}

CoffeeScript

object =
    prop1: 'value1'
    prop2: 'value2'

data = []
for own key, value of object
    data.push key: key, value: value
    
li = d3.select('ul.object')
    .selectAll('li')
    .data(data)
    .enter()
    .append('li')
        .classed('property', true)
    
li.append('div')
    .classed('key', true)
    .text((d) -> d.key)

li.append('div')
    .classed('value', true)
    .text((d) -> d.value)