31:T6c0,{ const div = d3.select(DOM.element('div')) .style('overflow-x', 'auto') // .style('overflow-y', 'auto') const sel = div.append('svg') .attr('width', width) .attr('height', height) const packLayout = d3.pack() .size([width, height]) .radius(() => 30) .padding(30) const rootNode = d3.hierarchy(_data) // run .sum() on the hierarchy; return 1 for size of leaf nodes rootNode.sum(() => 1) packLayout(rootNode) renderCircles(rootNode.descendants()) renderLabels(rootNode.descendants()) function renderCircles (nodes) { const circles = sel .selectAll('circle') .data(nodes, d => d.data.id) circles.join('circle') .attr('class', d => { if (d.depth === 0) { return 'root' } else if (d.depth === 1) { return 'cluster' } else { return 'item' } }) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => d.r) .attr('fill', d => d.data.data.hex) } function renderLabels (nodes) { const labels = sel .selectAll('text') .data(nodes, d => d.data.id) labels.join('text') .attr('x', d => d.x) .attr('y', d => d.y) // .attr('dy', '5px') .attr('text-anchor', 'middle') .attr('dy', d => { if (d.depth === 0) { return 0 } else if (d.depth === 1) { return d.r + 20 + 'px' } else { return '5px' } }) .text(d => { if (d.depth === 0) { return '' } else if (d.depth === 1) { return d.data.data.colName } else { return d.data.data.id } }) } return div.node() }32:T74d,function renderRow (data, { segmentW = 140, segmentH = 50, columns = colours.length, rows = data.length, bgdCol = '#abf5ed', strokeCol = '#fff', strokeWidth = 3, textBoxheight = 0 } = {}) { const size = (segmentW + (strokeWidth * 2)) const w = segmentW * columns const h = rows * segmentH const div = d3.select(DOM.element('div')) .style('overflow-x', 'auto'); const svg = div.append('svg') .attr('width', w * 2) .attr('height', h + strokeWidth) const scaleColumn = d3.scaleLinear() .domain([0, columns]) .range([strokeWidth/2 + size/2, columns * size]) const scaleRow = d3.scaleLinear() .domain([0, rows]) .range([strokeWidth/2, h + strokeWidth/2]) const g = svg .selectAll('g') .data(data) .join('g') .attr('class', 'item') .attr('transform', (d, i) => `translate(0, ${scaleRow(i)})`) g.selectAll('rect') .data(d => d) .join('rect') .attr('x', (d,i) => scaleColumn(i)) .attr('x', (d, i) => (i === 0) ? 0 : scaleColumn(i)) // first one is anchor .attr('width', (d, i) => (i === 0) ? size * 1.5 : size) // first one is anchor .attr('height', segmentH/3) .attr('stroke', strokeCol) .attr('stroke-width', strokeWidth) .attr('class', 'item-bgd') // .attr('d', d => console.warn('d', d)) .attr('fill', d => colours[d].hex) .on('mouseover', function(e, d) { console.warn('d', d) console.warn('e', e) }) g.selectAll('text') .data(d => d) .join('text') .attr('x', (d, i) => (i === 0) ? 0 : scaleColumn(i)) // first one is anchor .attr('font-size', '13px') // .attr('dx', segmentW/2) .attr('dy', segmentH -20) // .attr('dy', '20px') // .attr('text-anchor', 'middle') .text(d => `${colours[d].name} *${colours[d].id}`) return div.node() }33:[{"id":"ed10dfe544f9255a8a9396731565b80f97af42edf3fe817fc3df23cf2dfde6166177c9ffa8b2ceb70bc5af40339d85d69751e4dfca0c7eca39f3b7357c3644fb","href":"https://static.observableusercontent.com/files/ed10dfe544f9255a8a9396731565b80f97af42edf3fe817fc3df23cf2dfde6166177c9ffa8b2ceb70bc5af40339d85d69751e4dfca0c7eca39f3b7357c3644fb","name":"colors@1.json","type":"application/json","lastModified":1645222003400.127,"size":60245},{"id":"eaa45a973232195c256b4ce6d5fd1fa6fe55c05ec4786435e9ffc31a76b476dc4a8d2bf072b418c17076e8d65d78f0d89367c91988979dafddc6da7d2d137076","href":"https://static.observableusercontent.com/files/eaa45a973232195c256b4ce6d5fd1fa6fe55c05ec4786435e9ffc31a76b476dc4a8d2bf072b418c17076e8d65d78f0d89367c91988979dafddc6da7d2d137076","name":"PXL_20220220_142725862.jpg","type":"image/jpeg","lastModified":1645465423825.981,"size":2570439}] 2f:{"title":"2 colour combinations [Sanzo Wada]","cells":[{"id":26,"value":"# 2 colour combinations [Sanzo Wada]\n\nColours from the book \"A Dictionary of Colour Combinations\" compiled by Sanzo Wada (1883 – 1967) and published by Seigensha Art. There are 348 colour combinations (of 2, 3, and 4 colours)\n\nThis builds on the [previous notebook](https://observablehq.com/@eesur/sanzo-wada-colour-combinations?collection=@eesur/sanzo-wada-colours) but this time only to explore sets with 2 colours (120 pairings). \n\nIn the book, these 120 sets/pairings are presented in pairs. There is no easy way to see which other pairings a particular colour may also have. For example, if I saw this pairing:\n\n

${await FileAttachment(\"PXL_20220220_142725862.jpg\").image()}\n\nAnd I wanted to also see what other pairs `Eosine Pink` may have, I need to search the index and go through the sets, which is cumbersome for me. So I've looked at the individual colours in these 120 sets and then shown the colours they have been paired with.\n\n-------------------","pinned":false,"hidden":false,"mode":"md"},{"id":1345,"value":"The below takes each unique colour (in the 120 sets of 2 colours) as the source colour and shows how many parings it has with other colours. `Pale Lemon Yellow` has the most parings, with 7, even more than black which has 6. The majority have either one or two parings [${oneParing.length + twoParings.length} out of ${uniqueColours.length}]\n\n\n\n```\n<-----SOURCE COLOUR -----><-----PAIR------> <-----PAIR-----> <-----PAIR-----> <-----PAIR-----> <-----PAIR----->\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1309,"value":"renderRow(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"--------------\n\nApplying circle packing to show the same data but in clusters. The source colour is the larger parent circle with any pairings shown as nested circles: (numbers are the reference to the number id)","pinned":false,"hidden":false,"mode":"md"},{"id":1460,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"----------------\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1681,"value":"### circle packing:","pinned":false,"hidden":false,"mode":"md"},{"id":1651,"value":"height = 2850","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"pack = data => d3.pack()\n .size([width, height])\n .padding(3)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":1472,"value":"dataCP = data.map(arr => {\n\n const _arr = [...arr]\n const parentID = _arr[0]\n\n const parent = {\n parent: 'root', \n name: parentID,\n id: parentID,\n colName: colours[parentID].name,\n hex: colours[parentID].hex,\n data: colours[parentID]\n }\n \n const children = _arr.map(d => {\n return {\n name: _.uniqueId('child-'), // hack as need a unique id for each child\n parent: parent.id,\n colName: colours[d].name,\n hex: colours[d].hex,\n id: d,\n data: colours[d],\n value: 1\n }\n }).slice(1) // keep the parent out of the children\n\n return [parent, ...children]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"dataCPFlat = _.flattenDeep([{name: 'root', parent: null}].concat(dataCP))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1523,"value":"_data = d3.stratify()\n .id(d => d.name)\n .parentId(d => d.parent)(dataCPFlat)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1710,"value":"END helpers for circle packing:","pinned":false,"hidden":false,"mode":"md"},{"id":928,"value":"------------------","pinned":false,"hidden":false,"mode":"md"},{"id":1762,"value":"### colour rows:","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":1208,"value":"### 2 colour sets exploration:","pinned":false,"hidden":false,"mode":"md"},{"id":965,"value":"number of sets 2 colours: ${twoColSets.length}\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":968,"value":"twoColSets = sets.filter(d => d.length === 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"twoColSetsFlat = _.flattenDeep(twoColSets).map(d => {\n return {\n name: d.name,\n swatch: d.swatch,\n hex: d.hex\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"uniqueColours = _.uniqBy(twoColSetsFlat, 'hex')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"there are ${uniqueColours.length} unique colours, out of ${colours.length} of all the colours. \n${coloursNotIncluded.length} colours are **not included** in any of the 2 colour pairings:","pinned":false,"hidden":false,"mode":"md"},{"id":1224,"value":"coloursNotIncluded = colours.map(d => d.name).filter(d => !uniqueColours.map(d => d.name).includes(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"see how many counts each colour has:","pinned":false,"hidden":false,"mode":"md"},{"id":1239,"value":"countsArray = Object.entries(_.countBy(twoColSetsFlat, 'name'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1435,"value":"oneParing = countsArray.filter(d => d[1] === 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1437,"value":"twoParings = countsArray.filter(d => d[1] === 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1242,"value":"how many colours with more than two pairings:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1246,"value":"threePlusParings = countsArray.filter(d => d[1] > 2).map(d => {\n return {\n label: d[0],\n value: d[1]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"`Pale Lemon Yellow` has more pairs (7) than black (6)","pinned":false,"hidden":false,"mode":"md"},{"id":1355,"value":"Plot.plot({\n marginLeft: 150,\n color: {\n range: [\"#e6adcf\", \"#a90636\"]\n },\n marks: [\n Plot.barX(threePlusParings, {\n x: \"value\", \n y: \"label\",\n fill: d => d.value > 3\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"allParings = countsArray.map(d => {\n return {\n label: d[0],\n value: d[1]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1768,"value":"Plot.plot({\n marginLeft: 150,\n color: {\n range: [\"#e6adcf\", \"#a90636\"]\n },\n marks: [\n Plot.barX(allParings, {\n x: \"value\", \n y: \"label\",\n fill: d => d.value > 3\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"--------------\n\nmake a dataset with all pairing each colour has:","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"parings = twoColSets.map(d => {\n \n return [\n d[0].id, \n d[1].id, \n ]\n \n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"uniqueColIDS = _.union(_.flattenDeep(parings)).sort(d3.ascending) // lose the set orders by doing this","pinned":true,"hidden":false,"mode":"ojs"},{"id":1298,"value":"data = uniqueColIDS.map(id => {\n return mapPairs(parings, id)\n}).sort(d3.ascending)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"mapPairs(parings, 39) // a test for Pale Lemon Yellow","pinned":true,"hidden":false,"mode":"ojs"},{"id":1277,"value":"// join all pairs with same colour together\nmapPairs = (_data, colourID) => {\n const dataAll = _.flattenDeep(_data.filter(d => _.includes(d, colourID)))\n const dataChildren = dataAll.filter(d => d !== colourID).sort(d3.ascending)\n const data = [colourID, ...dataChildren]\n\n //return _.uniq(data)//.sort(d3.ascending)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"data.filter(d => d[0] === 39)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1184,"value":"-----------------------_","pinned":false,"hidden":false,"mode":"md"},{"id":1197,"value":"### source data:","pinned":false,"hidden":false,"mode":"md"},{"id":934,"value":"setHexValues = array => {\n return array.map(d => d.hex)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"sets = palettes.map(array => {\n const set = array.map(d => {\n return colours[d]\n })\n return set\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"data source: https://github.com/mattdesl/dictionary-of-colour-combinations","pinned":false,"hidden":false,"mode":"md"},{"id":1248,"value":"colours = coloursJSON.map((d, i) => {\n const _d = {...d}\n d.id = i\n return d\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"coloursJSON = FileAttachment(\"colors@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"palettes = {\n const colors = dictionary\n\nconst map = colors.reduce((map, color, i) => {\n color.combinations.forEach(id => {\n if (map.has(id)) map.get(id).push(i)\n else map.set(id, [ i ])\n })\n return map\n}, new Map())\n\nconst palettes = [ ...map.entries() ]\n .sort((a, b) => a[0] - b[0])\n .map(e => e[1])\n\n return palettes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"dictionary = require('https://bundle.run/dictionary-of-colour-combinations@1.0.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"----\n\n### styles:","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"\n\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}