2b:null 2c:["$","title",null,{"children":"Contrast | Nathan Harris | Observable"}] 31:T4e4,lineChartContrast ={ const div =html`

` const height = 400; const width = 800; const margin ={l:50,t:20,r:20,b:20}; const scaleLinearX = d3.scaleLinear().domain([0,100]).range([0,width]); const scaleLinearY = d3.scaleLinear().domain([100,0]).range([0,height]); const axisY = d3.axisLeft(scaleLinearY); const axisX = d3.axisBottom(scaleLinearX); const svg = d3.select(div).append('svg') .attr('height',height+(margin.t+margin.b)) .attr('width', width+(margin.l+margin.r)) const mainG = svg.append('g') .attr('transform', `translate(${margin.l},${margin.t})`) mainG.append('g').call(axisY) mainG.append('g').attr('transform', `translate(${0},${height})`).call(axisX) mainG.selectAll('circle') .data(lineChartData) .join('circle') .attr('cx', d=>scaleLinearX(d[0])) .attr('cy',d=>scaleLinearY(d[1])) .attr('r', '5') .attr('fill',(d,i)=> i==99?'red':'gray') return div; }32:T8b8,barChart ={ const height = 400; const width = 800; const margin ={l:50,t:20,r:20,b:20}; let number = 95; const div = html`

${number}

` ; const slider = div.querySelector("[type=range]"); const chart = div.querySelector(".barchart"); slider.value = 95; slider.oninput = (e) =>{ d3.select('#number').text(e.target.value); const scaleLinearY = d3.scaleLinear().domain([0,100]).range([height,0]); d3.select(chart).select('.the-chosen-one') .attr('y',d => scaleLinearY(e.target.value)) .attr('height',d => height - scaleLinearY(e.target.value)); }; const scaleBandX = d3.scaleBand().domain(ordinalData).range([0,width]).padding(0.25); const scaleLinearY = d3.scaleLinear().domain([0,100]).range([height,0]); const axisY = d3.axisLeft(scaleLinearY).tickSize(width); const axisX = d3.axisBottom(scaleBandX); const svg = d3.select(chart).append('svg') .attr('height',height+(margin.t+margin.b)) .attr('width', width+(margin.l+margin.r)) const mainG = svg.append('g') .attr('transform', `translate(${margin.l},${margin.t})`) mainG.append('g') .attr('transform', `translate(${width},${0})`).call(axisY) mainG.append('g').attr('transform', `translate(${0},${height})`).call(axisX) mainG .selectAll('rect') .data(barChartData) .join('rect') .attr('height',d => height - scaleLinearY(d)) .attr('width', scaleBandX.bandwidth()) .attr('x', (d,i) => scaleBandX(i+1)) .attr('y',d => scaleLinearY(d)) .attr('stroke', 'black') .attr('stroke-width','1px') .attr('fill','gray') .attr('class',(d,i)=> i === 35?'the-chosen-one':'not-the-chosen-one') return div; }33:T8bb,barChart2 ={ const height = 400; const width = 800; const margin ={l:50,t:20,r:20,b:20}; let number = 95; const div = html`

${number}

` ; const slider = div.querySelector("[type=range]"); const chart = div.querySelector(".barchart"); slider.value = 95; slider.oninput = (e) =>{ d3.select('#number2').text(e.target.value); const scaleLinearY = d3.scaleLinear().domain([0,100]).range([height,0]); d3.select(chart).select('.the-chosen-one') .attr('y',d => scaleLinearY(e.target.value)) .attr('height',d => height - scaleLinearY(e.target.value)); }; const scaleBandX = d3.scaleBand().domain(ordinalData).range([0,width]).padding(0.25); const scaleLinearY = d3.scaleLinear().domain([0,100]).range([height,0]); const axisY = d3.axisLeft(scaleLinearY).tickSize(width); const axisX = d3.axisBottom(scaleBandX); const svg = d3.select(chart).append('svg') .attr('height',height+(margin.t+margin.b)) .attr('width', width+(margin.l+margin.r)) const mainG = svg.append('g') .attr('transform', `translate(${margin.l},${margin.t})`) mainG.append('g') .attr('transform', `translate(${width},${0})`).call(axisY) mainG.append('g').attr('transform', `translate(${0},${height})`).call(axisX) mainG .selectAll('rect') .data(barChartData2) .join('rect') .attr('height',d => height - scaleLinearY(d)) .attr('width', scaleBandX.bandwidth()) .attr('x', (d,i) => scaleBandX(i+1)) .attr('y',d => scaleLinearY(d)) .attr('stroke', 'black') .attr('stroke-width','1px') .attr('fill','gray') .attr('class',(d,i)=> i === 35?'the-chosen-one':'not-the-chosen-one') return div; }34:[] 2f:{"id":"16f503e3fb84c797","slug":"contrast","title":"Contrast","thumbnail":"fe97e62965bad756517dc3d7c798c59259b94c5d559daee9b87469549a87694e","access_level":"public","create_time":"$D2019-09-25T22:39:38.926Z","update_time":"$D2020-04-29T18:19:30.862Z","view_time":null,"first_public_time":"$D2019-09-26T03:33:21.139Z","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":428,"publish_version":428,"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":"Contrast","cells":[{"id":0,"value":"md`# Contrast\n \n\"Contrast is established by difference. There is no contrast unless at least [there are] two things to compare\" -Visual Communication Design (pg. 38)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"md`we allocate and define meaning through contrast a single square with nothing else portrays little meaning as there is no contrast to give it any meaning.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"noContrastSize = {\n let div = html`

`\n let squareData = [50]\n \n d3.select(div)\n .append('svg')\n .attr('width','800')\n .attr('height', '300')\n .selectAll('rect')\n .data(squareData)\n .join('rect')\n .attr('width',d =>d*4)\n .attr('height', d=>d*4)\n .attr('y' , d=> 280-(d*4))\n .attr('rx','5')\n .attr('x', (d,i)=> (i * 280)+ 280)\n .attr('fill', 'rgb(212, 212, 212')\n .attr('stroke','black')\n \n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md `This single square by itself portrays no information as there is nothing to contrast it against. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"md`When we add a second square we admittedly see a contrast.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md `We are drawn to the large square first, and than we compare it to the smaller square by nature humans try to make meaning of contrasts. Humans by nature see contrast dating back to being able to see predators in the wild. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"contrastSize = {\n let div = html`

`\n let squareData = [50,30]\n \n d3.select(div)\n .append('svg')\n .attr('width','800')\n .attr('height', '300')\n .selectAll('rect')\n .data(squareData)\n .join('rect')\n .attr('width',d =>d*4)\n .attr('height', d=>d*4)\n .attr('y' , d=> 280-(d*4))\n .attr('rx','5')\n .attr('x', (d,i)=> (i * 280)+ 280)\n .attr('fill', 'rgb(212, 212, 212')\n .attr('stroke','black')\n \n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"md `drawn a differnt way and the contrast tells a completly different story`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"contrastSizeTwo = {\n let div = html`

`\n let squareData = [50,85]\n \n d3.select(div)\n .append('svg')\n .attr('width','1000')\n .attr('height', '500')\n .selectAll('rect')\n .data(squareData)\n .join('rect')\n .attr('width',d =>d*4)\n .attr('height', d=>d*4)\n .attr('y' , d=> 280-(d*4)+100)\n .attr('rx','5')\n .attr('x', (d,i)=> (i * 280)+ 280)\n .attr('fill', 'rgb(212, 212, 212')\n .attr('stroke','black')\n \n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"md `our original sqaure did not change but how it is contrasted changed and so did the story we tell about our original square wether it is big or small`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"font_contrast ={\n return html` we focus on the word focus first becuase of it contrast`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md`the word focus grabs our attention becuase of it's contrast it is both bold and bigger than the rest of the text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"md`## Attention`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`you can use contrast to gain _attention_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"md`we have used contrast here by turning a single circle red. By nature our attention is immediatly drawn to this single circle. humans by there nature when looking at a page gravitate to the thing that seems out of order by simply turning a single circle a different color it gets all of our attention`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"md `## Contrast is Dependent\n Here is a little experiment to show how contrast is dependent and how contrast can be used in different environments to tell differnt stories\n\n1- Look at the simle barchart below bar # 36 sticks out becuase of the contrast of it's height this bar draws all our attention\n\n2- Move the slider to 25 so that the bar is even with the other bars now not a single indivdual bar gets more attention than another\n\n3- Move the slider up to 26 this bar is now gets all our attention move the bar to 24 still this bar gets all our attention, this is because the uniformity of the this bar sticks out if we move it even a single step\n\nnow move to the second bar chart that has random data`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"md `The tall bar does stand out but since the data is randomized with a mean of 25 it does not have as high of contrast in fact when we move bar # 35 to 26 it fades and no longer garners our attention\n\nThis is becuase it lacks contrast to the other bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"md `Through understanding __Contrast__ we can assing meaning to our data visualizations, and we are able to tell the correct story by directing users to focus on the import elemenst and patterns underlining our data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"barChartData ={\n let data =[]\n for(var i = 0; i<50; i++){\n if(i === 35){\n data.push(95);\n }else{\n data.push(25)\n }\n }\n \n \n return data;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"barChartData2 ={\n let data =[]\n for(var i = 0; i<50; i++){\n if(i === 35){\n data.push(95);\n }else{\n data.push(Math.random()*50)\n }\n }\n \n \n return data;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"ordinalData ={\n let data =[]\n for(var i = 1; i<51; i++){\n data.push(i);\n }\n return data;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"lineChartData ={\n const data =[];\n for (var i = 0; i<100; i++){\n let array =[Math.random()*100,Math.random()*100];\n data.push(array);\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"