| license: mit | |
| border: no |
@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> |
