31:[] 2f:{"title":"Drawing Objects Procedurally","cells":[{"id":0,"value":"# Drawing Objects Procedurally\nOnce we have the basic HTML and SVG tags (objects) in hand, and we can assign them attributes or style properties, we can pretty quickly see how typing all of this out by hand would be horrible for anything more than a simple set of graphics. How do we then tie this to large data or to a procedure to draw a whole lot of these objects and properties at once, with control?","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"This is where d3 comes in. **[d3](https://d3js.org)** is a library that procedurally (through a set of structured rules) creates these objects for us, without us having to type out all of the elements.\n\nInstead, we type out the rules. \nThis page is just barely an introduction.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"### Example 1: let's make a color mosaic, of a certain count:\nThis one uses the HTML ```

``` element as the graphic object. \nRefresh (run cell >) and you'll see it picks a new color for each box each time.","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"

","pinned":true,"hidden":false,"mode":"html"},{"id":35,"value":"count = 200 // change this number and hit Run Cell >","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":30,"value":"randColor = () => {\n let r = Math.random() * 255;\n let g = Math.random() * 255;\n let b = Math.random() * 255;\n return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"boxes = d3.select(mosaic)\n .selectAll(\"div\")\n .data(d3.range(count))\n .join(\"div\")\n .style(\"background-color\", randColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"#### Mosaic Explanation:\nThe ```

``` is the basic container that we draw new div objects into. \nThe ```