30:[] 2e:{"title":"Introduction to D3","cells":[{"id":0,"value":"md`# Introduction to D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Loading data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"dataUrl = \"https://visdown.com/data/cars.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`d3.csv loads everything as strings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"stringNum = \"42\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"+stringNum","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = d3.csv(dataUrl, parse)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"function parse(datum) {\n return {\n brand: datum.brand,\n model: datum.model,\n price: +datum.price,\n type: datum.type,\n kmpl: +datum.kmpl,\n bhp: +datum.bhp\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Filter, Sort`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function square (x) {\n return x*x\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"data.filter( filterCriteria )","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"function filterCriteria (d) {\n return d.type === \"Hatchback\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"function sortCriteria (a, b) {\n return a.price - b.price\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"// Filter and the Sort\ndata.filter( filterCriteria )\n .sort( sortCriteria )","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`## Make a Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"vegalite = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"vegalite({\n data: {values: data },\n mark: \"bar\",\n encoding: {\n x: {field: \"model\", type:\"N\"},\n y: {field: \"price\", type: \"Q\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`Decide how big we want the widht and height of the screen, margin`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"margin = ({top: 20, right: 30, bottom:20, left: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"margin1 = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"width = 800 - margin.right - margin.left","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"height = 300 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"simpleData = [5, 25, 15, 20, 10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"barPadding = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.selectAll(\"rect\")\n .data(simpleData)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * width / data.length)\n .attr(\"y\", d => height - (d * 8))\n .attr(\"width\", width / data.length - barPadding)\n .attr(\"height\", d => d * 8)\n .attr(\"fill\", \"brown\");\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"chart3 = {\n const svg = d3.select(DOM.svg(600, 100))\n const circles = svg.selectAll(\"circle\")\n .data(simpleData)\n \n circles.enter().append(\"circle\")\n .attr(\"cx\", (d,i) => (i*100 + 50))\n .attr(\"cy\", 50 )\n .attr(\"r\", d => d )\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"{\n const div = d3.select(DOM.element(\"div\", {\"id\": \"vis\"}));\n \n d3.selectAll('p')\n .data(simpleData)\n .enter()\n .append('p')\n .text( d => d);\n \n return div\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}