2c:null 2d:["$","title",null,{"children":"Project 2 | Dylan Rodriquez | Observable"}] 32:T43e,md`For each of the variables to be represented, the table below summarizes the appropriate marks and channels. | Variable | Marks | Channels | |--------------------------|----------------|----------| | GDP Per Capita | Point | Position | | Life expectancy at birth | Point | Position | | Population | Spatial Region | | | Birth rate | | Color | Birth rate is defined as the number of births per 1000 persons per year; GDP per capita is defined as the GDP divided by the population of the respective country. X and y axes are bound to logarithmic and linear scales, respectively. min and max populations are a factor of 16,000 difference. Maintaining a ratio of this factor preserves the area invariant. As the radii are proportional to area with respect to the square root of a constant factor of ${tex`\frac{1}{\pi}`}: ${tex` r^2*\pi = A\\ r^2 = \frac{A}{\pi}\\ r = \sqrt{\frac{A}{\pi}} `} the square root of each value in the domain is mapped to the range of radii. `33:T6b1,viewof selection = { const svg = d3.select(DOM.svg(width, height)) // add the legend //A color scale //add the axis svg.append("g") .call(xaxis) .select(".domain").remove() svg.append("g") .call(yaxis) .select(".domain").remove() const color = d3.scaleSequential(d3.interpolateBlues); const x = d3.scaleLinear() .domain(color.domain()) .rangeRound([0, 260]); const legend = svg.append("g") .style("font-size", "0.8rem") .attr("transform", "translate(100,60)"); const scale = legend.append("g") console.log(d3.extent(data.birthrate)) scale.selectAll("rect") .data(d3.range(0,1, 0.01)) .enter().append("rect") .attr("height", 10) .attr("x", d => x(d)) .attr("width", (260 / 100) * 1.25) .attr("fill", d => color(d)); const label = legend.append("text") .attr("y", -8) .attr("font-weight", "bold") .text("Birth Rate"); scale.call( d3.axisBottom(x) .tickSize(15) .tickValues([0, 0.25 ,0.5, 0.75,1]) .tickFormat(v => v*47) ) .select(".domain") .remove(); // add the graph group const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.0) .attr("opacity", 1) .selectAll("g") .data(data) .enter().append("circle") .attr("cx", function(d){return data.xscale(+d.gdp.slice(2, -1).replace(/,/g,""))}) .attr("cy",function(d){return data.yscale(+d.life)}) .attr("r", function(d){return data.rscale(+d.population)}) .attr("fill", function(d){return data.color(+d.birthrate)}) .attr("opacity", 0.8) return svg.node() }34:Tf1b,twoByTwoslections = html`

Graph 1

Graph 2

Graph 3

Graph 4

Independent

Dependent

Area

Color

` 35:T468,function task3(generatorx, generatory){ const svg = d3.select(DOM.svg(width, height+20)) // add the legend //A color scale //add the axis for(var i = 1; i<=4; i++){ var sttrans= strTranslate(generatorx[i-1]) callxscalemulti(svg.append("g"), i, sttrans) } for(var i = 1; i<=4; i++){ var sttrany= strTranslate(generatory[i-1]) callyscalemulti(svg.append("g"), i, sttrany) } var t1 = addcircles(svg,strTranslate(generatorx[0]), strTranslate(generatory[0]), strTranslate(a1), strTranslate(c1) ,1) var t2 = addcircles(svg,strTranslate(generatorx[1]), strTranslate(generatory[1]), strTranslate(a2), strTranslate(c2), 2) var t3 = addcircles(svg,strTranslate(generatorx[2]), strTranslate(generatory[2]), strTranslate(a3), strTranslate(c3), 3) var t4 = addcircles(svg,strTranslate(generatorx[3]), strTranslate(generatory[3]), strTranslate(a4), strTranslate(c4),4) return svg.node() }36:T482,function addcircles(g,tranx, trany, rscale, col,i){ function show(s){ return Generators.input(s) } var div = g.append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("text-align", "center") .style("width", "60px") .style("height", "28px") g.append("g") .property("value", []) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.0) .attr("opacity", 1) .selectAll("g") .data(data) .enter() .append("circle") .attr("cx", function(d){ return makexscalemulti(tranx,i) (selectparser(d,tranx)) }) .attr("cy", (function (d) { return makeyscalemulti(trany,i) (selectparser(d,trany)) })) .attr("r", function(d){ return makerscale(rscale) (selectparser(d,rscale))*scaling[i-1] }) .attr("fill", function(d){ return makecolorscale(col)(selectparser(d,col)) }) .attr("opacity", 0.8) .append("title") .text(d => `${d.country}\n${tranx}: ${d[tranx]}\n${trany}: ${d[trany]}`) }37:T458,data = { const facts = await d3.csv("https://raw.githubusercontent.com/dmrodriqu/datasets/master/factbook.csv"); const dta = facts.map(({Country: country, Population: population, ["Birth rate"]: birthrate, [" GDP per capita "]: gdp, ["Life expectancy at birth"]: life}) => ({country, population, birthrate, gdp, life})); dta.gdp = dta.map(function(d){return +d.gdp.slice(2, -1).replace(/,/g,"")}) dta.life = dta.map(function(d){return +d.life}) dta.birthrate = dta.map(function(d){return +d.birthrate}) dta.pop = dta.map(function(d){return +d.population}) dta.country = dta.map(function(d){return d.country}) dta.xscale = d3.scaleLog() .domain(d3.extent(dta.gdp)) .range([margin.left, width - margin.right]) dta.yscale = d3.scaleLinear() .domain(d3.extent(dta.life)) .range([height - margin.bottom, margin.top]) dta.rscale = d3.scaleSqrt() .domain(d3.extent(dta.pop)).range([2,32]) dta.color = d3.scaleSequential(d3.interpolateBlues) .domain(d3.extent(dta.birthrate)) return dta; } 38:T42f,function task2(graphvars){ const svg = d3.select(DOM.svg(width, height)) // add the legend //A color scale //add the axis svg.append("g") .call(callxscale) .select(".domain").remove() svg.append("g") .call(callyscale) .select(".domain").remove() // add the graph group const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.0) .attr("opacity", 1) .selectAll("g") .data(data) .enter().append("circle") .attr("cx", function(d){ return makexscale(graphvars[0]) (selectparser(d,graphvars[0])) }) .attr("cy", (function (d) { return makeyscale(graphvars[1]) (selectparser(d,graphvars[1])) })) .attr("r", function(d){ return makerscale(graphvars[2]) (selectparser(d,graphvars[2]))*sliderValue }) .attr("fill", function(d){ return makecolorscale((graphvars[3]))(selectparser(d,graphvars[3])) }) .attr("opacity", 0.8) return svg.node() } 39:[] 30:{"id":"6fd59518a28130af","slug":"project-2","title":"Project 2","thumbnail":"c907cdffc3ee203bf53e33262ace6f0a71907224efb7eb51731bc8aef4a166bb","access_level":"public","create_time":"$D2018-09-12T19:08:29.862Z","update_time":"$D2018-09-22T18:49:52.906Z","view_time":null,"first_public_time":"$D2018-09-22T18:49:11.036Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"9362bdeb0d976a7a","login":"dmrodriqu","name":"Dylan Rodriquez","avatar_url":"https://avatars-next.observableusercontent.com/9ca3e6912dcaecb77a48f3345da76450f31abfd2076f034acd4bbf1f31ea08df","tier":"starter_2024"},"version":4572,"publish_version":4572,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efec840322e4ffd","login":"dmrodriqu","name":"Dylan Rodriquez","avatar_url":"https://avatars-next.observableusercontent.com/9ca3e6912dcaecb77a48f3345da76450f31abfd2076f034acd4bbf1f31ea08df","tier":null}],"members":[{"type":"individual","id":"3efec840322e4ffd","login":"dmrodriqu","name":"Dylan Rodriquez","avatar_url":"https://avatars-next.observableusercontent.com/9ca3e6912dcaecb77a48f3345da76450f31abfd2076f034acd4bbf1f31ea08df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project 2","cells":[{"id":0,"value":"md`# Project 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Task 1: Bubble Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`\n## Task 2\nThe plot below appears upon selection of variables.\n\n### To view: \nselect a dependent and independent variable then two additional variables to dictate the scaling of the radii and color scale.\n\nThe slider is mapped to a square root function, and displays the scaling as a factor of the area.\n\n| Variable | Axis Function | Radius Function | Color Scale Function |\n|--------------------------|----------------|-----------------|----------------------|\n| GDP Per Capita | Log | Sqrt | Linear |\n| Life expectancy at birth | Linear | Sqrt | Linear | \n| Population | Log | Sqrt | Linear | \n| Birth rate | Linear | Sqrt | Linear | \n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"task2(graphvars)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"md`\n## Use slider to scale area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"sliderValue = Generators.input(slider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"slider = {\n const form = html``;\n const input = form.nonlinear\n input.value = transform.invert(form.value = 0.5);\n input.addEventListener(\"input\", () => form.value = transform(input.valueAsNumber));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"md`\n## Select Independent variable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"viewof independent = radiocols()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"md`\n## Select Dependent variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"viewof dependent = radiocols()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"md`\n## Select radius scaling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"viewof radius = radiocols()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"md`\n## Select fill variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"viewof fill = radiocols()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4493,"value":"md`## Task 3/4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4551,"value":"md `## Task 3\n\nThe function t3 calls two axis functions iteratively: \n\n* callxscalemulti\n* callyscalemulti\n\nFor the x axis function, an additional function call is made to \"makexscalemulti\"\n\nUpon iterating a value for callxscalemulti, the height of the graph is divided by the appropriate amount, this iterator is passed to makexscalemulti to determine the translation of the x scale, effectively dividing the SVG by height, then column.\n\nThis approach is then taken by callyscalemulti.\n\nmarks and channels are added in the top of the heirarchy in the svg, with respect to the nested scaled x and y axes.\n\nValues from the dropdown menus and scales are passed to the function generating the chart as a whole, with each mark generating function using the appropriate values in the array.\n\nBrushing incomplete\n\n## Task 4\n\nTitles are appended to the marks, allowing for hoverover\n\nSimultaneous viewing of hoverover in all four graphs is incomplete\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2764,"value":"viewof t3 = task3(independentgenerator, dependentgenerator)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3353,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4031,"value":"slidermulti = {\n const form = html`\n`;\n const input1 = form.nonlinear1\n const input2 = form.nonlinear2\n const input3 = form.nonlinear3\n const input4 = form.nonlinear4\n\n form.oninput = () => form.value = [\n form.nonlinear1.valueAsNumber, \n form.nonlinear2.valueAsNumber, \n form.nonlinear3.valueAsNumber, \n form.nonlinear4.valueAsNumber, \n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4061,"value":"scaling = [graph1scale, graph2scale, graph3scale,graph4scale]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4033,"value":"graph1scale = Generators.input(slidermulti[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"graph2scale = Generators.input(slidermulti[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4056,"value":"graph3scale = Generators.input(slidermulti[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4059,"value":"graph4scale = Generators.input(slidermulti[3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2758,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4102,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3656,"value":"function strTranslate(instring){\n if(instring == \"Population\"){\n return \"population\"\n }else if(instring == \"Per Capita GDP\"){\n return \"gdp\"\n }else if(instring == \"Life Expectancy at Birth\"){\n return \"life\"\n }else if(instring == \"Birthrate\"){\n return \"birthrate\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2803,"value":"function callyscalemulti(g,i, yvars){\n const unit = width/2\n if(i < 3){\n return g.attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(makeyscalemulti(yvars, i)).ticks(null, \" \"))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0))\n\n }else if(i >= 3){\n return g.attr(\"transform\", `translate(${margin.left+unit},0)`)\n .call(d3.axisLeft(makeyscalemulti(yvars, i)).ticks(null, \" \"))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0))\n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2965,"value":"function yscalemulti (dataval,i){\n const unit = height/2\n const bot = height-unit-margin.bottom \n const top = height-(height/1)+margin.top\n var move = 1\n if (i>2){\n move = 3\n }else{\n move = 1\n }\n return d3.scaleLog().domain(d3.extent(dataval))\n .range([bot+((i-move)*unit), top+((i-move)*unit)])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"function callxscalemulti(g,i,xvars){\n if(i <3){\n return g.attr(\"transform\", `translate(0,${height/(3-i) - margin.bottom})`)\n .attr(\"opacity\" , 1)\n .call(d3.axisBottom(makexscalemulti(xvars, i))\n .ticks(null, \"\"))\n\n }else if(i >= 3){\n return g.attr(\"transform\", `translate(0,${height/(5-i) - margin.bottom})`)\n .attr(\"opacity\" , 1)\n .call(d3.axisBottom(makexscalemulti(xvars, i))\n .ticks(null, \"\") )\n\n }\n /*\n for(var mid = 3; mid <= 5; mid +=2){\n return g.attr(\"transform\", `translate(0,${height/(mid-i) - margin.bottom})`)\n .attr(\"opacity\" , 1)\n .call(d3.axisBottom(makexscalemulti(xvars, i))\n .ticks(null, \"\"))\n */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2902,"value":"function xscalemulti (dataval, i){\n var scales = d3.scaleLog()\n if(i<3){\n scales.domain(d3.extent(dataval))\n .range([margin.left, width/2 - margin.right])\n return scales\n }else if(i>=3){\n scales.domain(d3.extent(dataval))\n .range([width/2 + margin.right, width-margin.right])\n return scales\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2909,"value":"function makexscalemulti(compval,i){\n if(compval == \"gdp\"){\n return xscalemulti(data.gdp,i)\n }else if(compval == \"life\"){\n return xscalemulti(data.life,i)\n }else if(compval == \"population\"){\n return xscalemulti(data.pop,i)\n }else if(compval == \"birthrate\"){\n return xscalemulti(data.birthrate,i)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2469,"value":"md`### parsing functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2225,"value":"function selectparser(d, compval){\n if(compval==\"gdp\"){\n return parsegdp(d)\n }else if (compval== \"life\"){\n return +d.life\n }else if (compval == \"population\"){\n return +d.population\n }else if (compval == \"birthrate\"){\n return +d.birthrate\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2155,"value":"function parsegdp(dat){\n return +dat.gdp.slice(2, -1).replace(/,/g,\"\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2471,"value":"md`### scaling and scale callback functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3509,"value":"g1d = Generators.input(twoByTwoslections.g1d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3734,"value":"g2d = Generators.input(twoByTwoslections.g2d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3736,"value":"g3d = Generators.input(twoByTwoslections.g3d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3739,"value":"g4d = Generators.input(twoByTwoslections.g4d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3741,"value":"g1i = Generators.input(twoByTwoslections.g1i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3743,"value":"g2i = Generators.input(twoByTwoslections.g2i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3627,"value":"g3i = Generators.input(twoByTwoslections.g3i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3748,"value":"g4i = Generators.input(twoByTwoslections.g4i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4150,"value":"a1 = Generators.input(twoByTwoslections.a1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4152,"value":"a2 = Generators.input(twoByTwoslections.a2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4154,"value":"a3 = Generators.input(twoByTwoslections.a3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4156,"value":"a4 = Generators.input(twoByTwoslections.a4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4419,"value":"c1 = Generators.input(twoByTwoslections.c1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4421,"value":"c2 = Generators.input(twoByTwoslections.c2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4423,"value":"c3 = Generators.input(twoByTwoslections.c3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4425,"value":"c4 = Generators.input(twoByTwoslections.c4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3758,"value":"dependentgenerator = [g1d, g2d, g3d, g4d]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3752,"value":"independentgenerator = [g1i, g2i, g3i, g4i]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"graphvars = [independent,\n dependent,\n radius, \n fill]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"function makexscale(compval){\n if(compval == \"gdp\"){\n return xscale(data.gdp)\n }else if(compval == \"life\"){\n return xlinscale(data.life)\n }else if(compval == \"population\"){\n return xscale(data.pop)\n }else if(compval == \"birthrate\"){\n return xlinscale(data.birthrate)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"function makerscale(compval){\n if(compval == \"gdp\"){\n return rscale(data.gdp)\n }else if(compval == \"life\"){\n return rscale(data.life)\n }else if(compval == \"population\"){\n return rscale(data.pop)\n }else if(compval == \"birthrate\"){\n return rscale(data.birthrate)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2201,"value":"function makeyscale(compval){\n if(compval == \"gdp\"){\n return ylogscale(data.gdp)\n }else if(compval == \"life\"){\n return yscale(data.life)\n }else if(compval == \"population\"){\n return ylogscale(data.pop)\n }else if(compval == \"birthrate\"){\n return yscale(data.birthrate)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2337,"value":"function colorscale(cval, linlog){\n if (linlog == \"lin\"){\n var scales = d3.scaleSequential(d3.interpolateBlues)\n }\n scales.domain(d3.extent(cval)) \n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2341,"value":"function makecolorscale(compval){\n if(compval == \"gdp\"){\n return colorscale(data.gdp, \"lin\")\n }else if(compval == \"life\"){\n return colorscale(data.life, \"lin\")\n }else if(compval == \"population\"){\n return colorscale(data.pop, \"lin\")\n }else if(compval == \"birthrate\"){\n return colorscale(data.birthrate, \"lin\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"function radiocols(){\n var ar = [];\n const dataarr = d3.entries(data[0])\n dataarr.forEach(function (d) {ar.push(d.key)})\n return radio(ar)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"function xscale (dataval){\n var scales = d3.scaleLog()\n .domain(d3.extent(dataval))\n .range([margin.left, width - margin.right])\n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2327,"value":"function xlinscale (dataval){\n var scales = d3.scaleLinear()\n .domain(d3.extent(dataval))\n .range([margin.left, width - margin.right])\n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"function yscale (dataval){\n var scales = d3.scaleLinear()\n .domain(d3.extent(dataval))\n .range([height - margin.bottom, margin.top])\n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2330,"value":"function ylogscale (dataval){\n var scales = d3.scaleLog()\n .domain(d3.extent(dataval))\n .range([height - margin.bottom, margin.top])\n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"function rscale (dataval){\n var scales = d3.scaleSqrt()\n .domain(d3.extent(dataval)).range([2,32])\n return scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2515,"value":"md`### data aquisition and formatting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3411,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3355,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"height = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2545,"value":"md`### axis functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"yaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(data.yscale).ticks(null, \" \"))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"xaxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"opacity\" , 1)\n .call(d3.axisBottom(data.xscale)\n .ticks(null, \"$\") )\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2422,"value":"callxscale = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"opacity\" , 1)\n .call(d3.axisBottom(makexscale(graphvars[0]))\n .ticks(null, \"\") )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2961,"value":"function makeyscalemulti(compval, i){\n if(compval == \"gdp\"){\n return yscalemulti(data.gdp, i)\n }else if(compval == \"life\"){\n return yscalemulti(data.life, i)\n }else if(compval == \"population\"){\n return yscalemulti(data.pop, i)\n }else if(compval == \"birthrate\"){\n return yscalemulti(data.birthrate, i)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2428,"value":"callyscale = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(makeyscale(graphvars[1]))\n .ticks(null, \" \"))\n .call(g => g.selectAll(\".tick line\")\n .clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"transform = {\n const transform = x => x * x; // from nonlinear to linear\n transform.invert = x => Math.sqrt(x); // from linear to nonlinear\n return transform;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2506,"value":"md`### main tasks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"