31:[] 2f:{"title":"Data and the DOM","cells":[{"id":0,"value":"md`# Data and the DOM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`In this notebook, I'll focus on getting data into Observable, and get a grasp of how we can use D3 with the Observable interface to create, modify, and delete DOM elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`We can write normal html in Observable like this`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`

I am a paragraph!

And I am a div

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`But what will be more relevant for us is to use d3 to modify the DOM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n let mydiv = html`

`\n d3.select(mydiv).append(\"p\").text(\"I made this with d3\")\n return(mydiv);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n let mydiv = html`

This shouldn't change

`;\n d3.select(mydiv)\n .append(\"p\")\n .text(\"This should be red\")\n .classed(\"fun-class\", true);\n \n d3.select(mydiv)\n .select(\".fun-class\")\n .style(\"color\", \"red\");\n \n return(mydiv);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`Do I dare to try drawing something with SVG+d3?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n const dat = [10, 30];\n const height = 100;\n const width = 300;\n const svg = DOM.svg(width, height);\n \n d3.select(svg)\n .selectAll(\"circle\")\n .data(dat)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d * 4)\n .attr(\"cy\", 50)\n .attr(\"r\", d => d)\n .attr(\"fill\", \"orange\");\n\n return(svg);\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`I don't know much about scales yet, but let's just try something`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"{\n //this is mostly copied from Mike's intro to HTML notebook\n const height = 200;\n const width = 1000;\n const svg = DOM.svg(width, height);\n \n const dots = d3.range(100, 0, -10);\n const color = d3.scaleSequential(d3.interpolateMagma).domain([0, 100]);\n \n d3.select(svg)\n .selectAll(\"circle\")\n .data(dots)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d * d/dots.length)\n .attr(\"cy\", 100)\n .attr(\"r\", d => d)\n .attr(\"fill\", d => color(d));\n \n return svg;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`## Data\n\nHere I'll try reading in a dataset that I'll be working on over this project`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"freedom = d3.csv(\"https://gist.githubusercontent.com/will-r-chase/3f4503ccfe9d7a559023ce62cfafbe6c/raw/b45c9cc5b512a36f7a4ae2755b03a6acb39be489/human_freedom_index_2018.csv\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}