limscoder

type FunctionComponent<P, S> = (props: P, context: S) => ?React$Element<any>;
type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
type ReactComponent<D, P, S> = FunctionComponent<P, S> | ClassComponent<D, P, S>;

function ImmutableComponent<D, P, S, T: ReactComponent<D, P, S>>({ component: Component, componentProps }: {
  component: T,
  componentProps: P
}) {
  return <Component { ...componentProps }/>;
}

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

selection.attr('text', d => d.name)
  .style('color', d => (d.role === 'human' ? 'purple' : 'yellow'));

limscoder

const renderedUsers = d3.selectAll('li.app-user')
  .data(users, d => d.id);

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

const exitUsers = d3.select('ul.app-user-list')
  .selectAll('li.app-user')
  .data(users)
  .exit();

// remove stale elements from the document
exitUsers.remove();

limscoder

const userList = d3.select('ul.app-user-list');
const userSelection = userList.selectAll('li.app-user')
  .data(users);

const updateUsers = userSelection;
const enterUsers = userSelection.enter();
const exitUsers = userSelection.exit();

// blend from old color to new color
updateUsers.transition()

limscoder

// change the color of all .app-user elements 
d3.select('.app-user-list')
  .selectAll('.app-user')
  .style('color', 'green');

limscoder

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'

limscoder

// defines a path for a single hexagon.
const h = Math.sqrt(3) / 2;
const r = 30;
const x = 0;
const y = 0;
const hexPath = d3.line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(d3.curveCardinalClosed.tension('0.8'))([
    { x: r + x, y },