2d:null 2e:["$","title",null,{"children":"Data Visualization_Week 04 | Yonghak Kim | Observable"}] 33:Tccc,{ const width = 900; const height = 900; const margin = 100; const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#0E1721"); //grid const gridX = d3 .scaleLinear() .domain([0,10]) .range([margin, width-margin]); const gridY = d3 .scaleLinear() .domain([0,10]) .range([margin, height-margin]); for (let i=0 ; i<11 ; i++) { svg .append("line") .attr("x1", margin) .attr("y1", gridY(i)) .attr("x2", width - margin) .attr("y2", gridY(i)) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .attr("oppacity" , 0.5); svg .append("line") .attr("x1", gridX(i)) .attr("y1", margin) .attr("x2", gridX(i)) .attr("y2", height-margin) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .attr("oppacity" , 0.5); } const frenchToX = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.french)) .range([margin, width-margin]); const spanishToY = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.spanish)) .range([height-margin , margin]); const colorParameter = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.french)) .range([0,1]); for (let i = 0 ; i < alphabeticalStates.length ; i++) { svg .append("circle") .attr("cx", frenchToX(alphabeticalStates[i].french)) .attr("cy", spanishToY(alphabeticalStates[i].spanish)) .attr("r", 3) .attr( "fill", // "white" d3.interpolateViridis( colorParameter(alphabeticalStates[i].french) ) ) .attr("stroke" , "white") .attr("stroke-width" , .5); svg .append("text") .attr("x",frenchToX(alphabeticalStates[i].french)+10) .attr("y",spanishToY(alphabeticalStates[i].spanish)+4) .attr("font-size", 10) .attr("fill" , "white") .attr("text-anchor", "start") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text(alphabeticalStates[i].name); svg .append("text") .attr("x", width/2) .attr("y", margin/2) .attr("font-size", 18) .attr("fill" , "white") .attr("text-anchor", "middle") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ Population that speak French compared to Spanish"); svg .append("text") .attr("x", margin/2) .attr("y", margin) .attr("font-size", 14) .attr("fill" , "white") .attr("text-anchor", "end") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ French-Speaking People") .attr("transform" , "rotate(-90 "+ margin/2 +","+ margin +")"); svg .append("text") .attr("x", width-margin) .attr("y", height-margin/2) .attr("font-size", 14) .attr("fill" , "white") .attr("text-anchor", "end") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ Spanish-Speaking People"); } return svg.node(); }34:Td18,{ const width = 900; const height = 900; const margin = 100; const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#0E1721"); //grid const gridX = d3 .scaleLinear() .domain([0,10]) .range([margin, width-margin]); const gridY = d3 .scaleLinear() .domain([0,10]) .range([margin, height-margin]); for (let i=0 ; i<11 ; i++) { svg .append("line") .attr("x1", margin) .attr("y1", gridY(i)) .attr("x2", width - margin) .attr("y2", gridY(i)) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .attr("oppacity" , 0.5); svg .append("line") .attr("x1", gridX(i)) .attr("y1", margin) .attr("x2", gridX(i)) .attr("y2", height-margin) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .attr("oppacity" , 0.5); } const frenchPerToX = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.frenchPercent)) .range([margin, width-margin]); const spanishPerToY = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.spanishPercent)) .range([height-margin , margin]); const colorParameter = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates, (d) => d.totalPopulation)) .range([0,1]); for (let i = 0 ; i < alphabeticalStates.length ; i++) { svg .append("circle") .attr("cx", frenchPerToX(alphabeticalStates[i].frenchPercent)) .attr("cy", spanishPerToY(alphabeticalStates[i].spanishPercent)) .attr("r", 3) .attr( "fill", // "white" d3.interpolateViridis( colorParameter(alphabeticalStates[i].totalPopulation) ) ) .attr("stroke" , "white") .attr("stroke-width" , .5); svg .append("text") .attr("x",frenchPerToX(alphabeticalStates[i].frenchPercent)+10) .attr("y",spanishPerToY(alphabeticalStates[i].spanishPercent)+4) .attr("font-size", 10) .attr("fill" , "white") .attr("text-anchor", "start") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text(alphabeticalStates[i].name); svg .append("text") .attr("x", width/2) .attr("y", margin/2) .attr("font-size", 18) .attr("fill" , "white") .attr("text-anchor", "middle") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ Percentage of Population that speak French compared to Spanish"); svg .append("text") .attr("x", margin/2) .attr("y", margin) .attr("font-size", 14) .attr("fill" , "white") .attr("text-anchor", "end") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ French Percentage") .attr("transform" , "rotate(-90 "+margin/2+","+margin+")") svg .append("text") .attr("x", width-margin) .attr("y", height-margin/2) .attr("font-size", 14) .attr("fill" , "white") .attr("text-anchor", "end") .attr("alignment-baseline", "center") .attr("font-family", "courier") .text("+ Spanish Percentage"); } return svg.node(); }35:T44b,{ const width = 800; const height = 100; const svg = d3 .create("svg") .attr("viewbox", [0,0,width,height]) .attr("width", width) .attr("height", height); const exampleData = [9, 2, 7.1, 5, 0, 1, 6, 3.15, -3, 13]; const exampleScale = d3 .scaleLinear() .domain([0,10]) .range([200,600]); svg .append("line") .attr("x1", 200) .attr("y1", height/2) .attr("x2", 600) .attr("y2", height/2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); for (let i=0; i d.population)) .range([2, (width - margin * 2) / alphabeticalStates2.length]); const populationToParameter = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates2, (d)=>d.population)) .range([0,1]); for (let i=0; i d.population)) .range([margin, width-margin]); const populationToParametor = d3 .scaleLinear() .domain(d3.extent(alphabeticalStates2, (d)=>d.population)) .range([0,1]); for (let i=0 ; i d3.ascending(a.name,b.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## **Tutorial Practice**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"censusData = await d3.json(\n \"https://api.census.gov/data/2019/acs/acs1?get=NAME,B01001_001E&for=state:*\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"states = {\n const statesData = [];\n\n for (let i = 1; i < censusData.length; i++) {\n const state = censusData[i];\n statesData.push({\n name: state[0],\n population: parseInt(state[1]),\n fipsCode: state[2]\n });\n }\n return statesData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"### **Q: How can I reorganize the order of states according to the fipsCode?**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"circlePlot = {\n\n const height = 200;\n const margin = 20;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr (\"height\", height);\n\n for (let i=0; i d3.ascending(a.name, b.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"{\n const width = 800;\n const height = 100;\n \n const svg = d3\n .create(\"svg\")\n .attr(\"viewbox\", [0,0,width,height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n const exampleData = [1, 10, 100, 1000, 10000, 100000];\n\n const exampleScale = d3.scaleLog().domain([1,10000]).range([200,600]);\n\n svg\n .append(\"line\")\n .attr(\"x1\", 200)\n .attr(\"y1\", height/2)\n .attr(\"x2\", 600)\n .attr(\"y2\", height/2)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"2\");\n\n for (let i=0; i= 0.93) {\n return \"🌕\";\n } else if (moonPhase >= 0.79) {\n return \"🌖\";\n } else if (moonPhase >= 0.65){\n return \"🌗\";\n } else if (moonPhase >= 0.51){\n return \"🌘\";\n } else if (moonPhase >= 0.37){\n return \"🌑\";\n } else if (moonPhase >= 0.23){\n return \"🌒\";\n } else if (moonPhase >= 0.09){\n return \"🌓\";\n } else {\n return \"🌕\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof booleanSlider = Inputs.range([0.0,1.0],{\n label: \"Larger than .5?\",\n value: 0.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"booleanSlider > 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof distance = Inputs.range([0.0,1.0],{\n label:\"Distance to Travel\",\n value:0.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"viewof time = Inputs.range([0.0,1.0],{\n label: \"Time Available\",\n value: 0.5\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"{\n if (distance > 0.75 && time < 0.25) {\n return \"Recommended Transit Method: 🚀\"\n } else if (distance > 0.5 && time < 0.5) {\n return \"Recommended Transit Method: 🏎\"\n } else if (distance > 0.25 && time < 0.75) {\n return \"Reccomended Transit Method: 🚲\"\n } else if (distance >= 0 && time <= 1) {\n return \"Recommended Transit Method: 🛼\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"viewof graphAge = Inputs.range([0.0,100], {\n label: \"How old are you?\",\n value: 18,\n step: 1\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"{\n return graphAge < 21 ? \"🍇->🧃\" : \"🍇->🍷\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof modulo = Inputs.range([1,9],{\n label: \"9%\",\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"9 % modulo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof isItEvenOrOdd = Inputs.range([1,9],{\n label: \"Is it even or odd?\",\n step: 1,\n value: 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"isItEvenOrOdd % 2 == 0 ? \"even\" : \"odd\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"### (d)=>d ??","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"