posts with d3-component | hipster ipsum

@currankelleher's block Posts with d3-component, remixed with some hipster ipsum

colors

text 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>

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js