2f:null 30:["$","title",null,{"children":"Contextual Elements, Aesthetics, and Clarity | nyuinfovisspring26 | Observable"}] 35:T9df,function drawScatterPlot(gridColor, dotColor, badOrBetter, visWidth=400, visHeight=400) { const margin = {top: 60, right: 45, bottom: 30, left: 45}; const width = visWidth - margin.left - margin.right; const height = visHeight - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // add title g.append("g") .attr("transform", `translate(${width / 2}, ${-margin.top + 5})`) .call(g => g.append("text") .attr("class", "chart-title") .text(badOrBetter)) .call(g => g.append("text") .attr("y", 25) .attr("class", "chart-title") .text("x1 vs. x2")); // create scales const x = d3.scaleLinear() .domain([0, d3.max(randomPairs, d => d.x)]) .nice() .range([0, width]); const y = d3.scaleLinear() .domain([0, d3.max(randomPairs, d => d.y)]) .nice() .range([height, 0]); // create and add axes const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); g.append("g") .attr("transform", `translate(0, ${height})`) .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("x", width / 2) .attr("y", 30) .attr("fill", "black") .attr("text-anchor", "middle") .text("x1"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("x", -25) .attr("y", height / 2) .attr("fill", "black") .attr("dominant-baseline", "middle") .text("x2"); // draw grid, based on https://observablehq.com/@d3/scatterplot const grid = g.append("g"); grid.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("stroke", gridColor) .attr("x1", 0) .attr("x2", width) .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)); grid.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("stroke", gridColor) .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", d => 0) .attr("y2", d => height); // draw points g.append('g') .selectAll("circle") .data(randomPairs) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("fill", dotColor) .attr("r", 2); return svg.node(); }36:Tce6,function drawStackedBarChart(colorScheme, badOrBetter) { const margin = {top: 90, right: 25, bottom: 35, left: 70}; const width = 400 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // add title g.append("g") .attr("transform", `translate(${width / 2}, ${-margin.top + 5})`) .call(g => g.append("text") .attr("class", "chart-title") .text(badOrBetter)) .call(g => g.append("text") .attr("y", 25) .attr("class", "chart-title") .text("Product Sales by State")); // prepare data const states = salesData.map(d => d.state); const stack = d3.stack().keys(salesData.fields); const stackedData = stack(salesData); // create scales and axes const color = d3.scaleOrdinal() .domain(salesData.fields) .range(colorScheme); const xScale = d3.scaleBand() .domain(states) .range([0, width]) .padding(0.2) const yScale = d3.scaleLinear() .domain([0, d3.max(salesData, d => d.total)]) .nice() .range([height, 0]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale) .tickFormat(d3.format('$')) g.append("g") .attr("transform", `translate(0, ${height})`) .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("x", width / 2) .attr("y", 30) .attr("fill", "black") .attr("text-anchor", "middle") .text("State"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("x", -margin.left) .attr("y", height / 2) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .text("Sales"); // draw legend const squareSize = 10; const gapSize = 40; g.append("g") .attr('transform', `translate(0,-30)`) .selectAll("g") .data([...salesData.fields].reverse()) .join("g") .attr('transform', (d, i) => `translate(${i * (squareSize + gapSize)},0)`) .call(g => g.append('rect') .attr('fill', d => color(d)) .attr('x', 0) .attr('y', 0) .attr('width', squareSize) .attr('height', squareSize)) .call(g => g.append('text') .attr('x', squareSize + 2) .attr('y', squareSize / 2) .attr('dominant-baseline', 'middle') .attr('font-size', squareSize) .attr('font-family', 'sans-serif') .text(d => d)); // draw bars const series = g.append('g') .selectAll('g') .data(stackedData) .join('g') .attr('fill', d => color(d.key)); series.selectAll('rect') .data(d => d) .join('rect') .attr('x', d => xScale(d.data.state)) .attr('width', xScale.bandwidth()) .attr('y', d => { return yScale(d[1]); }) .attr('height', d => yScale(d[0]) - yScale(d[1])); return svg.node(); }37:T958,function drawHeatMap(title, missingDataColor, labelEverything=false) { const margin = {top: 50, right: 25, bottom: 75, left: 40}; const width = 300 - margin.left - margin.right; const height = 360 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .attr("transform", `translate(${width / 2}, ${-margin.top + 5})`) .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .text(title); // create scales const xScale = d3.scaleBand() .domain(d3.range(randomMatrix[0].length)) .range([0, width]) .padding(0.05); const yScale = d3.scaleBand() .domain(d3.range(randomMatrix.length)) .range([0, height]) .padding(0.05); const color = d3.scaleSequential() .domain([0, d3.max(randomMatrix, d => d3.max(d))]) .nice() .interpolator(d3.interpolateGreens) .unknown(missingDataColor); // create and add axes const xAxis = d3.axisTop(xScale); const yAxis = d3.axisLeft(yScale); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()); // draw squares const format = d3.format(".2f"); const rows = g.append("g") .selectAll("g") .data(randomMatrix) .join("g") .attr("transform", (d, i) => `translate(0, ${yScale(i)})`); const squares = rows.selectAll("g") .data(d => d) .join("g") .attr("transform", (d, i) => `translate(${xScale(i)}, 0)`) .call(g => g.append("rect") .attr("width", xScale.bandwidth()) .attr("height", yScale.bandwidth()) .attr("fill", d => color(d))); if (labelEverything) { squares.append("text") .attr("class", "label") .attr("font-size", "10px") .attr("x", xScale.bandwidth() / 2) .attr("y", yScale.bandwidth() / 2) .text(d => format(d)); } // add legend g.append("g") .attr("transform", `translate(0,${height + 10})`) .append(() => legend({color: color, title: "Weight", width: width})); return svg.node(); }38:Tc3f,function drawMatrix(badOrBetter, showGrid, cellWidth=32, cellHeight=32, xSpacing=4, ySpacing=4) { // data const nodes = [ { id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' } ]; const links = [ { source: 'A', target: 'B', weight: 83}, { source: 'A', target: 'C', weight: 97 }, { source: 'B', target: 'C', weight: 42 }, { source: 'D', target: 'C', weight: 11 }, ]; const edgeToWeight = new Map(links.map(edge => [`${edge.source}-${edge.target}`, edge.weight])); const nodeIds = nodes.map(d => d.id); const allEdges = d3.cross(nodeIds, nodeIds, (source, target) => ({ source, target, // if this link isn't in the linkToWeight map, then set the weight to null weight: edgeToWeight.get(`${source}-${target}`) ?? null, })); // margin convention const visWidth = nodes.length * (cellWidth + xSpacing); const visHeight = nodes.length * (cellHeight + ySpacing); const margin = {top: 70, right: 10, bottom: 100, left: 50}; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const y = d3.scaleBand() .domain(nodes.map(d => d.id)) .range([0, visHeight]); const x = d3.scaleBand() .domain(nodes.map(d => d.id)) .range([0, visWidth]); const color = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateReds) .unknown(showGrid ? lightgray : "white"); // create and add axes const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .call(g => g.append("text") .attr("x", visWidth / 2) .attr("y", -30) .attr("fill", "black") .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .text("Target")) .call(g => g.append("text") .attr("x", visWidth / 2) .attr("y", -50) .attr("fill", "black") .attr("class", "chart-title") .text(badOrBetter)) const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", visHeight / 2) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .text("Source")); // draw points g.append('g') .selectAll('rect') .data(allEdges) .join('rect') .attr('x', d => x(d.target) + xSpacing / 2) .attr('y', d => y(d.source) + ySpacing / 2) .attr('width', x.bandwidth() - xSpacing) .attr('height', y.bandwidth() - ySpacing) .attr('fill', d => color(d.weight)); // add legend g.append("g") .attr("transform", `translate(0,${visHeight + 20})`) .append(() => legend({color: color, title: "Weight", width: visWidth})); return svg.node(); }39:T5e5,function drawChoropleth(badOrBetter, borderColor, borderWidth) { const margin = {top: 75, right: 0, bottom: 0, left: 0}; const visWidth = 400 - margin.left - margin.right; const visHeight = 400 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // add legend g.append("g") .attr("transform", `translate(0,-25)`) .append(() => legend({ color: choroplethColor, title: "Unemployment Rate, Decemeber 2019", width: visWidth / 2 })); // add title g.append("g") .append("text") .attr("x", visWidth / 2) .attr("y", -50) .attr("fill", "black") .attr("class", "chart-title") .text(badOrBetter); // draw map const projection = d3.geoAlbersUsa() .fitSize([visWidth, visHeight], usaGeo); const path = d3.geoPath().projection(projection); g.append('g') .selectAll('path') // we're not going to show Puerto Rico and it's not in the // unemployment rate data, so we'll filter it out .data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')) .join('path') .attr('d', path) .attr('fill', d => choroplethColor(stateToRate[d.properties.NAME])) .attr('stroke', borderColor) .attr('stroke-width', borderWidth); return svg.node(); }3a:Ta14,function drawBarchart(badOrBetter, sort) { const data = [ {name: 'Elizabeth', score: 98}, {name: 'Brian', score: 90}, {name: 'Taylor', score: 80}, {name: 'Kelly', score: 70}, {name: 'Jane', score: 45}, {name: 'Joe', score: 30}, ]; const margin = {top: 30, bottom: 40, left: 50, right: 10}; const visWidth = 400 - margin.left - margin.right; const visHeight = 300 - margin.top - margin.bottom; // create and select an svg element that is the size of the bars plus margins const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); // append a group element and move it left and down to create space // for the left and top margins const g = svg.append("g") .attr('transform', `translate(${margin.left},${margin.top})`); g.append("g") .attr("transform", `translate(${visWidth / 2}, ${-margin.top + 5})`) .call(g => g.append("text") .attr("class", "chart-title") .text(badOrBetter)); const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.score)]) .nice() .range([0, visWidth]); const names = sort ? data.slice().sort((a, b) => d3.descending(a.score, b.score)).map(d => d.name) : data.map(d => d.name).sort(); const y = d3.scaleBand() .domain(names) .range([0, visHeight]) .padding(0.2); // bind our data to rectangles g.append('g') .selectAll('rect') .data(data) .join('rect') // set attributes for each bar .attr('x', 0) // each bar starts at the same x position .attr('y', d => y(d.name)) // pass the name to the y-scale to get y position .attr('width', d => x(d.score)) // pass the score to the x-scale to get width of the bar .attr('height', y.bandwidth()) // get the width of each band in the scale .attr('fill', 'steelblue'); // color const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); // add a group for the y-axis g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()); // add a group for the x-axis g.append('g') // we have to move this group down to the bottom of the vis .attr('transform', `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select('.domain').remove()) // add a label for the x-axis .append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', visWidth / 2) .attr('y', 40) .text("Score"); return svg.node(); }3b:T5ad,function drawAreaChart(width, height) { // Setup const margin = {top: 10, right: 30, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = height - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Scales const x = d3.scaleTime() .domain(d3.extent(injuriesByMonth, d => d.date)) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, d3.max(injuriesByMonth, d => d.injuries)]).nice() .range([visHeight, 0]); const area = d3.area() .x(d => x(d.date)) .y1(d => y(d.injuries)) .y0(d => y(0)) // Axes const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%b')) const yAxis = d3.axisLeft(y); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .text('Injured Count'); // Draw the area g.append('path') .attr('fill', 'steelblue') .attr('d', area(injuriesByMonth)) return svg.node(); }3c:[] 33:{"id":"a1eb991d37f4dbb0","slug":"contextual-elements-aesthetics-and-clarity","title":"Contextual Elements, Aesthetics, and Clarity","thumbnail":"c867059d806f7e131ff415676dc4355920f6c9d915ee0aff27253fdcac9caee7","access_level":"public","create_time":"$D2024-08-26T19:30:58.989Z","update_time":"$D2025-10-09T10:00:30.530Z","view_time":null,"first_public_time":"$D2024-10-14T21:11:18.876Z","has_unpublished_edits":null,"fork":{"id":"1717e5cebc3591ce","slug":"contextual-elements-aesthetics-and-clarity","title":"Contextual Elements, Aesthetics, and Clarity","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024"},"version":942,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4ccb8c7aefe8f092","login":"robert-krueger","name":"Robert Krueger","avatar_url":"https://avatars-next.observableusercontent.com/38aea4a405e12671493d571e75c2a4fef2d7a5971986be85a23edf3ba202f3cb","tier":null}],"members":[{"type":"individual","id":"9d973b8b4160d8a4","login":"chahat-kalsi2","name":"Chahat Kalsi","avatar_url":"https://avatars-next.observableusercontent.com/ffa9c19bea26058814dda8d6c3735322ad89e4426d385aba611aafc84df099e1","tier":null,"role":"editor"},{"type":"team","id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"c1b0c78867fb37e3","slug":"guides-and-examples","title":"Guides and Examples","owner":{"id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26"}},"type":"notebook","body":{"title":"Contextual Elements, Aesthetics, and Clarity","cells":[{"id":57,"value":"md`# Contextual Elements, Aesthetics, and Clarity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md`## Grids\n\nHeavy grid lines can draw too much attention, distract from the data, and create clutter. The black grid has too much contrast with the white background. Compare the grids on the scatter plots below. The gray grid used on the right scatter plot is noticeable, but does not dominate the visualization, unlike the black grid on the left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"html`

\n ${drawScatterPlot(\"black\", \"steelblue\", bad)}\n ${drawScatterPlot(lightgray, \"steelblue\", better)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`Similarly, avoid thick and dark borders in choropleths.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"html`

\n ${drawChoropleth(bad, 'black', 2)}\n ${drawChoropleth(better, 'white', 1)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`If you are using a heatmap or adjacency matrix that has missing data, then a light gray background with white grid lines can help break up the perceived empty space and distinguish zero values from missing values. The [Networks notebook](/@nyuinfovis/networks) contains a few additional examples of different ways to add the grid.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"html`

\n ${drawMatrix(bad, false)}\n ${drawMatrix(better, true)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## Color\n\nIt is important to have sufficient contrast between the different layers of a visualization. If there is poor contrast between the marks and the background, then the visualization will be hard to read. Notice how the yellow dots in the scatter plot on the left are harder to see than the blue dots on the right. The yellow points do not have enough contrast with the white background.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"html`

\n ${drawScatterPlot(lightgray, \"yellow\", bad)}\n ${drawScatterPlot(lightgray, \"steelblue\", better)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`In most cases when you have categorical data, you should use a color scheme that has similar levels of brightness and saturation for all of its colors. You don't want some colors to stand out more than others, like the green in the example below. However, this may be desired when you want to highlight a particular category.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"{\n const colorBad = [...d3.schemePastel1];\n colorBad[2] = d3.schemeCategory10[2];\n // make order of colors match the pastel scheme\n const colorBetter = [d3.schemeCategory10[3],\n d3.schemeCategory10[0],\n d3.schemeCategory10[2],\n d3.schemeCategory10[4],\n d3.schemeCategory10[1]]\n return html`

\n ${drawStackedBarChart(colorBad, bad)}\n ${drawStackedBarChart(colorBetter, better)}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`Below are heatmaps to show network data, where some of the datapoints are missing. The red used below on the left makes the missing data be the center of attention, which may not be desired. The gray color used on the right allows the missing data to be identified, without dominating the visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"html`

\n ${drawHeatMap(bad, 'red')}\n ${drawHeatMap(better, '#ccc')}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`## Labels\n\nLabelling every value in a visualization can create unnecessary clutter. Don't add values unless there is a good reason for doing so.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"html`

\n ${drawHeatMap(bad, '#ccc', true)}\n ${drawHeatMap(better, '#ccc')}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md`## Sorting\n\nWhen using position to encode a categorical attribute, choose a meaningful sorting order. Alphabetical order is usually not the best choice.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"html`

\n ${drawBarchart(bad, false)}\n ${drawBarchart(better, true)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`## Size and spacing\n\nCharts do not need to be huge. Small is fine. Unecessarily large charts can be particularly problematic if they require the user to scroll in order to see everything.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"drawScatterPlot(lightgray, \"steelblue\", bad, 900, 900)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"drawScatterPlot(lightgray, \"steelblue\", better, 400, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"md`When using heatmaps, prefer using squares with equal amounts of padding on all sides so that the viewer is not influenced to give more attention to rows vs. columns. In the visualization on the left, cells in the same column are closer together than cells in the same row, so based on the Gestalt law of proximity, we group the cells that are in the same column.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"html`

\n ${drawMatrix(bad, true, 32, 32, 12, 4)}\n ${drawMatrix(better, true, 32, 32, 4, 4)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"What about when we keep the spacing the same but vary the aspect ratio of the cells? Do you see rows or columns on the left? Is it still easy to read in both directions?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":836,"value":"html`

\n ${drawMatrix(question, true, 64, 32, 4, 4)}\n ${drawMatrix(better, true, 32, 32, 4, 4)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`We should also be mindful of the aspect ratios of our charts. Compare the two area charts below that show the number of people injured in vehicle collisions in NYC in 2019. Both charts show the same data, but use drastically different aspect ratios.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"drawAreaChart(width, 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"drawAreaChart(300, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`---\n## Appendix\n\n### Chart functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"md`### Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"lightgray = \"#c4c4c4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"question = \"❓\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"bad = \"❌\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"better = \"✅\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"randomPairs = d3.range(50).map(d => ({x: d3.randomUniform(10)(), y: d3.randomUniform(10)()}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"randomMatrix = {\n const size = 10;\n const rand = d3.randomUniform();\n const data = d3.range(size).map((d, i) => d3.range(size).map((b, j) => {\n if (i === j) {\n return 0;\n } else if (rand() < 0.125) {\n return NaN;\n } else {\n return rand();\n }\n }));\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"salesData = {\n const data = [\n {state: 'NY', shirts: 900, pants: 800, shoes: 700, coats: 500, hats: 600},\n {state: 'NJ', shirts: 300, pants: 400, shoes: 300, coats: 800, hats: 200},\n {state: 'PA', shirts: 400, pants: 300, shoes: 200, coats: 500, hats: 900},\n {state: 'CT', shirts: 400, pants: 900, shoes: 800, coats: 500, hats: 600},\n {state: 'DE', shirts: 900, pants: 800, shoes: 800, coats: 800, hats: 400}\n ];\n\n const keys = Object.keys(data[0]).slice(1);\n \n const dataWithTotal = data.map(d => {\n d.total = d3.sum(keys.map(k => d[k]));\n return d;\n }).sort((a, b) => d3.descending(a.total, b.total));\n\n dataWithTotal.fields = keys;\n \n return dataWithTotal;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"import {stateToRate, usaGeo, color as choroplethColor} from \"@nyuvis/graphical-encoding-exercise\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"import { injuriesByMonth } from \"@nyuvis/lines-and-maps\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 34:"$33:body"