2d:null 2e:["$","title",null,{"children":"Visualizing RGB Color via Radar Chart | Luc Iyer | Observable"}] 33:Td87,rgbRadar = function(data, params) { const { h, w, margin, axes } = params; const maxValue = 255; const axis_data = [ { name: "R", color: [255, 0, 0] }, { name: "G", color: [0, 255, 0] }, { name: "B", color: [0, 0, 255] }, ] const svg = d3.create("svg") .attr("viewBox", [0, 0, params.width, params.height + (2*params.margin)]); let angleSlice = Math.PI * 2 / params.axes; let placement = ({ radius: (params.height - 2*params.margin) / 2, xOffset: params.width / 2, yOffset: params.margin + (params.height / 2) }) let rScale = d3.scaleLinear() .domain([0, maxValue]) .range([15, placement.radius]) let radarLine = d3.lineRadial() .curve(d3['curveLinearClosed']) .radius(d => rScale(d)) .angle((d, i) => i * angleSlice) const axisGrid = svg.append("g") .attr("class", "axisWrapper") .attr('transform', `translate(${placement.xOffset}, ${placement.yOffset})`); axisGrid.append("g") .selectAll("g") .data([[255, 255, 255], [170, 170, 170], [85, 85, 85]]) .join("g") .attr("fill", "#FFF") .attr("opacity", 0.4) .attr("stroke", "#CCC") .append("path") .attr("d", d => radarLine(d)) .attr("stroke-width", 1); axisGrid.selectAll(".axis") .data(axis_data) .enter() .append("g") .append("line") .attr("x1", (d, i) => rScale(0) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y1", (d, i) => rScale(0) * Math.sin(angleSlice*i - Math.PI/2)) .attr("x2", (d, i) => rScale(maxValue) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2)) .style("stroke", d => rgbString(d.color)) .style("stroke-opacity", 0.5) .style("stroke-width", 2) axisGrid.selectAll("text") .data(axis_data) .enter() .append("text") .attr("x", (d, i) => rScale(placement.radius + 30) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(placement.radius + 30) * Math.sin(angleSlice*i - Math.PI/2)) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => d.name); let swatches = d3.groups(data, d => d.color_id).map(d => d[1][0].color); console.log(swatches); let swatchScale = d3.scaleBand() .domain(d3.range(swatches.length)) .range([margin, width - margin]) let swatchClick = function (el) { svg.selectAll(".swatch") .attr("stroke", "none"); axisGrid.selectAll(".color-shape") .remove(); d3.select(this) .attr("stroke", "#000") .attr("stroke-opacity", 1) .attr("stroke-width", 3); axisGrid.append("g") .attr("class", "color-shape") .append("path") .attr("d", radarLine(el)) .attr("stroke", rgbString(el)) .attr("stroke-opacity", 1) .attr("stroke-width", 3) .attr("fill", rgbString(el)) .attr("fill-opacity", 0.75); } svg.append("g") .selectAll("circle") .data(swatches) .enter() .append("circle") .attr("class", "swatch") .attr("data-color", d => d) .attr("r", 30) .attr("cx", (d, i) => margin + swatchScale(i)) .attr("cy", 2*margin + 2*placement.radius) .style("fill", d => rgbString(d)) .on("click", swatchClick); // simulate click on first svg.select(".swatch").dispatch("click"); return svg.node(); }34:T5a0,displayColors = function (img, colors) { return html`

${img}

Dominant Color

Color Palette

` }35:[{"id":"d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","href":"https://static.observableusercontent.com/files/d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","name":"5.JPG","type":"image/jpeg","lastModified":1580851047502.299,"size":278696},{"id":"875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","href":"https://static.observableusercontent.com/files/875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","name":"4.JPG","type":"image/jpeg","lastModified":1580851047502.299,"size":317102},{"id":"d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","href":"https://static.observableusercontent.com/files/d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","name":"3.JPG","type":"image/jpeg","lastModified":1580851047502.299,"size":458365},{"id":"809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","href":"https://static.observableusercontent.com/files/809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","name":"2.JPG","type":"image/jpeg","lastModified":1580851047502.299,"size":683820},{"id":"e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","href":"https://static.observableusercontent.com/files/e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","name":"1.JPG","type":"image/jpeg","lastModified":1580851047502.299,"size":140961}] 31:{"id":"167aaef88f5449dc","slug":"visualizing-rgb-color-via-radar-chart","title":"Visualizing RGB Color via Radar Chart","thumbnail":"d2497d704e47a3ca7706a6f15365fa5ef6202c441f239c960f4c678bf5c89113","access_level":"public","create_time":"$D2020-02-04T21:17:27.502Z","update_time":"$D2020-02-06T02:45:14.473Z","view_time":null,"first_public_time":"$D2020-02-06T02:19:58.258Z","has_unpublished_edits":null,"fork":{"id":"fb1f076193efc3a8","slug":"color-sampling-test-colorthief","title":"Color Sampling Test - ColorThief","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"stars":6,"starred":false,"owner":{"type":"team","id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":"starter_2024"},"version":1600,"publish_version":1600,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null}],"members":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"3c295052d9793fec","slug":"miscellaneous","title":"Miscellaneous","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"type":"notebook","body":{"title":"Visualizing RGB Color via Radar Chart","cells":[{"id":0,"value":"md`# Visualizing RGB Color via Radar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`As per the title. Will extract a palette from a selected image, and allow the user to click those extracted colors and see them plotted. \n\nVamo'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`### Visualizing Colors\n\nClick a color below the chart to see it plotted.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"radar = rgbRadar(data, {height: 600, width: width, margin: 50, axes: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"viewof selected_image = {\n const selected_image = select({\n title: \"Select an image:\",\n options: [\n { label: \"Austin, TX\", value: 0 },\n { label: \"Suislaw River, OR\", value: 1 },\n { label: \"Brookings, OR\", value: 2 },\n { label: \"Brookings, OR (B&W)\", value: 3 },\n { label: \"SF From Berkeley\", value: 4 }\n ],\n value: 2\n });\n return selected_image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"loadImage(image_urls[selected_image])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"data = {\n return loadImage(image_urls[+selected_image])\n .then(img => unzip(colorThief.getPalette(img, 6))\n ).catch(err => console.error(err));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"md`_Sometimes when I load this page cold the above function refuses to work._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"unzip = function(data) {\n let temp = [];\n data.map((d,i) => d.map(dd => temp.push({color_id: i, value: dd, color: d})));\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"image_urls = [\n await FileAttachment('1.JPG').url(),\n await FileAttachment('2.JPG').url(),\n await FileAttachment('3.JPG').url(),\n await FileAttachment('4.JPG').url(),\n await FileAttachment('5.JPG').url(),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.addEventListener(\"load\", () => resolve(img));\n img.addEventListener(\"error\", err => reject(err));\n img.src = src;\n img.crossOrigin = \"anonymous\";\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"getColorInfo = function(url) {\n return loadImage(url)\n .then(img => displayColors(img, { \n dominant: colorThief.getColor(img),\n palette: colorThief.getPalette(img, 6)\n })\n ).catch(err => console.error(err));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function rgbString (array) {\n return 'rgb(' + array.join(', ') + ')';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"getHex = function (array) {\n let rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {\n const hex = x.toString(16)\n return hex.length === 1 ? '0' + hex : hex\n }).join('').toUpperCase();\n return rgbToHex(array[0], array[1], array[2]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"colorThief = new ColorThief();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"ColorThief = require('https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"