2e:null 2f:["$","title",null,{"children":"Final Project | mysomeonelikeyou | Observable"}] 34:Tab4,chart = { const margin = 100; const width = 960; const height = 700; const svg = d3.select(DOM.svg(width, height)) .style("width", width-margin) .style("height", height) .call(zoom); 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) console.log(dataset) // console.log(dataset) var x = d3.scaleBand() // .domain(ageGroup) .domain(ageGroup) .range([0, width-margin]) var y = d3.scaleLinear() .domain([0, 13000]) // .domain([0, d3.max(dataset, function(d) { return d.total; })]).nice() .range([height-margin, 0]); const g = svg.append("g") .attr("class", "y axis") .attr("transform", "translate(0,40)") .classed("map-layers", true) .call(d3.axisLeft(y)); // .attr("transform", "translate(0,40)") // .classed("map-layers", true); 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 + margin + 20) + ")") .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.selectAll(".legend") // .data(diseases) // .enter().append("g") // .attr("class", "legend") // .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) // .style("font", "10px sans-serif"); // legend.append("rect") // .attr("x", width + 18) // .attr("width", 18) // .attr("height", 18) // .attr("fill", colors); // legend.append("text") // .attr("x", width + 44) // .attr("y", 9) // .attr("dy", ".35em") // .attr("text-anchor", "start") // .text(function(d) { return d; }); return svg.node(); }35: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; }36: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; }37:[] 32:{"id":"0b1278205ce6abe3","slug":"final-project","title":"Final Project","thumbnail":"c85fbd7d112058ca94d5b68d262458dc44260d86b28cd903c26d21c7e890cd20","access_level":"public","create_time":"$D2018-11-12T22:41:55.745Z","update_time":"$D2018-11-12T22:45:44.322Z","view_time":null,"first_public_time":"$D2018-11-12T22:41:57.549Z","has_unpublished_edits":null,"fork":{"id":"133f60c5c5a82b50","slug":"final-project","title":"Final Project","owner":{"id":"810c4a18118d49e3","login":"janewukk","name":"Junyue Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ba452799e7baa3eb","login":"mysomeonelikeyou","name":"","avatar_url":"https://avatars-next.observableusercontent.com/049eec8324eb18e49a8945ed8377c927514d4f2b1cadd002539a2315c9521e88","tier":"starter_2024"},"version":332,"publish_version":332,"role":null,"authored":false,"authors":[{"type":"individual","id":"48e5a32a6b3cfeab","login":"mysomeonelikeyou","name":"","avatar_url":"https://avatars-next.observableusercontent.com/049eec8324eb18e49a8945ed8377c927514d4f2b1cadd002539a2315c9521e88","tier":null}],"members":[{"type":"individual","id":"48e5a32a6b3cfeab","login":"mysomeonelikeyou","name":"","avatar_url":"https://avatars-next.observableusercontent.com/049eec8324eb18e49a8945ed8377c927514d4f2b1cadd002539a2315c9521e88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":"$34","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":"$35","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":"$36","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":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"