Mermaid diagram of bottom-up data-driven web design

README.md

This though model tries to use to d3 to simplify the energy required for a scientist to make web ready content.

index.html

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mermaid/0.3.3/mermaid.full.min.js"></script>

<div class="mermaid">
graph TD;
  array-->d3{d3};
  d3[import data with d3]-->select[Select DOM nodes with CSS selectors];
  select-->data[Try to attach data to selection];
  data-->domstate((Are there enough DOM elements?));
  domstate-->|No|enter[enter];
  domstate-->|Yes|update[Update DOM __data__];
  enter-->app[Append __data__ and HTML];
  app-->html( Static HTML)
  update-->html
  html-->|JS to interact with data|function
  function-->|CSS styling|form
  
</div>