25:["$","title",null,{"children":"D3.js Made Easy | Danilo Fiumi | Observable"}] 4b:[{"id":"493f6690d208a2641bdc1819a41139393cca847b373cb98af77fc2d788fe661dba402d2e2fe5449d37367ef8dc0bb432aac519f5fcd5a18ed198d1af6748a6ef","href":"https://static.observableusercontent.com/files/493f6690d208a2641bdc1819a41139393cca847b373cb98af77fc2d788fe661dba402d2e2fe5449d37367ef8dc0bb432aac519f5fcd5a18ed198d1af6748a6ef","name":"CLASS.csv","type":"text/csv","lastModified":1647215111860.716,"size":414}] 47:{"id":"b604dc83ac2d3a87","slug":"d3-js-made-easy","title":"D3.js Made Easy","thumbnail":"838dd101c8e8e3dfe5b3d5635b69d2ccc97e9bb623488c0be9b177432290f608","access_level":"public","create_time":"$D2022-03-13T23:45:11.860Z","update_time":"$D2022-04-07T13:39:51.747Z","view_time":null,"first_public_time":"$D2022-03-17T20:08:32.136Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"c2083b0498b4e358","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":743,"publish_version":743,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3.js Made Easy","cells":[{"id":329,"value":"# D3.js Made Easy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"icons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"Check the full article on:
https://medium.com/@danilo_fiumi/d3-js-made-easy-103a5c36e852","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"md`## 1. Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"data = FileAttachment(\"CLASS.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"viewof table = Inputs.table(data, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"var_x = \"Height\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"var_y = \"Weight\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## 2. Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[var_x]))\n .range([0, dms.boundedWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[var_y]))\n .range([dms.boundedHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## 3. Axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"xAxis = d3.axisBottom(xScale).ticks(15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"yAxis = d3.axisLeft(yScale).ticks(15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function drawAxes(bounds) {\n bounds\n .append(\"g\")\n .attr(\"transform\", move(0, dms.boundedHeight))\n .call(xAxis)\n .attr(\"color\", \"grey\");\n bounds.append(\"g\").call(yAxis)\n .attr(\"color\", \"grey\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## 4. Mark`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function drawMarks(bounds, data) {\n bounds\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => xScale(d[var_x]))\n .attr(\"cy\", (d) => yScale(d[var_y]))\n .attr(\"r\", 6)\n .attr(\"fill\", \"darkred\")\n .attr(\"opacity\", 0.9);\n\n/* bounds\n .append(\"path\")\n .datum(aq.from(data).orderby(var_x).objects())\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"darkblue\")\n .attr(\"stroke-width\", 2.5)\n .attr(\n \"d\",\n d3\n .line()\n .x((d) => xScale(d[var_x]))\n .y((d) => yScale(d[var_y]))\n ); */\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"### Render the chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"svg = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"chart = {\n const svg = d3.select(\"#chart\");\n svg.selectAll(\"*\").remove();\n // clean all the eventual old/unwanted marks\n svg.attr(\"viewBox\", [-30, -10, dms.width, dms.height]);\n\n drawAxes(svg);\n drawMarks(svg, data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### basic structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"dms = {\n let dms = {\n width: width,\n height: 600,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 50,\n marginLeft: 50\n };\n dms.boundedWidth = dms.width - dms.marginLeft - dms.marginRight;\n dms.boundedHeight = dms.height - dms.marginTop - dms.marginBottom;\n\n return dms;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"x = (d) => xScale(d[var_x])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"y = (d) => yScale(d[var_y])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"### utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"\nimport {move} from \"@wattenberger/chart-utility-functions\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"## examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"data[1][var_x]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"data[1][var_y]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"xScale(data[1][var_x])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"yScale(data[1][var_y])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"example = {\n const svg = d3.select(\"#axis\");\n svg.selectAll(\"*\").remove();\n svg.attr(\"viewBox\", [-30, -10, dms.width, dms.height]);\n\n drawAxes(svg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"axis = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"example1 = {\n const svg = d3.select(\"#axis1\");\n svg.selectAll(\"*\").remove();\n svg.attr(\"viewBox\", [-30, -10, dms.width, dms.height]);\n\n svg.append(\"g\").call(xAxis).attr(\"color\", \"grey\");\n svg.append(\"g\").call(yAxis).attr(\"color\", \"grey\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"axis1 = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"example2 = {\n const svg = d3.select(\"#line\");\n svg.selectAll(\"*\").remove();\n svg.attr(\"viewBox\", [-30, -10, dms.width, dms.height]);\n\n svg\n .append(\"path\")\n .datum(aq.from(data).orderby(var_x).objects())\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"green\")\n .attr(\"stroke-width\", 2.5)\n .attr(\"d\", d3.line().x(x).y(y));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"line = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"example3 = {\n const svg = d3.select(\"#dot\");\n svg.selectAll(\"*\").remove();\n svg.attr(\"viewBox\", [-30, -10, dms.width, dms.height]);\n\n svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"id\", (d, i) => \"circle\" + i)\n .attr(\"cx\", x)\n .attr(\"cy\", y)\n .attr(\"r\", 6)\n .attr(\"fill\", \"darkred\")\n .attr(\"opacity\", 0.9);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"dot = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"example4 = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"import { icons } from \"@danilofiumi/social-sharing-links\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"