43:["$","title",null,{"children":"Random Squares and Color Contrast | Kavya Beheraj | Observable"}] 4b:T6c3,vis = { const boxHeight = 500; const svg = d3.create('svg') .attr('viewBox', [0, 0, width, boxHeight]) .style('border', 'solid 2px lightgrey') const R = d3.randomInt(10, 255)() const G = d3.randomInt(10, 255)() const B = d3.randomInt(10, 255)() const A = d3.randomInt(1, 100)()/100 // https://www.w3.org/TR/AERT/#color-contrast const brightness = ((R * 299) + (G * 587) + (B * 114))/1000 const bgColor = d3.rgb(R, G, B, A) const textBackground = (brightness > 125) ? '#101010' : '#f0f0f0'; svg.style('background-color', bgColor) d3.select('#bg-color') .html(`The background color is ${bgColor}. The brightness is ${brightness}.`) .style('color', textBackground) .style('opacity', 1) .style('background-color', bgColor) let arr = [...Array(d3.randomInt(1, number)())]; const nodes = arr.map(value => { const w = d3.randomUniform(10, maxWidth)(); const red = d3.randomInt(1, 200)(); const green = d3.randomInt(1, 200)(); const blue = d3.randomInt(1, 200)(); const alpha = d3.randomInt(10, 90)() / 100; return { alpha: alpha, text: value, w: w, x: d3.randomUniform(0, width-200)(), y: d3.randomUniform(0, boxHeight-200)(), color: d3.rgb(red, green, blue) }; }); svg .append('g') .attr('id', 'squares') .selectAll('rect') .data(nodes) .join('rect') .attr('id', 'rect') .attr('x', d => d.x) .attr('y', d => d.y) .attr('width', d => d.w) .attr('height', d => d.w) .attr('fill', d => d.color) .attr('opacity', d => d.alpha) .style('stroke', 'white') .style('stroke-width', '2') .call(drag) return svg.node(); }4c:T52e,hover = { const svg = d3.select(vis) const rects = svg.select('g#squares').selectAll('rect'); rects .on('mouseover', function(d) { let me = d3.select(this) me .style('stroke', 'black') .attr('opacity', d => d.alpha) .transition() .duration(200) .attr('opacity', 1) .attr("cursor", "crosshair") const R = d3.randomInt(10, 255)() const G = d3.randomInt(10, 255)() const B = d3.randomInt(10, 255)() const A = d3.randomInt(1, 100)()/100 // https://www.w3.org/TR/AERT/#color-contrast const brightness = ((R * 299) + (G * 587) + (B * 114))/1000 const bgColor = d3.rgb(R, G, B, A) const textBackground = (brightness > 125) ? '#101010' : '#f0f0f0'; d3.select('#bg-color') .html(`The background color is ${bgColor}. The brightness is ${brightness}.`) .style('color', textBackground) .style('opacity', 1) .style('background-color', bgColor) svg.style('background-color', bgColor) }) .on('mouseout', function(d) { d3.select(this) .style('stroke', 'none') .style('stroke', 'black') .attr('opacity', 1) .transition() .duration(100) .attr('opacity', d => d.alpha) .style('stroke', 'white') .attr("cursor", "auto") }) }4d:[] 47:{"id":"b80543f019ce4a88","slug":"random-dragginess-and-color-contrast","title":"Random Squares and Color Contrast","thumbnail":"099638e4fdc9eb28b250660feaa777054e271c75736f6093a700c5d139945ff1","access_level":"public","create_time":"$D2020-09-13T14:10:57.629Z","update_time":"$D2020-09-14T13:46:39.957Z","view_time":null,"first_public_time":"$D2020-09-13T21:10:11.485Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5a240aa53f69c5a7","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":"starter_2024","bio":"Dataviz journalist","followed_by_you":false,"follows_you":false},"version":651,"publish_version":651,"role":null,"authored":false,"authors":[{"type":"individual","id":"aadc210eca456c01","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":null,"bio":"Dataviz journalist","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"aadc210eca456c01","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":null,"role":"editor"}],"comments":[{"id":"f26a49fbf741b079","reply_to_id":null,"content":"very cool! This is a super useful utility function to have in your back pocket if you are making a project with dynamic colors.","create_time":"$D2020-09-15T13:09:19.873Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5500878e75c72576","login":"auchers","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ee89446972fe3f8e82ad2df79f5b7e000dc4a7519dc6e9ad26ffbba60540e7ff","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Random Squares and Color Contrast","cells":[{"id":21,"value":"md`# Random Squares and Color Contrast`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`#### Interactive Data Visualization Studio ⚡ Observable Prototype #2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`This week's prototype was a grab bag: I explored building SVG elements using random variables, making them interactive with d3.drag(), and went down a rabbit hole to color contrast and accessibility.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`## Random Squares`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`Click and drag the squares to move them around. Adjust the maximum number and size of the squares using the sliders below. The background color of the canvas will update too.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof number = slider({\n min: 2,\n max: 15,\n value: 10,\n step: 1,\n title: \"Max number of squares\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof maxWidth = slider({\n min: 20,\n max: 200,\n value: 150,\n step: 10,\n title: \"Max width of squares (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`The background of the text above is set to automatically change from black to white depending on the background's *brightness*, as defined by the [W3 Consortium](https://www.w3.org/TR/AERT/#color-contrast).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"drag = {\n \n let drag = d3.drag();\n \n function dragStart(event, d) { \n d3.select(this)\n .attr(\"stroke\", \"red\"); \n }\n \n function dragMiddle(event, d) {\n d3.select(this)\n .attr('x', d3.event.x)\n .attr('y', d3.event.y)\n }\n \n function dragEnd(event, d) { \n d3.select(this)\n .attr(\"stroke\", null); \n }\n \n return drag\n .on(\"start\", dragStart)\n .on(\"drag\", dragMiddle)\n .on(\"end\", dragEnd)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`## Color Contrast and Accessibiliy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"md`The World Wide Web Consortium has a [set of guidelines](https://www.w3.org/TR/AERT/#color-contrast) to evaluate the accessibility of web content, including a **suggested algorithm** for determining **perceived color brightness**.\n\n>>((**RedValue** x 299) + (**GreenValue** x 587) + (**BlueValue** x 114)) / 1000\n\nThis algorithm converts a text's background color from the **sRGB color space** to the **YIQ color space**, which better adjusts for perceived differences in color.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"html`

How legible is this text?

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md`Adjust the background color of the text above and see how the text color and brightness value changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof redValue = slider({\n min: 1,\n max: 255,\n value: d3.randomInt(10, 255)(),\n step: 1,\n title: \"Red\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof greenValue = slider({\n min: 1,\n max: 255,\n value: d3.randomInt(10, 255)(),\n step: 1,\n title: \"Green\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viewof blueValue = slider({\n min: 1,\n max: 255,\n value: d3.randomInt(10, 255)(),\n step: 1,\n title: \"Blue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"textColor = {\n const div = d3.select(\"#brightTest\")\n const yiqDiv = d3.select(\"#yiqTest\")\n const brightnessDiv = d3.select(\"#brightnessDiv\")\n const R = redValue\n const G = greenValue\n const B = blueValue\n \n const Radj = (R * 299)/255\n const Gadj = (G * 587)/255\n const Badj = (B * 114)/255\n \n // https://www.w3.org/TR/AERT/#color-contrast\n const brightness = Math.floor(((R * 299) + (G * 587) + (B * 114))/1000)\n const rgbColor = d3.rgb(R, G, B)\n const yiqColor = d3.rgb(Radj, Gadj, Badj)\n const textColor = (brightness > 125) ? '#101010' : '#f0f0f0';\n \n div\n .style('background-color', rgbColor)\n .style('padding', '10px')\n .style('color', textColor)\n .style('opacity', 1)\n .html(`Color in the RGB space.`)\n \n brightnessDiv\n .style('padding', '10px')\n .html(`The brightness value is ${brightness}.`)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"d3 = require('d3@5', 'd3-random')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null