<style>
 li.box {
  width: 200px;
  height: 150px;
  list-style-type: none;
  float: left;
  border: 1px solid lightgray;
  margin: 10px;
  overflow: hidden;
}
h2  {
  
clear: left;
}

</style>
# D3 Components

  - [d3-barchart-gh.js](d3-barchart-gh.js) [html](d3-barchart-gh.html) <br> ![](d3-barchart-gh.png){width="200px"} {.box}
  - [d3-barchart.js](d3-barchart.js) [html](d3-barchart.html)  <br> ![](d3-barchart.png){width="200px"} {.box}
  - [d3-boxplot.js](d3-boxplot.js) [html](d3-boxplot.html) <br> ![](d3-boxplot.png){width="200px"} {.box}
  - [d3-bubblechart.js](d3-bubblechart.js) [html](d3-bubblechart.html) <br> ![](d3-bubblechart.png){width="200px"} {.box}
  - [d3-bundleview.js](d3-bundleview.js) [html](d3-bundleview.html) <br> ![](d3-bundleview.png){width="200px"} {.box}
  - [d3-graphviz](open://d3-graphviz) [js](d3-graphviz.js) [html](d3-graphviz.html) <br> ![](d3-graphviz.png){width="60px"} {.box}
  - [d3-plaintree.js](d3-plaintree.js) [html](d3-plaintree.html) <br> ![](d3-plaintree.png){width="200px"} {.box}
  - [d3-polymetricview.js](d3-polymetricview.js) [html](d3-polymetricview.html)  <br> ![](d3-polymetricview.png){width="200px"} {.box}
  - [d3-radialtree.js](d3-radialtree.js) [html](d3-radialtree.html) <br> ![](d3-radialtree.png){width="200px"} {.box}
  - [d3-treemap.js](d3-treemap.js) [html](d3-treemap.html)<br> ![](d3-treemap.png){width="200px"} {.box}
  - [graphviz-dot.js](graphviz-dot.js) [html](graphviz-dot.html)  <br> ![](graphviz-dot.png){width="100px"} {.box}

## Helper
  - [d3-component.js](d3-component.js) [html](d3-component.html)
  - [d3-tree.js](d3-tree.js) [html](d3-tree.html)
  - [d3-box.js](d3-box.js)
<!-- 
<script>
import Files from "src/client/files.js"
var md = lively.query(this, "lively-markdown");
Files.generateMarkdownFileListing(md.shadowRoot)
</script>
-->