@currankelleher‘s block Posts with d3-component, remixed with some hipster ipsum
colors
from the Sunlight Foundation DataViz Style Guide
This example demonstrates basic usage of d3-component. Three components are created:
heading Renders an <h1> element and sets its text.paragraph Renders a <p> element and sets its text.post Renders a <div> element with a class of "post", and composes the heading and post components.Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://unpkg.com/d3@4'></script>
<script src='https://unpkg.com/d3-component@3'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
<style>
#container{
margin: 20px;
padding: 20px;
border-radius: 5px;
border: 1px solid lightgray;
}
h1 {
color: #635F5D;
}
p {
color: #8E8883;
}
</style>
</head>
<body>
<div id='container'></div>
<script>
const heading = d3.component('h1')
.render(function (selection, d) {
selection.text(d);
});
const paragraph = d3.component('p')
.render(function (selection, d) {
selection.text(d);
});
const post = d3.component('div')
.render(function (selection, d){
selection
.call(heading, d.title)
.call(paragraph, d.content);
});
d3.select('#container').call(post, [
{
title: 'The First Post',
content: 'Meggings street art keytar cardigan disrupt narwhal, readymade tousled woke celiac sustainable vice fap. Chambray bitters typewriter, pop-up coloring book vinyl butcher tofu kale chips chartreuse affogato messenger bag. Semiotics chillwave four loko banjo master cleanse, hot chicken hashtag selfies pickled before they sold out celiac mixtape.'
},
{
title: 'The Second Post',
content: ' Af poutine next level, vaporware la croix lomo affogato chartreuse twee hella. Locavore actually leggings mlkshk. Fixie art party tofu pok pok 8-bit, shoreditch knausgaard. Leggings cardigan man bun raclette, artisan hammock wolf schlitz street art pinterest forage taxidermy vexillologist yuccie.'
},
{
title: 'The Third Post',
content: 'Literally leggings before they sold out mlkshk fashion axe kogi. Asymmetrical fingerstache blue bottle squid lyft, tilde brooklyn everyday carry. Wayfarers gluten-free meditation semiotics fap occupy. Occupy asymmetrical vegan, meh messenger bag four loko migas marfa live-edge flannel woke hashtag kinfolk iPhone mustache.'
},
]);
</script>
</body>