25:null 26:["$","title",null,{"children":"Final Project | Junyue Wu | Observable"}] 2b:T9d6,chart = { const margin = 70; const width = 1000; const height = 600; const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) var ageGroup = ["< 1","1-9","10-19","20-24","25-34","35-44","45-54","55-64","65-74","75-84","85+"] var diseases = ["Heart Disease","Mal Neoplasms","Cerebrovas Dis","AIDS","Pneumonia","CLRD","Diabetes Mellitus","Accidents"] var m = diseases.length var n = ageGroup.length var dataInput = [] for(var i = 0; i < ageGroup.length; ++i) { var temp = [] for(var j = 0; j < diseases.length; ++j) { temp.push(dataAll[i][diseases[j]]) } dataInput.push(temp) } var dataset = d3.stack().keys(d3.range(m))(dataInput) var x = d3.scaleBand() .domain(ageGroup) .range([0, width-margin]) var y = d3.scaleLinear() .domain([0, 13000]) .range([height-margin, 0]); const g = svg.append("g") .attr("class", "y axis") .attr("transform", "translate(40,10)") .classed("map-layers", true) .call(d3.axisLeft(y)); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height-margin) + ")") .call(d3.axisBottom(x)) g.append("text") .attr("transform","translate(" + (width/2) + " ," + (height) + ")") .style("text-anchor", "middle") .text("name") .text("Age Group"); g.append("g").selectAll("g") .data(dataset) .enter().append("g") .style("fill", function(d, i) { return colors[i]; }) .selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d, i) { return x(ageGroup[i]); }) .attr("y", function(d) { return y(d[1]); }) .attr("height", function(d) { return y(d[0]) - y(d[1]); }) .attr("width", x.bandwidth()); var legend = svg.append('g') .attr('class', 'legend') .attr('transform', 'translate(70, 10)'); legend.selectAll('rect') .data(diseases) .enter() .append('rect') .attr('x', 0) .attr('y', function(d, i){ return i * 18; }) .attr('width', 12) .attr('height', 12) .attr('fill', function(d, i){ return colors[i]; }); legend.selectAll('text') .data(diseases) .enter() .append('text') .text(function(d){ return d; }) .attr('x', 18) .attr('y', function(d, i){ return i * 18; }) .attr('text-anchor', 'start') .attr('alignment-baseline', 'hanging'); return svg.node(); }2c:T437,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => options[+i.value].value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }2d:T662,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }2e:[] 29:{"id":"9f8557635228d360","slug":"final-project/2","title":"Final Project","thumbnail":"a8fbeb7ab1bf1953cf059d9537414cfcce82b3ae0ee08e888e24a523495c29f1","access_level":"public","create_time":"$D2018-11-12T22:42:20.624Z","update_time":"$D2018-11-13T19:31:49.828Z","view_time":null,"first_public_time":"$D2018-11-12T22:47:55.140Z","has_unpublished_edits":null,"fork":{"id":"0b1278205ce6abe3","slug":"final-project","title":"Final Project","owner":{"id":"ba452799e7baa3eb","login":"mysomeonelikeyou","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"810c4a18118d49e3","login":"janewukk","name":"Junyue Wu","avatar_url":"https://avatars-next.observableusercontent.com/fde1335d2a4994120d468aa16ed59addbb13e816a1e0c03d4cd22caaff79fe03","tier":"starter_2024"},"version":343,"publish_version":343,"role":null,"authored":false,"authors":[{"type":"individual","id":"86d1dd69b8078fd0","login":"janewukk","name":"Junyue Wu","avatar_url":"https://avatars-next.observableusercontent.com/fde1335d2a4994120d468aa16ed59addbb13e816a1e0c03d4cd22caaff79fe03","tier":null}],"members":[{"type":"individual","id":"86d1dd69b8078fd0","login":"janewukk","name":"Junyue Wu","avatar_url":"https://avatars-next.observableusercontent.com/fde1335d2a4994120d468aa16ed59addbb13e816a1e0c03d4cd22caaff79fe03","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Final Project","cells":[{"id":0,"value":"md`# Final Project`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"colors = [\"#FFD662\", \"#92B558\", \"#EC9787\", \"#E8B5CE\", \"#91A8D0\", \"#FF8C00\", \"#09BC8A\", \"#98DDDE\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function zoom (s) {\n s.call(d3.zoom()\n .on(\"zoom\", () => s.select(\".map-layers\").attr(\"transform\", d3.event.transform))\n .scaleExtent([1, 10])\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"dataAll = d3.csv(\"https://raw.githubusercontent.com/janewukk/data/master/data6.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2a:"$29:body"