36:["$","title",null,{"children":"Final Xploration1 | Junyue Wu | Observable"}] 3e:T12a8,chart_p = { const svg = d3.select(DOM.svg(width_p, height_p)); //console.log(xM(parseInt(data.Male))); // svg.append("g") // //.attr("fill", d3.schemeSet1[1]) // .attr("fill", "#4682B4") // //.attr('opacity',0.8) // .selectAll("rect") // .data(data_population) // .enter().append("rect") // // .attr("x", d => xM(0)) // // .attr("y", d => y(d.Age)) // .attr("rx", 3) // .attr("ry",3) // // .attr("width", 0) // // .attr("height", y.bandwidth()) // .style("opacity", function(d,i){ // if (i==age_select_p){ // return 1.0; // } // return 0.5; // }) // // .transition() // apply a transition // // .ease(d3.easeExp) // control the speed of the transition // // .duration(2000) // apply it over 2000 milliseconds // .attr("x", d => xM(parseInt(d.Male))) // .attr("y", d => y(d.Age)) // .attr("width", d => xM(0) - xM(parseInt(d.Male))) // .attr("height", y.bandwidth()); // svg.append("g") // //.attr("fill", d3.schemeSet1[0]) // .attr("fill","#DB7093") // //.attr('opacity',0.8) // .selectAll("rect") // .data(data_population) // .enter().append("rect") // .attr("x", xF(0)) // .attr("y", d => y(d.Age)) // .attr("rx", 3) // .attr("ry",3) // // .attr("width", 0) // // .attr("height", y.bandwidth()) // .style("opacity", function(d,i){ // if (i==age_select_p){ // return 1.0; // } // return 0.5; // }) // // .transition() // apply a transition // // .ease(d3.easeExp) // control the speed of the transition // // .duration(2000) // apply it over 2000 milliseconds // .attr("width", d => xF(parseInt(d.Female)) - xF(0)) // .attr("height", y.bandwidth()); const g1 = svg.append("g") const g2 = svg.append("g") g1.attr("fill", "#4682B4") .selectAll("rect") .data(data_population) .enter() .append("rect") .attr("rx", 3) .attr("ry",3) .on("click", function(d, i){handleClick(d, i)}) .style("opacity", function(d,i){ if (i==age_select_p){ return 0.4; } return 1.0; }) .attr("x", d => xM(parseInt(d.Male))) .attr("y", d => y(d.Age)) .attr("width", d => xM(0) - xM(parseInt(d.Male))) .attr("height", y.bandwidth()) function handleClick(d, i) { console.log("click") g1.selectAll("rect").style("opacity",0.5) g2.selectAll("rect").style("opacity",0.5) g1.select("rect:nth-child("+(i+1)+")").style("opacity",1.0) g2.select("rect:nth-child("+(i+1)+")").style("opacity",1.0) } g2.attr("fill","#DB7093") //.attr('opacity',0.8) .selectAll("rect") .data(data_population) .enter().append("rect") .attr("x", xF(0)) .attr("y", d => y(d.Age)) .attr("rx", 3) .attr("ry",3) .on("click", handleClick) .style("opacity", function(d,i){ if (i==age_select_p){ return 0.4; } return 1.0; }) .attr("width", d => xF(parseInt(d.Female)) - xF(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "start") .style("font", "10px sans-serif") .selectAll("text") .data(data_population) .enter().append("text") .attr("x", d => xM(parseInt(d.Male)) + 4) .attr("y", d => y(d.Age) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.Male); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "10px sans-serif") .selectAll("text") .data(data_population) .enter().append("text") .attr("x", d => xF(parseInt(d.Female)) - 4) .attr("y", d => y(d.Age) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.Female); svg.append("text") .attr("text-anchor", "end") .attr("fill", "black") .style("font", "20px sans-serif") .attr("dy", "0.35em") .attr("x", xM(0) - 6) .attr("y", 40) .text("Male"); svg.append("text") .attr("text-anchor", "start") .attr("fill", "black") .style("font", "20px sans-serif") .attr("dy", "0.35em") .attr("x", xF(0) + 6) .attr("y", 40) .text("Female"); svg.append("text") .attr("text-anchor", "middle") .attr("fill", "black") .style("font", "20px sans-serif") .attr("x", d => xM(0)) .attr("y", d => 10) .attr("dy", "0.35em") .text("Population by Age and Gender"); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }3f:Tb3a,chart2 = { var width2 = 1000 const svg = d3.select(DOM.svg(width2, height)); const arrayScale2 = d3.scaleLinear() .domain([0, 12]) //12 months .range([margin.left, width2-(margin.left+margin.right)]); var marriage = [4838, 5706, 6878, 6801, 7541, 7593, 6998, 8704, 7747, 6879, 6929, 7459] var sortedArray = [4838, 5706, 6878, 6801, 7541, 7593, 6998, 8704, 7747, 6879, 6929, 7459] var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] //console.log(death_by_age) var color2 = d3.scaleLinear() .domain([0, 12]) .range(['#ffeeea', '#f6646e']); sortedArray.sort(); var color_arr = []; for (var j=0; j<12; ++j){ for(var i = 0; i < sortedArray.length; ++i) { var marriage_num = parseInt(sortedArray[i]); if( marriage[j] == marriage_num) { color_arr.push(color2(i)); } } } svg.append('g') .attr('transform',`translate(${margin.left},${margin.top})`) .selectAll('circle') .data(marriage) .enter() .append('circle') //.attr('cx', (d)=>width/2) .attr("cx", d => width2/2) .attr("cy", d => height/2) .attr('r', function(d){return Math.sqrt(d)/3;}) .attr('fill',function(d,i){return color_arr[i];}) .transition() // apply a transition .ease(d3.easeExp) // control the speed of the transition .duration(2000) // apply it over 2000 milliseconds .attr('cx',function(d,i){return arrayScale2(i);}) .attr('cy', (d)=> height/2 ) // .attr('fill',"#ffc2b8");// try "#3CB371" #4682B4); // .style("opacity", function(d,i){ // if (i==age_select){ // return 1.0; // } // return 0.1; // }) svg.append("g") .selectAll("text") .data(marriage) .enter() .append("text") //.attr("class", "label") .style("font", "12px sans-serif") .attr("x", function(d,i){return arrayScale2(i)+20;}) .attr("y", (d)=> height/2 - 15) .style("text-anchor", "middle") .text(function (d) { return d; }); svg.append("g") .selectAll("text") .data(month) .enter() .append("text") //.attr("class", "label") .style("font", "20px apple-chancery") .attr("x", function(d,i){return arrayScale2(i)+20;}) .attr("y", (d)=> height/2+70) .style("text-anchor", "middle") .text(function (d) { return d; }); // `Number of Death of Age Group`+: ${death}`); svg.append("g") .append("text") .attr("class", "label") .style("font", "20px sans-serif") //.style("font", "20px apple-chancery") .attr("x", (d)=>width2 / 2 ) .attr("y", height - margin.bottom) .style("text-anchor", "middle") .text(function (d) { return "Number of Marriage Ceremony"; }); // `Number of Death of Age Group`+: ${death}`); return svg.node(); }40:T945,chart1 = { const width2 = width const height2 = height+50 const svg = d3.select(DOM.svg(width2, height2)); // const arrayScale2 = d3.scaleLinear() // .domain([ 0, ageGroup.length]) // .range([0, width-(margin.left+margin.right)]); var death_by_age = [] var cnt = 0 for(var i = 0; i < ageGroup.length; ++i) { for(var j = 0; j < diseases.length; ++j) { cnt = cnt + parseInt(dataAll[i][diseases[j]]) } death_by_age.push(cnt) } //console.log(death_by_age) // svg.append('g') // .attr('transform',`translate(${margin.left},${margin.top})`) // .selectAll('circle') // .data(death_by_age) // //.data(dat) // .enter() // .append('circle') // .attr('cx', (d)=>width2/2) // //.attr('cx',function(d,i){return arrayScale2(i);}) // .attr('cy', (d)=> height/2 ) // .attr('r', function(d){return Math.sqrt(d);}) // .style('stroke','#E0E0E0') // .style('stroke-width',5) // .style("opacity", function(d,i){ // if (i==age_select){ // return 1.0; // } // return 0.1; // }) // .attr('fill',"#4682B4");// try "#3CB371" #4682B4); const g1 = svg.append('g') .attr('transform',`translate(${margin.left},${margin.top})`) g1.selectAll('circle') .data(death_by_age) .enter() .append('circle') .attr('cx', (d)=>width2/2) .attr('cy', (d)=> height/2) .attr('r', function(d, i){ return Math.sqrt(d); }) .style("opacity", function(d,i){ return 0.1; }) .attr('fill',"#4682B4") var d_in = death_by_age[age_select]; g1.append('circle') .attr('cx', (d)=>width2/2) .attr('cy', (d)=> height/2) .attr('r', 0) .style('stroke','#E0E0E0') .style('stroke-width',5) .style("opacity", 0.6) .attr('fill',"#4682B4") .transition() .ease(d3.easeExp) .duration(3000) .attr('r', Math.sqrt(d_in)) let death_num = death_by_age[age_select]; let age = ageGroup[age_select]; svg.append("g") .append("text") .attr("class", "label") .style("font", "20px sans-serif") .attr("x", (d)=>width2 / 2 ) .attr("y", height2 - margin.bottom) .style("text-anchor", "middle") .text(function (d) { return "Number of Death of Age Group " + age + ": " + death_num; }); // `Number of Death of Age Group`+: ${death}`); return svg.node(); }41:T7ff,chart = { const svg = d3.select(DOM.svg(width, height)); var colorDict = {} colorDict["#FF6666"] = 0; colorDict["#FFB266"] = 1; colorDict["#FFFF66"] = 2; colorDict["#B2FF66"] = 3; colorDict["#66FF66"] = 4; colorDict["#66FFB2"] = 5; colorDict["#66FFFF"] = 6; colorDict["#66B2FF"] = 7; var colorCount = {} colorCount['#FF6666'] = 0; colorCount['#FFB266'] = 0; colorCount['#FFFF66'] = 0; colorCount['#B2FF66'] = 0; colorCount['#66FF66'] = 0; colorCount['#66FFB2'] = 0; colorCount['#66FFFF'] = 0; colorCount['#66B2FF'] = 0; function calculatePosition(d) { var out = {} out.y = colorDict[d.data]; out.x = 0; colorCount[d.data] += 1; out.x += (colorCount[d.data] / 10); return out; } svg.append('g') .attr('transform',`translate(${margin.left},${margin.top})`) .selectAll('circle') .data(layout(dataArray)) .enter() .append('circle') .attr('cx', (d)=> arrayScale(d.position.x) ) .attr('cy', (d)=> arrayScale(d.position.y) ) .attr('r', pointRadius) .attr('fill',(d) => d.data ) .transition() // apply a transition .ease(d3.easeExp) // control the speed of the transition .duration(2000) // apply it over 2000 milliseconds .attr('cx', (d)=> arrayScale(d.position.x)) .attr('cy', (d)=> arrayScale(d.position.y)) .transition() // apply a transition .ease(d3.easeExp) // control the speed of the transition .duration(3000) // apply it over 2000 milliseconds .attr('cx', (d)=> arrayScale(calculatePosition(d).x)) .attr('cy', (d)=> arrayScale(calculatePosition(d).y)) svg.append("g") .append("text") .attr("class", "label") .style("font", "14px sans-serif") .attr("x", (width - (margin.right - margin.left)) / 2.2) .attr("y", height - margin.bottom ) .style("text-anchor", "middle"); //.text(`Probablity (95%CI): ${prob.toFixed(1)}% (${prob_ci_low.toFixed(1)}% to ${prob_ci_high.toFixed(1)}%)`); return svg.node(); }42:T406,data = get_data(age_select) // data = [ // { // label:diseases[0], // count:Math.round(200*percent(age_select)[0]),//predict(bf,betas(modelData)) // colour:'#FF9999' // },{ // label:diseases[1], // count:Math.round(200*percent(age_select)[1]), // colour:'#FFCC99' // },{ // label:diseases[2], // count:Math.round(200*percent(age_select)[2]), // colour:'#FFFF99'} // // },{ // // label:'disease 4', // // count:Math.round(200*percent(age_select)[3]), // // colour:'#CCFF99' // // }, // // { // // label:'disease 5', // // count:Math.round(200*percent(age_select)[4]), // // colour:'#99FF99' // // }, // // { // // label:'disease 6', // // count:Math.round(200*percent(age_select)[5]), // // colour:'#99FFCC' // // }, // // { // // label:'disease 7', // // count:Math.round(200*percent(age_select)[6]), // // colour:'#99FFFF' // // }, // // { // // label:'disease 8', // // count:Math.round(200*percent(age_select)[7]), // // colour:'#99CCFF' // // } // ] 43:[] 3a:{"id":"bc3c65a0cf8632c3","slug":"final-xploration/2","title":"Final Xploration1","thumbnail":"8f06476c0b45c9e2f03b90d78794157f97ea4290ec487a869bf70af4f7466ba5","access_level":"public","create_time":"$D2018-12-02T03:20:06.996Z","update_time":"$D2018-12-02T03:55:07.911Z","view_time":null,"first_public_time":"$D2018-12-02T03:40:47.700Z","has_unpublished_edits":null,"fork":{"id":"494ec3c4aac80069","slug":"canadian-ct-rule","title":"Final Xploration","owner":{"id":"c1a481971a15d5ec","login":"christinaaaa","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","bio":"","followed_by_you":false,"follows_you":false},"version":1173,"publish_version":1173,"role":null,"authored":false,"authors":[{"type":"individual","id":"86d1dd69b8078fd0","login":"janewukk","name":"Junyue Wu","avatar_url":"https://avatars-next.observableusercontent.com/fde1335d2a4994120d468aa16ed59addbb13e816a1e0c03d4cd22caaff79fe03","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Xploration1","cells":[{"id":0,"value":"md`# Final Xploration1\nthis is our final project`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"viewof age_select_p = {\n const phrases_p = [\n '< 1', '1-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80-84', '85+'\n ];\n\n return slider({\n value: 0, min: 0, max: 18, step: 1,title: \"Age Group\",\n display: v => phrases_p[v]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"viewof age_select = {\n const phrases = [\n \"< 1\",\n \"1-9\",\n \"10-19\",\n \"20-24\",\n \"25-34\",\n \"35-44\",\n \"45-54\",\n \"55-64\",\n \"65-74\",\n \"75-84\",\n \"85+\",\n ];\n //age_select_p\n return slider({\n value: (age_select_p+1)/2, min: 0, max: 10, step: 1,title: \"Age Group\",\n display: v => phrases[v]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"key = {\n const svg = d3.select(DOM.svg(width, 250));\n \n svg.append('g')\n .attr('transform',`translate(${margin.left+24},${margin.top+20})`)\n .selectAll('g.key-element')\n .data(data)\n .enter()\n .append('g')\n .attr('transform',(d,i)=>`translate(0,${(i*30)})`)\n .attr('class','key-element')\n .call((parent) => {\n parent.append('circle')\n .attr('r', pointRadius)\n .attr('cx', -pointRadius*2)\n .attr('cy', -pointRadius)\t\n .attr('fill', d => d.colour)\n\n parent.append('text')\n .style(\"font\", \"14px sans-serif\")\n .attr('dx', 0)\n .attr('dy', -6) \n .text(d => d.label);\n })\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`#### Model data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"dataAll = d3.csv(\"https://raw.githubusercontent.com/janewukk/data/master/data6.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`#### Required elements/imported functions`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md` Icon array from Tom Pearson at https://github.com/tomgp/d3-iconarray`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"iconArray = require('d3-iconarray')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"layout = iconArray.layout()\n\t.width(gridWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"pointRadius = 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"gridWidth=20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"arrayScale = d3.scaleLinear()\n\t.domain([ 0, gridWidth ])\n\t.range([0, width-(margin.left+margin.right)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":" \ndiseases = [\"Heart Disease\",\"Mal Neoplasms\",\"Cerebrovas Dis\",\"AIDS\",\"Pneumonia\",\"CLRD\",\"Diabetes Mellitus\",\"Accidents\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"ageGroup = [\"< 1\",\"1-9\",\"10-19\",\"20-24\",\"25-34\",\"35-44\",\"45-54\",\"55-64\",\"65-74\",\"75-84\",\"85+\"]\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"percent = function(a){\n var m = diseases.length\n var n = ageGroup.length\n //console.log(age_select)\n\n var temp = []\n var total = 0\n \n for(var i =0; i < m;++i)\n {\n total = total+parseInt(dataAll[a][diseases[i]])\n }\n for(var i =0; i < m;++i)\n {\n //console.log(total, parseInt(dataAll[age_index][diseases[i]]))\n temp[i] = parseInt(dataAll[a][diseases[i]])/total//death()\n }\n\n//console.log(temp)\nreturn temp}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"color = ['#FF6666','#FFB266','#FFFF66','#B2FF66','#66FF66','#66FFB2','#66FFFF','#66B2FF','#6666FF','#B266FF','#FF66FF','#FF66B2','#C0C0C0']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"get_data = function(a){ //a: selected age group \n var dataInput = []\n var sum_select = 0\n for (var i = 0; i < diseases.length-1; ++i){\n var temp = {\n label:diseases[i],\n \t\tcount:Math.round(200*percent(a)[i]),//predict(bf,betas(modelData))\n \t\tcolour:color[i]\n }\n dataInput.push(temp)\n sum_select = sum_select + Math.round(200*percent(a)[i])\n }\n var temp = {\n label:diseases[diseases.length-1],\n \t\tcount:(200-sum_select),//predict(bf,betas(modelData))\n \t\tcolour:color[diseases.length-1]\n }\n dataInput.push(temp)\n return dataInput\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"dataArray = data.reduce(function(value, d){\n\t for(var i=0;i Math.max(parseInt(d.Female), parseInt(d.Male)))])\n .range([width_p / 2, margin_p.left])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"xF = d3.scaleLinear()\n .domain(xM.domain())\n .range([width_p / 2, width_p - margin_p.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"y = d3.scaleBand()\n .domain(data_population.map(d => d.Age))\n .range([height_p - margin_p.bottom, margin_p.top])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height_p - margin_p.bottom})`)\n .call(g => g.append(\"g\").call(d3.axisBottom(xM).ticks(width_p / 80, \"s\")))\n .call(g => g.append(\"g\").call(d3.axisBottom(xF).ticks(width_p / 80, \"s\")))\n .call(g => g.selectAll(\".domain\").remove())\n .call(g => g.selectAll(\".tick:first-of-type\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${xM(0)},0)`)\n .call(d3.axisRight(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick text\").attr(\"fill\", \"white\").style(\"font\",\"14px sans-serif\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"width_p = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"height_p = data_population.length * 25 + margin_p.top + margin_p.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"margin_p = ({top: 50, right: 0, bottom: 20, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":" import {checkbox} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":" import {button} from \"@jashkenas/inputs\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1"}} 35:null