2f:T7a3,function waffle2 (value = 90, { bind = null, // pass in a d3 selection i.e d3.select('class/div') shape = 'circle', // 'circle' 'rect' activeFill = '#008cbc', // colour of the square or circle passiveFill = '#e5e7de', // when there is no value strokeCol = '#666666', shapeSize = 20, strokeWidth = 0, margin = { top: shapeSize, right: shapeSize, bottom: shapeSize, left: shapeSize, } } = {}) { const size = (shapeSize + (strokeWidth * 2)) * test // append the svg if first render if (bind.select('svg').empty()) { bind .append('svg') .attr('width', width)//size + margin.left + margin.right) .attr('height', size + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(grid10by10) } function grid10by10 (sel) { const scaleX = d3.scaleLinear() .domain([0, 9]) .range([0, shapeSize * test]) const scaleY = d3.scaleLinear() .domain([0, 9]) .range([shapeSize * test, 0]) const render = sel.selectAll(shape) .data(d3.range(100)) .join(shape) .attr('stroke-width', strokeWidth) .attr('stroke', strokeCol) // note < not <= as counting from 0 .attr('fill', (d, i) => (i < value) ? activeFill : passiveFill) if (shape === 'rect') { render .attr('x', (d, i) => { const n = i % test return scaleX(n) }) .attr('y', (d, i) => { const n = Math.floor(i / test) return scaleY(n) }) .attr('width', shapeSize) .attr('height', shapeSize) } else { render .attr('cx', (d, i) => { const n = i % test return scaleX(n) }) .attr('cy', (d, i) => { const n = Math.floor(i / test) return scaleY(n) }).attr('r', shapeSize / 2) } } return bind.select('svg g').call(grid10by10) }30:[{"id":"bd31bf66e80d26fa8de1fc41f27e4d6841aa855dd463f2cf5c661afd59bc54bf8f8ca7c5d800eac4665103d500b83391c5571a6e378baa7d70257f9ee4f825af","href":"https://static.observableusercontent.com/files/bd31bf66e80d26fa8de1fc41f27e4d6841aa855dd463f2cf5c661afd59bc54bf8f8ca7c5d800eac4665103d500b83391c5571a6e378baa7d70257f9ee4f825af","name":"annulment-nullity-transposed.csv","type":"text/csv","lastModified":1690529658321.12,"size":3337}] 2d:{"title":"Stacked icons - adjustable height","cells":[{"id":505,"value":"# Stacked icons - adjustable height","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"viewof height = Inputs.range([1, 2000], {label: \"Chart height\", step: 1, value: 200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"viewof shapeSize = Inputs.range([1, 2000], {label: \"Chart height\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof row1 = Inputs.range([1, 20], {label: \"Chart rows\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"viewof col1 = Inputs.range([1, 20], {label: \"Chart cols\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"Math.floor(height/2/row1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"grid = {\n const width = height/2;\n const chartHeight = height + margin.top * 2;\n let svg = DOM.svg(width, chartHeight);\n let activeFill = '#3dbd5d';\n let passiveFill = '#d8d8d8';\n \n const scaleX = d3.scaleLinear()\n .domain([0, Math.floor(width/col1)])\n .range([0, width])\n\n const scaleY = d3.scaleLinear()\n .domain([0, Math.floor(chartHeight/row1)])\n .range([0, chartHeight])\n \n const g = d3.select(svg)\n .selectAll('g') \n .attr('transform', `translate(${margin.left}, ${margin.top})`)\n\n const render = g.selectAll(shape)\n .data(d3.range(100))\n .join('circle')\n .attr('stroke-width', 1)\n .attr('stroke', 'white')\n // note < not <= as counting from 0\n .attr('fill', (d, i) => (i < value) ? activeFill : passiveFill)\n \n return svg;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"# Stacked divorce type numbers","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"waffle2(value, {\n bind: d3.select(vis), // pass in the selection\n activeFill: '#3dbd5d',\n shapeSize: shape,\n shape: 'rect',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"viewof value = Inputs.range([1, 100], {label: \"Pct\", step: 1, value: 45})","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof test = Inputs.range([1, 20], {label: \"Sizes\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"viewof shape = Inputs.range([1, 20], {label: \"Sizes\", step: 1, value: 5})","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"# Automated approach (own self)","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"margin = ({left: 10, top: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"n = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"rows = Math.round(n / cols)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"td = [...Array(n).keys()];","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"scaleX = d3.scaleBand().domain(d3.range(rows)).range([margin.left, chartWidth * sCW])","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"scaleY = d3.scaleBand().domain(d3.range(cols)).range([margin.top, radius * rows + padding * (rows)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"viewof sCW = Inputs.range([0, 1], {value: 0.15, step: 0.1, label: \"Sectioning\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"viewof cols = Inputs.range([0, 200], {value: 2, step: 1, label: \"Columns\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof radius = Inputs.range([0, 20], {value: 2, step: 0.1, label: \"Radius\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"viewof padding = Inputs.range([0, 50], {value: 10, step: 0.1, label: \"Padding\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"block(2000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"function block(number) {\n const svg = DOM.svg(width, chartHeight);\n let nRow = 0;\n let tData = d3.range(number);\n \n const g = d3.select(svg)\n .selectAll('g') \n \n g.data(tData)\n .enter()\n .append('g')\n .attr('transform', `translate(${margin.left}, ${margin.top})`)\n .attr('id', (d, i) => `circle-${i}`)\n .attr('transform', (d, i) => {\n return `translate(${scaleX(i%cols)}, ${scaleY(Math.floor(i/cols))})`\n })\n .append('circle')\n .attr('r', radius);\n\n return svg;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof scale = Inputs.range([0, 1], {value: 0.3, step: 0.1, label: \"Scale\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"waffle(data, 2012)","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"waffle(data, 2011)","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"waffle(data, 2016)","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"function waffle(data, year) {\n const svg = DOM.svg(width, chartHeight);\n let nRow = 0;\n\n let subdf = data.filter(row => row.Year === year);\n // console.log('!!!', subdf);\n\n let objs = [];\n for (let j in subdf) {\n let row = subdf[j];\n let num = row['nCase'];\n if (num > 0) {\n for (let k in d3.range(num)){\n objs.push({Status: row['Status'], Category: row['Category'], Number: k})\n }\n }\n }\n \n const g = d3.select(svg)\n .selectAll('g') \n \n g.data(objs)\n .enter()\n .append('g')\n .attr('transform', `translate(${margin.left}, ${margin.top})`)\n .attr('id', (d, i) => `circle-${i}`)\n .attr('transform', (d, i) => {\n return `translate(${scaleX(i%cols)}, ${scaleY(Math.floor(i/cols))}) scale(${scale})`\n })\n .append('path')\n .attr('d', d => pathScale[d.Category])\n .attr('fill', d => colorScale(d.Category));\n // .attr('r', radius);\n\n return svg;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"pathScale = ({'Successful': diamondSVG, 'Unsuccessful': circleSVG, 'Pending': squareSVG, 'Unsure': petalSVG})","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"colorScale = d3.scaleOrdinal().domain(['Successful', 'Unsuccesful', 'Pending', 'Unsure']).range(d3.schemeSet3);","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"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"},{"id":381,"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"},{"id":383,"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"},{"id":394,"value":"petalSVG = 'M 0,0 C -40,-10 -20,-40 0,-50 C 20,-40 40,-10 0,0';","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"radius","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"# Waffle stack\n\nhttps://observablehq.com/@mayagans/svg-waffle-charts","pinned":false,"hidden":false,"mode":"md"},{"id":37,"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":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"svgSize = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"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.cases)\n .enter()\n .append('circle')\n .attr('transform', (d, i) => `translate(${(i % 4) * svgSize + 30}, ${Math.floor(i / 4) * svgSize + 70 }) scale(0.5)`)\n .attr('r', 2)\n \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":false,"hidden":false,"mode":"ojs"},{"id":42,"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"},{"id":46,"value":"xAxisTicks = xScale.ticks()\n .filter(tick => Number.isInteger(tick));","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.Year))\n .range([20, chartWidth - 30])","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"waffleWidth = chartWidth / data.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"chartHeight = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"chartWidth = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"# Icon test","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"Plot.plot({\n y: { axis: null },\n // height: 350,\n facet: { data, y: \"Year\", marginLeft: 100, marginRight: 50 },\n marks: [\n Plot.text(\n data,\n Plot.stackX({\n y: \"Category\",\n text: d => textScale(d.Category),\n fontSize: 45,\n textAnchor: \"start\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"textScale = d3\n .scaleOrdinal()\n .domain([\"Pending\", \"Successful\", \"Unsuccessful\"])\n .range([\"🐄\", \"🐖\", \"🐑\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"nData = {\n for (let i in data){\n data[i]['nCase'] = Math.round(data[i]['Cases']/10)\n }\n\n return data;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"cleanData = {\n for (let i in data){\n data[i]['nCase'] = Math.round(data[i]['Cases']/10)\n }\n\n let cData = []\n\n for (let j in years) {\n let obj = {}\n obj['year'] = years[j]\n obj['cases'] = data.filter(row => row.Year == years[j]);\n obj['segment'] = segment[j]\n \n cData.push(obj);\n // cData[-1].segment = segment[i]\n }\n return cData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"years = [...new Set(data.map(row=> row.Year))]//.sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = FileAttachment(\"annulment-nullity-transposed.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}