2b:null 2c:["$","title",null,{"children":"Color | Nathan Harris | Observable"}] 31:T87d,colorSquare ={ let red = 255; let green = 0; let blue = 0; const div = html`

Red ${red}

Green ${green}

Blue ${blue}

` const redSlider = div.querySelector('#red') const greenSlider = div.querySelector('#green') const blueSlider = div.querySelector('#blue') const squareChart = div.querySelector('.squareChart') redSlider.value = red; blueSlider.value = blue; greenSlider.value = green; const chart = d3.select(squareChart) .append('svg') .attr('height',300) .attr('width',300) .append('rect') .attr('height',300) .attr('width',300) .attr('fill','rgb(255,0,0)') let redValue = 255; let blueValue = 0; let greenValue = 0; redSlider.oninput = (e) =>{ d3.select('#numberRed').text(`Red ${e.target.value}`); redValue = e.target.value; d3.select(squareChart).select('rect') .attr('fill',`rgb(${redValue},${greenValue},${blueValue}`) }; blueSlider.oninput = (e) =>{ d3.select('#numberBlue').text(`Blue ${e.target.value}`); blueValue = e.target.value; d3.select(squareChart).select('rect') .attr('fill',`rgb(${redValue},${greenValue},${blueValue}`) }; greenSlider.oninput = (e) =>{ d3.select('#numberGreen').text(`Green ${e.target.value}`); greenValue = e.target.value; d3.select(squareChart).select('rect') .attr('fill',`rgb(${redValue},${greenValue},${blueValue}`) }; return div }32:T52b,groupedBar ={ const svg = d3.create('svg') .attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b)) .attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r)) const g = svg.append('g') .attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`) const yAxis = d3.axisLeft(yGroupedScale); const xAxis = d3.axisBottom(bandScale); g.append('g') .call(yAxis) g.append('g') .attr('transform',`translate(${0},${dimensions.height})`) .call(xAxis) g.selectAll('.bar-groups') .data(groupedData) .join('g') .attr('transform',d=> `translate(${bandScale(d.key)},0)`) .selectAll('rect') .data(d=>d.subData) .join('rect') .attr('x', d=> innerBandScale(d.subKey)) .attr('height', d=> dimensions.height -yGroupedScale(d.value)) .attr('y', d=> yGroupedScale(d.value)) .attr('width', innerBandScale.bandwidth()) .attr('fill', d=>groupColors[d.subKey]) return svg.node() }33:[] 2f:{"id":"243590d8082ea1f6","slug":"color","title":"Color","thumbnail":"733abf0ca6a7d9b8b7e51dd68a3de96394b7420bef5650a789a289055ff9df61","access_level":"public","create_time":"$D2019-10-04T14:42:48.208Z","update_time":"$D2020-04-29T18:08:24.109Z","view_time":null,"first_public_time":"$D2019-10-04T15:21:36.788Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b889486458251acd","login":"nharrisanalyst","name":"Nathan Harris","avatar_url":"https://avatars-next.observableusercontent.com/17dda58f87b5471307c58e74ad299db4e8349ca25802424b3af246ae3e4b226d","tier":"starter_2024"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"0222bd5488392e08","login":"nharrisanalyst","name":"Nathan Harris","avatar_url":"https://avatars-next.observableusercontent.com/17dda58f87b5471307c58e74ad299db4e8349ca25802424b3af246ae3e4b226d","tier":null}],"members":[{"type":"individual","id":"0222bd5488392e08","login":"nharrisanalyst","name":"Nathan Harris","avatar_url":"https://avatars-next.observableusercontent.com/17dda58f87b5471307c58e74ad299db4e8349ca25802424b3af246ae3e4b226d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Color","cells":[{"id":0,"value":"md`# Color\n Wow this is a very deep topic espicially for Data Visualization I hope to touch on a few points\n \n First a little understanding of what color is, color is a human visual perception. \n This means that color is something our mind interpets. \n \"Color is the quality of an object perceived when wavelengths \n within the visible spectrum of light interact with receptors in th ehuman eye\" -VCD(68)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md `## Hue Value Saturation \n Hue is the dominant wavelength\n Value is how light or dark the color is darkness can be reached in a rgb scale by moving to rgb(0,0,0).\n Saturation is how light or dark the color is`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md `move the sliders to change the square color\n 1. mixing RGB can give you multiple colors with high saturation \n 2. adding all three colors together will give you low satruation as the color turns white\n 3. subtracting all the colors (RGB) will give you a low value as the color turns black\n 4. Hues will change but the dominant wavelength is always the hue` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"md `### How To use Color\n\n Color is used within datavisualization and greater visual communcation as a means to distinguish Differentiations between objects that absent color are the same we can also use color for grouping and distingishing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"md`## Direct Attention\n One of the great uses of color is to direct our attention \n this is also one of the greatest misuses of color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"noColor ={\n const svg = d3.create('svg')\n .attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b))\n .attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r))\n \n const g = svg.append('g')\n .attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`)\n \n const yAxis = d3.axisLeft(yScale);\n const xAxis = d3.axisBottom(xScale);\n \n g.append('g')\n .call(yAxis)\n g.append('g')\n .attr('transform',`translate(${0},${dimensions.height})`)\n .call(xAxis)\n \n g.selectAll('circle')\n .data(xyData)\n .join('circle')\n .attr('r',3)\n .attr('fill','gray')\n .attr('cy',d=>yScale(d[1]))\n .attr('cx', d=>xScale(d[0]))\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md `A simple xy plot with no color all the circles are gray this is great if we only want to show the trend. We can easily use color to distinguish a group of circles.\n \nLets add some color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"addedColor ={\n const svg = d3.create('svg')\n .attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b))\n .attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r))\n \n const g = svg.append('g')\n .attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`)\n \n const yAxis = d3.axisLeft(yScale);\n const xAxis = d3.axisBottom(xScale);\n \n g.append('g')\n .call(yAxis)\n g.append('g')\n .attr('transform',`translate(${0},${dimensions.height})`)\n .call(xAxis)\n \n g.selectAll('circle')\n .data(xyData)\n .join('circle')\n .attr('r',3)\n .attr('fill', d=> d[1]>=100?'rgb(255,44,255)':'gray')\n .attr('cy',d=>yScale(d[1]))\n .attr('cx', d=>xScale(d[0]))\n \n \n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"md` by simply adding color to this chart we have created a group.This is great if we have a threshold (here I have used 100) that we want to bring attention or action to our focus drawn to the circles that have color they seem to be in the foreground and all the rest of the circles now sit in the background. \n\nColor is such an attention getter that now the trend seems to not even matter as our focus is drawn to these colored circles. This is great if we really want to differentiate and call action to these circles but take caution if we want to show trends or contrasts color can overwhelm a user with it's attention grabbing effects `\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"md `### bad use of Color \n not correctly understanding color's attention grabbing effects lends to its misuse`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"rgColor ={\n const svg = d3.create('svg')\n .attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b))\n .attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r))\n \n const g = svg.append('g')\n .attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`)\n \n const yAxis = d3.axisLeft(yScale);\n const xAxis = d3.axisBottom(xScale);\n \n g.append('g')\n .call(yAxis)\n g.append('g')\n .attr('transform',`translate(${0},${dimensions.height})`)\n .call(xAxis)\n \n g.selectAll('circle')\n .data(xyData)\n .join('circle')\n .attr('r',3)\n .attr('fill', d=> d[1]>=100?'red':'green')\n .attr('cy',d=>yScale(d[1]))\n .attr('cx', d=>xScale(d[0]))\n \n \n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"md `here i have incorectly used green as a contrast color to tell the user that these circles need no action I see this done a lot where Red means attention and and Green means no attention \n\n1. The green color grabs our attention if these circles do not need our attention adding a charp color instead of leaving them gray grabs our attention having the opposite effect.\n\n2. Humans naturaly want to put order to things even if none is there and we fall back on heuristics culturally green means go in many cultures while red means stop or danger. User will interpet meaning and action in the color green once again if we want no action we should not use color here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md `## Groups \n color is great for creating distinc groups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"md `Here we use Color to make distinct groups with these groups color does not establish a hirachy or is it used to grab attention to a specific group but to differentaite between subgroups as they may have a charateristc in common\n\nOne common mistake in visualizations is not using colors that are distinctly differnt from eachother (I often see this in data art as the artist want to keep an aesthetic or continuality) I often find this confusing to distguish why the colors are used and what they mean\n\nWe help users when our color shoice are very instinctual and users do not have to continually reconfigure themselves on what the colors in our visualizations mean`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"yScale ={\n let yScale = d3.scaleLinear().domain([0, d3.max(xyData, d=>d[1])]).range([dimensions.height,0]).nice();\n return yScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"xScale ={\n let xScale = d3.scaleLinear().domain([0, d3.max(xyData, d=>d[0])]).range([0,dimensions.width]).nice();\n return xScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"yGroupedScale ={\n let max = d3.max(groupedData, d=>{return d3.max(d.subData,j=> j.value)});\n return d3.scaleLinear().domain([0,max]).range([dimensions.height,0]).nice();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"bandScale={\n let scaleBand = d3.scaleBand().domain(groupedData.map(d=>d.key)).range([0,dimensions.width]).padding(0.2);\n return scaleBand; \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"innerBandScale ={\n let scaleBand = d3.scaleBand().domain(groupedData[0].subData.map(d=>d.subKey)).range([0,bandScale.bandwidth()]).padding(0.1); \n return scaleBand;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"md `### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"xyData ={ \n let xyData =[];\n for(let i = 0; i<100; i=i+0.5){\n const varianceX = d3.randomNormal(10,20)();\n const varianceY = d3.randomNormal(10,20)();\n const x = (i+ varianceX)<0?Math.abs(i+ varianceX):(i+ varianceX);\n const y = (i+ varianceY)<0?Math.abs(i+ varianceY):(i+ varianceY);\n const data = [x,y];\n xyData.push(data)\n }\n\n return xyData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"groupedData ={\n const datas =[];\n const keys =['A','B','C','D','E'];\n const subKey=['1','2','3','4','5'];\n \n keys.forEach(key=>{\n \n const subData = subKey.map(subKey=>{\n return {subKey:subKey, value: d3.randomNormal(75,50)()};\n })\n \n const data = {key:key,subData:subData}\n datas.push(data);\n })\n return datas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"groupColors = ({\n '1':'rgb(235, 19, 19)',\n '2':'rgb(212, 152, 61)',\n '3':'rgb(61, 172, 212)',\n '4':'rgb(192, 61, 212',\n '5':'rgb(237, 237, 33)'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"dimensions =({\n height:400,\n width:400,\n m:{\n l:40,t:20,r:20,b:20 \n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"