2b:null 2c:["$","title",null,{"children":"SVG Waffle Charts | Maya Gans | Observable"}] 31:[] 2f:{"id":"fbd9544caedeae73","slug":"svg-waffle-charts","title":"SVG Waffle Charts","thumbnail":"bc5350447c31293d50ad4bfb6d1f830306cebf7b0222e44735b11f91adba023d","access_level":"public","create_time":"$D2020-09-09T21:51:20.392Z","update_time":"$D2020-09-10T21:12:13.449Z","view_time":null,"first_public_time":"$D2020-09-10T00:39:01.931Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024"},"version":553,"publish_version":553,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG Waffle Charts","cells":[{"id":0,"value":"md`# SVG Waffle Charts\n\nThe goal is to create a little waffle chart for each chapter, where each type is represented by an SVG. I think the way to do this will to create a 'g' of svgs for each chapter, then combine those gs into a single svg with one axis?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = [\n {\n chapter: 1,\n type: [\"diamond\", \"circle\", \"square\", \"square\", \"circle\", \"diamond\", \"circle\", \"circle\"]\n },\n {\n chapter: 2,\n type: [\"square\", \"circle\", \"square\", \"circle\", \"square\", \"circle\", \"circle\", \n \"diamond\", \"circle\", \"diamond\", \"square\", \"circle\", \"square\"]\n },\n {\n chapter: 3,\n type: [\"diamond\", \"circle\", \"square\", \"diamond\", \"diamond\", \"circle\", \"diamond\", \"diamond\", \"diamond\", \"circle\", \"diamond\", \"diamond\", \"square\", \"diamond\", \"diamond\", \"diamond\"]\n },\n {\n chapter: 4,\n type: [\"diamond\", \"circle\", \"square\", \"diamond\", \"diamond\", \"circle\", \"diamond\", \"diamond\", \"diamond\", \"circle\", \"diamond\", \"circle\", \"square\", \"diamond\"]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `# Get the three SVGs`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"svgSize = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"diamondSVG = \"M0,0 C-1,-15 -25,-30 -10,-50 C-10,-40 10,-40 10,-50 C25,-30 1,-15 0,0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"circleSVG = \"M 0,0 C -10,-20 -20,-30 0,-50 C 20,-30 10,-20 0,0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"squareSVG = \"M 0,0 C -10,-10 -30,-50 0,-50 C 30,-50 10,-10 0,0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md `## Add the SVGs to our data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function svgFunc(x) {\n if (x === \"diamond\") return diamondSVG\n else if (x === \"circle\") return circleSVG\n return squareSVG\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md `I was thinking we'd want to group the data into their chapters... Maybe? I try another approach lower`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"segment = {\n let segments = []\n let i;\n for (i = 0; i < (chartWidth/waffleWidth); i++) {\n segments.push([i*waffleWidth, (i+1)*waffleWidth])\n }\n return segments\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"histoData = _.map(data, d => { \n const path = d.type.map(x => svgFunc(x));\n const chapter = d.chapter\n const type = d.type \n return {\n chapter,\n shape: _.times(type.length, i => {\n return {\n type: type[i],\n path: path[i]\n }\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md `Note we have the right number of svgs inside each g! Nothing is plotting but that's still cool!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md `## Plot Universe`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"chartHeight = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chartWidth = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"waffleWidth = chartWidth / data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"cleanData = {\n for (var i = 0; i < histoData.length; i++) {\n histoData[i].segment = segment[i]\n }\n return histoData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\nconst svg = DOM.svg(chartWidth, chartHeight)\n\n// create a g for every chapter\n// use the segment array for the start and end of the g\nconst chapter = d3.select(svg)\n .selectAll('g')\n .data(cleanData)\n .enter()\n .append('g')\n // this is clearly wrong\n .attr('transform', (d, i) => `translate(${d.segment[0]})`)\n\n// then this code should space out each patch within its g\nchapter.selectAll('path')\n .data(d => d.shape)\n .enter()\n .append('path')\n .attr('transform', (d, i) => `translate(${(i % 4) * svgSize + 30}, ${Math.floor(i / 4) * svgSize + 70 })`)\n .attr('d', d => d.path)\n .attr('fill', d => colorScale(d.type))\n \nconst axis = d3.select(svg)\n .append(\"g\")\n .style(\"color\", \"black\")\n .call(xAxis)\n\nreturn svg;\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${chartHeight - 50})`)\n .style(\"font-size\", \"1.4em\")\n .call(d3.axisBottom(xScale)\n .tickValues(xAxisTicks)\n .tickFormat(d3.format('d')))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.chapter))\n .range([20, chartWidth - 30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"xAxisTicks = xScale.ticks()\n .filter(tick => Number.isInteger(tick));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"colorScale = d3.scaleOrdinal()\n .domain(d3.extent(data, d => d.type))\n .range([\"#00AED5\", \"#F29904\", \"#017101\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"