31:T70e,// construct data structure from which to create colour wheel graphic pie_chart_matrix = { let pie_chart_matrix = []; // array representing 12 sectors of circle, from 30-360 at 30degree intervals const pie_chart_range = d3.range(30, 390, 30); // fill pie_chart_matrix array with colours and matching circle sector angles (from pie_chart_range) according to each hues' angle on an artist's colour wheel for (let i = 0; i < colour_data_hsl.length; i++) { // Use the ColourWheel object (credit Ben Knight https://github.com/benknight/kuler-d3) to shift the angle for the hue to bring it closer to an artist's colour wheel (Red-Yellow-Blue rather than Red-Green-Blue) const converted_h = ColourWheel.scientificToArtisticSmooth(colour_data_hsl[i].h); for (let j = 0; j < pie_chart_range.length; j++) { if (converted_h < pie_chart_range[j]) { pie_chart_matrix.push([pie_chart_range[j], colour_data_hsl[i]]); break; }; }; }; function compare(a, b) { if (a[1].l > b[1].l) return -1; if (a[1].l < b[1].l) return 1; return 0; } // order segments from darkest at the outside to lightest in the middle pie_chart_matrix.sort(compare); // calculate the total count and order of colors in each sector // add this information to pie_chart_matrix let counts = {}; let pie_chart_matrix_counts = []; pie_chart_matrix.forEach(function (x) { let match_count = (counts[x[0]] || 0) + 1; counts[x[0]] = match_count; let array_entry = x.push(match_count); pie_chart_matrix_counts.push(array_entry); }); pie_chart_matrix.forEach(function (d, i) { let match_total = counts[d[0]]; pie_chart_matrix[i].push(match_total); }); return pie_chart_matrix; }32:T94c,display = { // create div element where image, colour wheel graphic, and colour palette grid are displayed together const display = d3.create("div").attr("width", 800); // create image element display .append("img") .attr("id", "display_image") .attr("src", image_urls[+selected_image]) .attr("width", 500) .style("padding-right", "10px"); // Create an svg element for the colour wheel graphic const vis = display .append("svg") .attr("width", 150) .style("vertical-align", "top") .style("background", "rgba(212, 211, 211, 1)"); // Create an svg for the colour palette in grid form const palette_grid = display .append("svg") .attr("width", 150) .style("vertical-align", "top") .style("padding-left", "10px"); // generate the colour palette as a grid colour_data_hsl.forEach(function (d, i) { palette_grid .append("rect") .attr("fill", d.rgb) .attr("width", 20) .attr("height", 10) .attr("transform", "translate(0," + i * 10 + ")"); }); // // GENERATE COLOUR WHEEL GRAPHIC // const vis_colour_wheel = vis .append("g") .attr("transform", "translate(25,25)"); // white circle background vis_colour_wheel .append("g") .attr("class", "r axis") .attr("transform", "translate(50,50)") .append("circle") .attr("r", outerRadius) .attr("fill", "white") .attr("stroke", "#d4d4dd") .attr("stroke-dasharray", 2); // for each element of pie_chart_matrix, draw a circle sector of that colour vis_colour_wheel .selectAll("path") .data(pie_chart_matrix) .enter() .append("path") // The arc generator produces a circular or annular sector, as in a pie or donut chart https://github.com/d3/d3-shape#arcs .attr("d", arc) .style("fill", function (d) { return d[1].rgb; }) .attr("transform", "translate(50,50) rotate(-15)"); // draw lines between sectors let ga_vis = vis_colour_wheel .append("g") .attr("class", "a axis") .attr("transform", "translate(50,50)") .selectAll("g") .data(d3.range(-15, 345, 30)) .enter() .append("g") .attr("transform", function (d) { return "rotate (" + d + ")"; }); ga_vis .append("line") .attr("x2", outerRadius) .attr("stroke", "#d4d4dd") .attr("stroke-dasharray", 2); return display; }33:T79c,image_urls = [ // https://en.wikipedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg await FileAttachment('Starry-Night-canvas-Vincent-van-Gogh-New-1889.jpg').url(), // https://commons.wikimedia.org/wiki/File:VanGogh-self-portrait-with_bandaged_ear.jpg await FileAttachment('392px-VanGogh-self-portrait-with_bandaged_ear.jpg').url(), // https://commons.wikimedia.org/wiki/File:Vincent_van_Gogh_-_Two_Crabs_(1889).jpg await FileAttachment('640px-Vincent_van_Gogh_-_Two_Crabs_(1889).jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg await FileAttachment('458px-Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_Willem_van_Gogh_128.jpg await FileAttachment('480px-Vincent_Willem_van_Gogh_128.jpg').url(), // https://en.wikipedia.org/wiki/File:The_Sower.jpg await FileAttachment('604px-The_Sower.jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_van_Gogh_-_Wheatfield_under_thunderclouds_-_Google_Art_Project.jpg await FileAttachment('640px-Vincent_van_Gogh_-_Wheatfield_under_thunderclouds_-_Google_Art_Project.jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_(454045).jpg await FileAttachment('475px-Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_(454045).jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_van_Gogh_-_Wheatfield_with_crows_-_Google_Art_Project.jpg await FileAttachment('640px-Vincent_van_Gogh_-_Wheatfield_with_crows_-_Google_Art_Project.jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_van_Gogh_-_De_stoel_van_Gauguin_-_Google_Art_Project.jpg await FileAttachment('384px-Vincent_van_Gogh_-_De_stoel_van_Gauguin_-_Google_Art_Project.jpg').url(), // https://en.wikipedia.org/wiki/File:Vincent_Willem_van_Gogh_059.jpg await FileAttachment('476px-Vincent_Willem_van_Gogh_059.jpg').url(), ]34:[{"id":"39be07877fa0fb770d488983cb83306112123a636126f276a9eb795232343e69e662dec4a3e451f83c3c50b09a3fd961236e75ab38a613a9fb85832ef00fc8ee","href":"https://static.observableusercontent.com/files/39be07877fa0fb770d488983cb83306112123a636126f276a9eb795232343e69e662dec4a3e451f83c3c50b09a3fd961236e75ab38a613a9fb85832ef00fc8ee","name":"Starry-Night-canvas-Vincent-van-Gogh-New-1889.jpg","type":"image/jpeg","lastModified":1585864013315.393,"size":884624},{"id":"500d01547e93c9e4b94d4fedb6241b8386ff6307516d18b0c7b57d36af24be7d1c617c3cd006070c47138e51118c464120b5c797437e81fdf3a222a31db31da6","href":"https://static.observableusercontent.com/files/500d01547e93c9e4b94d4fedb6241b8386ff6307516d18b0c7b57d36af24be7d1c617c3cd006070c47138e51118c464120b5c797437e81fdf3a222a31db31da6","name":"480px-Vincent_Willem_van_Gogh_128.jpg","type":"image/jpeg","lastModified":1586789028285.798,"size":84394},{"id":"960efcecf1f03ee493564d85d84e6c2816d057d48f39f8f399f547ce4910cd957539b3b51cdb8e3e685d7edd64f81de07d4687518d489b06306f9cd4c17dbcf5","href":"https://static.observableusercontent.com/files/960efcecf1f03ee493564d85d84e6c2816d057d48f39f8f399f547ce4910cd957539b3b51cdb8e3e685d7edd64f81de07d4687518d489b06306f9cd4c17dbcf5","name":"604px-The_Sower.jpg","type":"image/jpeg","lastModified":1586788930443.63,"size":155636},{"id":"e98ef0b9ee2fb76543be76dbe1370c994523cc6bcfeeeae18ea99afcc63ab5f6b9fbc98484668cf18bc41d2f765a6843ba980d1b1cfbbbfb4f77059b20a5e68c","href":"https://static.observableusercontent.com/files/e98ef0b9ee2fb76543be76dbe1370c994523cc6bcfeeeae18ea99afcc63ab5f6b9fbc98484668cf18bc41d2f765a6843ba980d1b1cfbbbfb4f77059b20a5e68c","name":"640px-Vincent_van_Gogh_-_Wheatfield_under_thunderclouds_-_Google_Art_Project.jpg","type":"image/jpeg","lastModified":1586789354419.002,"size":75016},{"id":"920b8207c16fc05cebe35fe411f479d44876e9f8f16186e3802030c081f9052366ddeccf40e8085a7af6b2b74c356892df214de538e72c0e8ddfaa13c4a7d378","href":"https://static.observableusercontent.com/files/920b8207c16fc05cebe35fe411f479d44876e9f8f16186e3802030c081f9052366ddeccf40e8085a7af6b2b74c356892df214de538e72c0e8ddfaa13c4a7d378","name":"458px-Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg","type":"image/jpeg","lastModified":1586789279160.474,"size":98281},{"id":"4acf17d58e80831ed80806fc301a124dc9c6453f9eac6978ac0e75e31858596f5b6f7943af269ad93ff120207f288574ede6553a89539bb426b96e0cf62e0977","href":"https://static.observableusercontent.com/files/4acf17d58e80831ed80806fc301a124dc9c6453f9eac6978ac0e75e31858596f5b6f7943af269ad93ff120207f288574ede6553a89539bb426b96e0cf62e0977","name":"476px-Vincent_Willem_van_Gogh_059.jpg","type":"image/jpeg","lastModified":1586795733790.838,"size":59561},{"id":"935c036ab252f3c24359b236f02478c77e9e5fc459937baf57521cd1a8ba578ac66306e5594a38786a780b448b2ef2e3dba8e7d41717b3237847bc369529001b","href":"https://static.observableusercontent.com/files/935c036ab252f3c24359b236f02478c77e9e5fc459937baf57521cd1a8ba578ac66306e5594a38786a780b448b2ef2e3dba8e7d41717b3237847bc369529001b","name":"384px-Vincent_van_Gogh_-_De_stoel_van_Gauguin_-_Google_Art_Project.jpg","type":"image/jpeg","lastModified":1586795735305.289,"size":63559},{"id":"729b0f08b48a659e9f9eeafafe939baef1e9ec91515d8b1960a7dd2865a6860aa90c1c3768c569d2543e70bbb66224b9dd976822ec0cb55e610ede62a5a3dbf5","href":"https://static.observableusercontent.com/files/729b0f08b48a659e9f9eeafafe939baef1e9ec91515d8b1960a7dd2865a6860aa90c1c3768c569d2543e70bbb66224b9dd976822ec0cb55e610ede62a5a3dbf5","name":"475px-Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_(454045).jpg","type":"image/jpeg","lastModified":1586795744967.809,"size":122808},{"id":"1bddcbaf1cd5454a57898bcf5b866abe78bdde7900e7987d9e9f71eee1b02f722d177dc108414df02dcf8e38f0bd2d3e86203f84d08430a6f22778fd7e80fce1","href":"https://static.observableusercontent.com/files/1bddcbaf1cd5454a57898bcf5b866abe78bdde7900e7987d9e9f71eee1b02f722d177dc108414df02dcf8e38f0bd2d3e86203f84d08430a6f22778fd7e80fce1","name":"640px-Vincent_van_Gogh_-_Wheatfield_with_crows_-_Google_Art_Project.jpg","type":"image/jpeg","lastModified":1586795742934.975,"size":89010},{"id":"8b381ea2446c6b10ebd309ad9b17018d5c0e0de74239c990c13fb2f593b5934213bf82789fcc66e94c0383d98e515a91a9e2f3110aefe7354c158f35b7b337b2","href":"https://static.observableusercontent.com/files/8b381ea2446c6b10ebd309ad9b17018d5c0e0de74239c990c13fb2f593b5934213bf82789fcc66e94c0383d98e515a91a9e2f3110aefe7354c158f35b7b337b2","name":"392px-VanGogh-self-portrait-with_bandaged_ear.jpg","type":"image/jpeg","lastModified":1586808489204.519,"size":67298},{"id":"bc0f63b93f1287dcbc8c6037fbcb8ef12e64a65ce2e55e9756828b1963fbba84e2afe01e77b49eade4a94ed08e13f8b387969e6ed336c0fd46411601818e253f","href":"https://static.observableusercontent.com/files/bc0f63b93f1287dcbc8c6037fbcb8ef12e64a65ce2e55e9756828b1963fbba84e2afe01e77b49eade4a94ed08e13f8b387969e6ed336c0fd46411601818e253f","name":"640px-Vincent_van_Gogh_-_Two_Crabs_(1889).jpg","type":"image/jpeg","lastModified":1586812605074.023,"size":104913},{"id":"c6e47ad7d7fbc027221f4b14887971926dae72f02e09b1d61074427bfd4bdc4fb538d56a307f7de51198f75a03ee6b0841ed00249c1dcd62cf405305b0d1a6b0","href":"https://static.observableusercontent.com/files/c6e47ad7d7fbc027221f4b14887971926dae72f02e09b1d61074427bfd4bdc4fb538d56a307f7de51198f75a03ee6b0841ed00249c1dcd62cf405305b0d1a6b0","name":"color-thief.js","type":"application/javascript","lastModified":1619223257695.981,"size":6548}] 2f:{"title":"Colour wheel palette","cells":[{"id":0,"value":"md`# Colour wheel palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"md `Instead of showing colour palettes in a grid, use a colour wheel!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"viewof selected_image = {\n const selected_image = select({\n title: \"Select an image (all Vincent van Gogh paintings):\",\n options: [\n { label: \"The Starry night\", value: 0},\n { label: \"Self-Portrait With a Bandaged Ear\", value: 1},\n { label: \"Two Crabs\", value: 2},\n { label: \"Sunflowers\", value: 3},\n { label: \"Still Life: Vase with Twelve Sunflowers\", value: 4},\n { label: \"The Sower\", value: 5},\n { label: \"Wheatfield under thunderclouds\", value: 6},\n { label: \"Self-Portrait\", value: 7},\n { label: \"Wheatfield with crows\", value: 8},\n { label: \"Gauguin's chair\", value: 9},\n { label: \"Portrait of Mme Ginoux\", value: 10}, \n ],\n value: 0\n });\n return selected_image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"display.node();","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"md `Colour wheels are tools depicting colour relationships by organising colours in a circle. They visualise how hues relate to each other and can be used to highlight colour harmonies. \n\nComplementary colours, opposite each other on the colour wheel, for example, create a strong, vibrant contrast. Or Analogous colours, which are close together, produce a more harmonious effect.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`## Data processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"// Extract colours from the image using the ColorThief package\ncolorThief_palette = {\n const colorThief = new ColorThief();\n let colorThief_palette = colorThief.getPalette(image, 20);\n // convert array items to 'rgb(...)' strings\n colorThief_palette.forEach(function(d,i){\n colorThief_palette[i] = \"rgb(\" + d[0] + \",\" + d[1] + \",\" + d[2] + \")\";\n });\n return colorThief_palette;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"colour_data_hsl = {\n \n // convert colour_data rgbs to HSL\n let object_colours_full = [];\n\n colorThief_palette.forEach(function (d) {\n var colour_hsl = d3.hsl(d);\n if (isNaN(colour_hsl.h)) {\n colour_hsl.h = 0;\n };\n if (isNaN(colour_hsl.s)) {\n colour_hsl.s = 0;\n };\n if (isNaN(colour_hsl.l)) {\n colour_hsl.l = 0;\n };\n object_colours_full.push({\n \"rgb\": d,\n \"h\": colour_hsl.h,\n \"s\": colour_hsl.s,\n \"l\": colour_hsl.l\n });\n });\n \n // remove low saturation / low lightness colours \n const saturationLimit = 0.2,\n lightnessLowerLimit = 0.2,\n lightnessHigherLimit = 1;\n \n let object_colours_full_lowSaturationRemoved = [];\n\n object_colours_full.forEach(function (d, i) {\n if (d.s > saturationLimit && d.l < lightnessHigherLimit && d.l > lightnessLowerLimit) {\n object_colours_full_lowSaturationRemoved.push(d);\n }\n });\n \n return object_colours_full_lowSaturationRemoved;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`## Visualise colour wheel graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"// ignore this cell - its function is to add crossOrigin: \"anonymous\", as was having crossOrigin problems with images \nviewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: image_urls[+selected_image]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`## Functions & variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"// ColourWheel functions convert between 'artistic' RYB (Red - Yellow - Blue) and 'scientific' RGB (Red - Green - Blue) colour wheels \n// from Ben Knight https://github.com/benknight/kuler-d3\n\nColourWheel = ({\n \n mapRange: function (value, fromLower, fromUpper, toLower, toUpper) {\n return (toLower + (value - fromLower) * ((toUpper - toLower) / (fromUpper - fromLower)));\n },\n \n scientificToArtisticSmooth: function (hue) {\n return (\n hue < 35 ? hue * (60 / 35) :\n hue < 60 ? this.mapRange(hue, 35, 60, 60, 122) :\n hue < 120 ? this.mapRange(hue, 60, 120, 122, 165) :\n hue < 180 ? this.mapRange(hue, 120, 180, 165, 218) :\n hue < 240 ? this.mapRange(hue, 180, 240, 218, 275) :\n hue < 300 ? this.mapRange(hue, 240, 300, 275, 330) :\n this.mapRange(hue, 300, 360, 330, 360));\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"angle = d3.scaleLinear().domain([0, 360]).range([0, 2 * Math.PI]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"arc = d3.arc()\n .innerRadius(function (d) {\n if (d[3] > 1) {\n return outerRadius * ((d[2] - 1) / d[3]);\n } else {\n return innerRadius;\n }\n })\n .outerRadius(function (d) {\n return (outerRadius * (d[2] / d[3]));\n })\n .startAngle(function (d) {\n return angle(d[0] - 30);\n })\n .endAngle(function (d) {\n return angle(d[0]);\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"innerRadius = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"outerRadius = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`## Libraries / Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"ColorThief = require(await FileAttachment(\"color-thief.js\").url())","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}