36:["$","title",null,{"children":"Flint Water Crisis | Celia Arsen | Observable"}] 3e:Teeb,timeline_chart = { const root = d3.hierarchy(timeline_data); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-timeline_margin.left, -timeline_margin.top, width, dx]) .style("font", "12px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-opacity", 0.9) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const timeline_height = right.x - left.x + timeline_margin.top + timeline_margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-timeline_margin.left, left.x - timeline_margin.top, width, timeline_height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", d => { d.children = d.children ? null : d._children; update(d); }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }3f:T71a,viewof O = { const labels = html`

Click on which demographic and pollutant you would like to focus on.

`; //Creating the buttons themselves, not any click actions //This is creating the transitions for when the button is clicked labels.onclick = event => { const labels = event.target.id; //labels = Black, White, Above Poverty, Below Poverty const type = event.target.id; if (labels === 'race') { mutable groupA = 'Black'; //If Black is clicked it will pair up and show with White (which is why there are two mutable variables when clicked mutable groupB = 'White'; } else if (labels === 'socio') { //If Above Poverty is clicked it will pair up and show with Below Poverty mutable groupA = 'Below Poverty'; mutable groupB = 'Above Poverty'; } if (type === 'lead') { mutable chemical = 'Lead';//If Lead is clicked, will just show lead (hence only one mututable if clicked) } else if (type === 'copper') {//If copper is clicked it will just show copper mutable chemical = 'Copper'; } }; return labels; }40:T6a1,chart = { plot; // create groups for axis, dots //adding the y-axis to the graph plot.append('g') .attr('transform', `translate(${margin.l}, ${margin.t})`) .attr('class', 'axis axis-y'); //adding the x-axis plot.append('g') .attr('transform', `translate(${margin.l}, ${margin.t + height})`) .attr('class', 'axis axis-x'); //adding the dots to the graph plot.append('g') .attr('transform', `translate(${margin.l}, ${margin.t})`) .attr('class', 'dots'); //adding the lead/copper numbers (it was just called percentages in the code I had used, but it's just numbers) plot.append('g') .attr('transform', `translate(${margin.l}, ${margin.t})`) .attr('class', 'percentages'); //adding the legend to the graph plot.append('g') .attr('transform', `translate(0, 25)`) .attr('class', 'legend'); createAxis(); //the actual creation of the axis (plot.append above is only adding this method to the chart, this function is actually creating the axis. createLegend(); //actual creation of the legend (same logic as createAxis vs plot.append) styling(); //the styles for the axis (change this function if you want the lines to be bolder/more tick marks, etc). const drawingData = createData(); //actually creating the amount of "dots" needed by creating an array of points that correlate with the numbers. console.log('drawing', drawingData); //checking that it works drawDots(drawingData); //putting the array of points ("dots") into the drawDots function that will create the actually drawing of the dots and the transitions/transition speeds. return plot.node(); //having the plot show up on observable }41:T57b,md` ##### Work Division Celia did data preparation, Teresa created initial line chart design, Olinah produced bar charts and final design, all conducted user studies. ##### Technical / Design Challenges We had difficultly adding a horizontal line to indicate safe EPA standard lead/copper levels and were unable to show both lead and copper in one graph. ##### User Testing We conducted eight user tests. Most users didn't understand what the dots and bars measured, but figured it out after interacting with the buttons. Three users thought the y-axis represented a percent at first because the scale went to 100. Most users wanted more information about the pollutants. Three users suggested including EPA limits either as a written note or as a horizontal line on the graph. One user thought the constant y-axis for both pollutants could be misleading. One user suggested a more informative title would be “Average Lead Levels by Flint Resident Race." One user wanted to compare both chemicals simultaneously. Still, several users were able to draw meaningful insights. One liked seeing the exact chemical levels and the general trend over time. With another week, we'd add a more descriptive title, a y-axis title, EPA guideline information, and a dynamic y-axis. We also wanted a dropdown for comparison to other U.S. cities and a tooltip to provide relevant news sources from a given year. `42:T562,function createLegend() { const plotLegend = plot.select('.legend'); //selecting the legend class to plot plotLegend.selectAll('text').remove(); //removing any extraneous text that the legend makes. It's just a function needed particularly in ObservableHQ plotLegend.append('text') .text(chemical + ' Level Estimates in Flint, Michigan Drinking Water') //Title .attr('x', width /2) .attr('text-anchor', 'middle') .style('font-family', 'Helvetica, sans-serif') .style('fill', '#222222'); plotLegend.append('text') //This is the text group currently for Black and Above Poverty Line .text(groupA) //groupA = Black, Above Poverty Line .style('font-weight', 'bold') .style('font-family', 'Helvetica, sans-serif') .style('fill', dark()) plotLegend.append('text') .text(groupB) //groupB = White, Below Poverty Line .attr('y', 25) //This attribute is needed so that groupB label goes under groupA's label. Without this, both labels would overlap on the chart and not be readable. .style('font-weight', 'bold') .style('font-family', 'Helvetica, sans-serif') .style('fill', light());//light_blue = "#92a8d1" plotLegend.append('text') .text('1 dot = 0.1 ppb') .attr('x', width) .attr('y', 20) .attr("font-size", "11px") .style('font-family', 'Helvetica, sans-serif') .attr('text-anchor', 'end') }43:Te25,//CITATION FOR THE DOTS CODE = Irene de la Torre on Observable -dot-bar-chart-with-transitions function drawDots(data) { const thisData = data[0]; const numbers = data[1]; console.log(thisData); const plotDataDot = plot .select('.dots') .selectAll('.dot') .data(thisData, (d, i) => `${d.name}_${i}`); // new dots being drawn plotDataDot .enter() .append('circle') .attr('class', d => `dot ${d.name}-${d.category}`) .attr('r', 0) .attr('cx', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); const row = Math.floor(d.value);// each row 1 dot, round floor const column = +(d.value - row).toFixed(1); const spaceDecimal = scaleXDecimal(column); return spaceCategory + spaceRegion + spaceDecimal; }) .attr('cy', (d, i) => i * r * 2) .style('fill', d => scaleColor(d.name)) .transition() .delay((d, i) => { return i * Math.random() * 0.25; //Change this if you want to change the speed in between the transitions }) .duration(500) .attr('r', r) .attr('cy', d => { const y = Math.floor(d.value); return scaleY(y) - r * 2; }); // remove dots that won't happen plotDataDot .exit() .transition() .duration(250) .attr('r', 0) .remove(); // transition animation for dots that need to be updated (position) plotDataDot .transition() .delay((d, i) => { return i * Math.random() * 0.5; }) .duration(500) .attr('cx', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); const row = Math.floor(d.value);// each row 1 dot, round floor const column = +(d.value - row).toFixed(1); const spaceDecimal = scaleXDecimal(column); return spaceCategory + spaceRegion + spaceDecimal; }) .attr('cy', d => { const y = Math.floor(d.value); return scaleY(y) - r * 2; }) .style('fill', d => scaleColor(d.name)); // plot numbers const plotDataText = plot .select('.percentages') .selectAll('text') .data(numbers, (d) => `${d.name}_${d.type}`); // new text being drawn plotDataText .enter() .append('text') .attr('class', d => `${d.name}-${d.category}`) .text(d => `${d.category_value}`) .attr('x', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); return spaceCategory + spaceRegion; }) .attr('y', d => { return scaleY(d.category_value) - 15; }) .attr('dy', '.35em') .style('fill', d => scaleColorText(d.name)) .style('font-family', 'Helvetica, sans-serif') .style('font-weight', 'bold') .style('opacity', 0) .transition() .duration(500) .style('opacity', 1); // remove text that won't happen (not in this case) plotDataText .exit() .transition() .duration(250) .style('opacity', 0) .remove(); // transition animation for text that needs to be updated (position) plotDataText .transition() .duration(500) .text(d => d.category_value) .attr('x', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); return spaceCategory + spaceRegion; }) .attr('y', d => { return scaleY(d.category_value) - 10; }) .style('fill', d => scaleColorText(d.name)); }44:T555,// this function creates the data for the dots function createData() { const pointsArray = []; const values = []; const thisGroupA = data_groupA.filter(d => d.groupA === groupA && d.chemical === chemical)[0]; //looking for the data from Black/Above Poverty that correlate with lead/chemical const thisGroupB = data_groupB.filter(d => d.groupB === groupB && d.chemical === chemical)[0];//looking for the data from White/Below Poverty that correlate with lead/chemical pushToArray(thisGroupA, groupA); //creating the array of points for groupA which will be the amount of dots drawn in drawDots() pushToArray(thisGroupB, groupB); // create array function pushToArray(thisData, name) { years.forEach((category) => { for (let i = 0; i < thisData[category] * 10; i++) { const number = i / 10; pointsArray.push({ id: `${name}_${number}`, name: name, category: category, value: Math.floor(number * 10) / 10, category_value: thisData[category], type: years, //this is correlating the data between Group A vs Group B to the year }); } values.push({ name: name, category: category, category_value: thisData[category], type: years, }); }); } return [pointsArray, values]; //what goes into drawDots() }45:[{"id":"c1a1b9670c9f33adee03e977096b8f7852dc34e2d953808a6e9b569acdcbbb1ea0d26a2dd43abeea288442b583db9541228ddae028038dbf8cfae9a32fc7156a","href":"https://static.observableusercontent.com/files/c1a1b9670c9f33adee03e977096b8f7852dc34e2d953808a6e9b569acdcbbb1ea0d26a2dd43abeea288442b583db9541228ddae028038dbf8cfae9a32fc7156a","name":"1.png","type":"image/png","lastModified":1587071086057.246,"size":32803},{"id":"c7009b38e9778e91795299bf7a90949492119f935a48cd046fdac4017891f072ac385ed290e3e02cd3be373f376750ffcaac18bfd9bc5cb054e7f2bb9217758f","href":"https://static.observableusercontent.com/files/c7009b38e9778e91795299bf7a90949492119f935a48cd046fdac4017891f072ac385ed290e3e02cd3be373f376750ffcaac18bfd9bc5cb054e7f2bb9217758f","name":"Screen Shot 2020-03-28 at 2.04.39 PM.png","type":"image/png","lastModified":1587071086057.246,"size":128529},{"id":"354b4a9fa5f8ad2f4fc12367cdc0c957db597b6cdccc7053a33c0d3bd6a0c4d728bb1f7dd78d1010cc87c1b7433739ab88e1bf61af7e4496e63c54c0c9783f29","href":"https://static.observableusercontent.com/files/354b4a9fa5f8ad2f4fc12367cdc0c957db597b6cdccc7053a33c0d3bd6a0c4d728bb1f7dd78d1010cc87c1b7433739ab88e1bf61af7e4496e63c54c0c9783f29","name":"Screen Shot 2020-03-28 at 2.16.21 PM.png","type":"image/png","lastModified":1587071086057.246,"size":176975},{"id":"31f5476dfa5a14a1801addeb9ad4b42e643c879974430c0e2df6b061a1550d24e5ae7e7dc954e840067a90f6e8bfb7f1a46665e7f7d86c3ac68abf7aff4fdf37","href":"https://static.observableusercontent.com/files/31f5476dfa5a14a1801addeb9ad4b42e643c879974430c0e2df6b061a1550d24e5ae7e7dc954e840067a90f6e8bfb7f1a46665e7f7d86c3ac68abf7aff4fdf37","name":"3.png","type":"image/png","lastModified":1587071086057.246,"size":100606},{"id":"e432d59a465050dea6652a0b70fbb6ffb24af53343f3ac2d4303e718e77b18e058de9f14017617bec24d06f349c62b9ba9a0587e419e45e2d87ff654e1b0b991","href":"https://static.observableusercontent.com/files/e432d59a465050dea6652a0b70fbb6ffb24af53343f3ac2d4303e718e77b18e058de9f14017617bec24d06f349c62b9ba9a0587e419e45e2d87ff654e1b0b991","name":"4.png","type":"image/png","lastModified":1587071086057.246,"size":68720},{"id":"94c68a21f7ce8354cf1d0e9069baf39ea6db99e5ca60a6f4099cc64caa7ecb4af70e3deac3e9e6a1a8d356193c0c0de702dfc7419071abd145eec59b8d22799e","href":"https://static.observableusercontent.com/files/94c68a21f7ce8354cf1d0e9069baf39ea6db99e5ca60a6f4099cc64caa7ecb4af70e3deac3e9e6a1a8d356193c0c0de702dfc7419071abd145eec59b8d22799e","name":"flare-2 (1).json","type":"application/json","lastModified":1587071086057.246,"size":4320}] 3a:{"id":"f068680dd6209b23","slug":"flint-water-crisis/4","title":"Flint Water Crisis","thumbnail":null,"access_level":"public","create_time":"$D2020-04-16T21:04:46.057Z","update_time":"$D2020-04-16T21:04:46.057Z","view_time":null,"first_public_time":"$D2020-04-16T21:04:53.428Z","has_unpublished_edits":null,"fork":{"id":"5da08fdf30b68c07","slug":"flint-water-crisis","title":"Flint Water Crisis","owner":{"id":"fc324da8b4bf51a0","login":"oh","name":"Olinah Hassan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ebe6576eb3451360","login":"celiaarsen","name":"Celia Arsen","avatar_url":"https://avatars-next.observableusercontent.com/b8ebb524c2ab0afd9b6b4e819a84fd27198320a51e4abe6d049f877752eb1fa9","tier":"starter_2024","bio":"Information Science Major at Barnard College, Columbia University","followed_by_you":false,"follows_you":false},"version":352,"publish_version":352,"role":null,"authored":false,"authors":[{"type":"individual","id":"f16d5c0dac028279","login":"celiaarsen","name":"Celia Arsen","avatar_url":"https://avatars-next.observableusercontent.com/b8ebb524c2ab0afd9b6b4e819a84fd27198320a51e4abe6d049f877752eb1fa9","tier":null,"bio":"Information Science Major at Barnard College, Columbia University","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f16d5c0dac028279","login":"celiaarsen","name":"Celia Arsen","avatar_url":"https://avatars-next.observableusercontent.com/b8ebb524c2ab0afd9b6b4e819a84fd27198320a51e4abe6d049f877752eb1fa9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flint Water Crisis","cells":[{"id":0,"value":"md`# Flint Water Crisis\n\n by [Celia Arsen](https://observablehq.com/@celiaarsen), [Olinah Hassan](https://observablehq.com/@oh), and [Teresa Tseng](https://observablehq.com/@teresatseng/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md\n`In 2014, Flint, Michigan switched from using Detroit water to using water from the Flint River in an effort to save money. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md `**Click on a black node to expand or collapse** the simplified [timeline](https://www.nrdc.org/stories/flint-water-crisis-everything-you-need-know#sec-timeline) of the events that followed:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md` ### Our Question\nOverall, lead and copper levels in Flint's drinking water have decreased since the city switched back to Detroit water in 2015.\n\nHowever, *have dangerous chemicals in the water levels decreased at the same rate for all demographic groups?* \n\nTo answer this question, we compare estimates of drinking water contamination for the black population and white population and we compare estimates of drinking water contamination for the population below and above the federal poverty level in Flint. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md` ### Write-up\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`##### Data and Methods\n\nMichigan published residential water testing results from 2015 to 2019, but didn't consistently test the same residencies. The number of residencies sampled decreased after 2016. \n\nThere isn't demographic information on individuals living in tested residencies, but with the location of the residencies and the demographic breakdown of the Census Tracts in which they're located, we estimate the average level of contamination a resident from a demographic group experienced in Flint.\n\nFor example, to find average lead contamination for black residents in 2015:\n\n* Find average lead level across all residencies in a Census Tract \n* Weight (multiply) that average by number of black residents living on the Census Tract\n* Compute this product for all Tracts, add the products from all the Census Tracts together\n* Divide this sum by total number of black residents in the city to get weighted average of lead contamination\n* Repeat for all demographic groups, chemicals, and years\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md` ### Intermediate designs `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md ` \n##### Design 1\nLine chart of average lead levels in Flint from 2016 to 2020\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"image1 = FileAttachment(\"1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md `\n##### Design 2\nA grouped bar chart for both copper and lead levels of all groups (race and socioeconomic status). Tooltip added.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"image2 = FileAttachment(\"Screen Shot 2020-03-28 at 2.04.39 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md `\n##### Design 3\nGrouped bar charts for lead and copper with tooltip. Lead and Copper are now separated for easier viewing. Colors used to differentiate between 4 demographic groups.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"image3 = FileAttachment(\"Screen Shot 2020-03-28 at 2.16.21 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md `\n##### Design 4\nAdded buttons (interactivity element) to toggle between demographic/pollutant views, instead of having separate charts for each pollutant.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"image4 = FileAttachment(\"3.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md `\n##### Design 5\nAdded legend for better understanding of dot display. Missing timeline information (added in final).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"image5 = FileAttachment(\"4.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md `\n#### Sources\n\n##### Narrative Timeline\n D3's Collapsible Tree:\n\n https://observablehq.com/d/46c294010b4b6438\n\n##### Our Final Design: \nIrene de la Torre’s Grouped Dot Bar Chart With Transitions: \n\nhttps://observablehq.com/@irenedelatorre/grouped-dot-bar-chart-with-transitions\n\n##### Intermediary Designs:\nD3’s Mike Bostok’s Grouped Bar Chart:\n\nhttps://observablehq.com/@d3/grouped-bar-chart\n\nRowan Copley’s Multi-Valued Bar Chart:\n\nhttps://observablehq.com/@dovinmu/multi-valued-bar-chart\n\nTyler Wolf’s Day 5 - Our First Bar Chart:\n\nhttps://observablehq.com/@thetylerwolf/day-5-our-first-bar-chart\n\t\nMatthias Skou’s Matthias D3 | Simple Bar-Chart with Tooltip-Hover:\n\t\nhttps://observablehq.com/@nordea/matthias-d3-simple-bar-chart-with-tooltip-hover\n\nAgnes Chang’s Demo 2: Interactivity: \n\nhttps://observablehq.com/@agness/introdv-f18-demo-2-interactivity\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"//Styling for the Graph X-Axis and Y-Axis\nfunction styling() {\n \n plot.select('.axis-y')\n .selectAll('path')\n .style('display', 'none');\n \n plot.select('.axis-y')\n .selectAll('line')\n .style('stroke-width', 1)\n .style('stroke', '#d4d4d4');\n\n plot.select('.axis-x')\n .selectAll('line')\n .style('stroke-width', '2')\n .style('stroke', '#222222');\n \n plot.select('.axis-x')\n .selectAll('text')\n .style('font-size', '1rem');\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// function to create axis\n function createAxis() {\n const axisX = d3.axisBottom()\n .scale(scaleXCategory)\n .tickPadding(5);\n\n const axisY = d3.axisLeft()\n .scale(scaleY)\n .tickSize(-width)\n .tickValues([0, 25, 50, 75, 100])\n .tickPadding(5);\n\n plot.select('.axis-x')\n .call(axisX);\n \n plot.select('.axis-y')\n .call(axisY);\n\n plot.select('.axis-x')\n .selectAll('.domain')\n .remove();\n\n plot.select('.axis-x')\n .append('line')\n .attr('class', 'domain')\n .attr('x1', 0)\n .attr('x2', width)\n .attr('y1', 0)\n .attr('y2', 0);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"r = (height / 100) / 2 //radius of the dots ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function light() {\n if (groupA=='Black') {\n return '#92a8d1'\n } else {\n return '#bed130'}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function dark() {\n if (groupA=='Black') {\n return '#034f84'\n } else {\n return '#8b9448'}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"//the colors for the dots that make up the bars\nscaleColor = d3.scaleOrdinal()\n .domain([groupA, groupB])\n .range([dark(), light()]); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"//colors of the text\nscaleColorText = d3.scaleOrdinal()\n .domain([groupA, groupB])\n .range([dark(), light()]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"years = ['2015', '2016', '2017', '2018', '2019']; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"scaleXCategory = d3.scaleBand().domain(years).range([0, width - margin.r]).paddingInner([0.4]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"//same code as our bar charts in prior iterations \ncategorySpace = scaleXCategory.bandwidth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable groupA = 'Below Poverty'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"mutable groupB = 'Above Poverty'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"mutable chemical = 'Lead'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"//same code as our bar charts in prior iterations \nscaleXRegion = d3.scaleBand()\n .domain([groupA, groupB])\n .range([padding, categorySpace - padding])\n .paddingInner([0.1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"//same code as our bar charts in prior iterations \nxAxis = scaleXRegion.bandwidth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//same code as our bar charts in prior iterations \nscaleXDecimal = d3.scaleBand()\n .domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])\n .range([0, xAxis])\n .paddingInner([1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"padding = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"scaleY = d3.scaleLinear().domain([0, 100]).range([height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data_groupA = d3.csvParse(`groupA,chemical,2015,2016,2017,2018,2019\nBlack,Lead,15.54,13.41,8.04,2.65,8.98 \nBlack,Copper,87.21,97.27,64.79,21.89,33.64\nBelow Poverty,Lead,16.48,12.72,10.88,3.26,5.46\nBelow Poverty,Copper,92.92,102.58,66.40,24.82,48.64\n`, )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"data_groupB = d3.csvParse(`groupB,chemical,2015,2016,2017,2018,2019\nWhite,Lead,13.48,9.45,9.22,3.07,2.50\nWhite,Copper,90.83,94.55,81.72,41.84,49.62\nAbove Poverty,Lead,13.68,10.01,8.12,2.58, 6.48\nAbove Poverty,Copper,86.95,92.41,77.96,34.36, 37.50\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"plot = d3.create('svg')\n .attr('width', width + margin.l + margin.r)\n .attr('height', height + margin.t + margin.b);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"//Example: you want to change the left margin, call \"margin.l\" \nmargin = ({\n l: 25,\n r: 25,\n t: 70,\n b: 40,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"timeline_margin = ({top: 10, right:0, bottom: 10, left: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"dx = 11","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"dy = width / 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"timeline_data = FileAttachment(\"flare-2 (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 35:null