43:["$","title",null,{"children":"Week 6: D3 Scales, Statistics, and Charts | Woo-Mi Jeong | Observable"}] 4b:T50d,{ //svg variables const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //simple data const exampleData = [9, 2, 7.1, 5, 0, 1, 6, 3.15, -3, 13]; //draw horizontal line 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"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text(exampleData[i] + "→" + exampleScale(exampleData[i])); } //show visualization in Observable return svg.node(); }4c:T4dc,{ //svg variables const height = 100; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //dataset const exampleData = [1, 10, 100, 1000, 10000, 100000]; //draw horizontal line 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"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleLogScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text(exampleData[i] + "→" + Math.round(exampleLogScale(exampleData[i]))); } //show visualization in Observable return svg.node(); }4d:T53f,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //dataset const exampleData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //draw horizontal line 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"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleFlipScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text( exampleData[i] + "→" + Math.round(exampleFlipScale(exampleData[i])) ); } //show visualization in Observable return svg.node(); }4e:T68f,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //create empty dataset const exampleData = []; //fill up random dataset for (let i = 0; i < 5; i = i + 1) { exampleData.push(Math.random() * 50); } //extract the min and the max of the dataset const exampleExtent = d3.extent(exampleData); //create scale to convert data to pixels const exampleScale = d3.scaleLinear().domain(exampleExtent).range([200, 600]); //draw horizontal line 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"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text( exampleData[i].toFixed(1) + "→" + exampleScale(exampleData[i]).toFixed(1) ); } //show visualization in Observable return svg.node(); }4f:T921,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //simple data const exampleData = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //create scale to convert data to pixels const pixelScale = d3.scaleLinear().domain([0, 10]).range([200, 600]); //create scale to convert data to number between 0 and 1 const parameterScale = d3.scaleLinear().domain([0, 10]).range([0, 1]); const scaleNames = ["viridis", "magma", "cividis"]; for (let i = 0.25; i <= 0.75; i = i + 0.25) { //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height * i) .attr("x2", 600) .attr("y2", height * i) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //draw label svg .append("text") .attr("x", 190) .attr("y", height * i) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "end") .style("alignment-baseline", "middle") .text(scaleNames[i * 4 - 1]); } //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = pixelScale(exampleData[i]); //convert data to number between 0 and 1 const parameterData = parameterScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.25) .attr("r", 10) .attr("fill", d3.interpolateViridis(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.5) .attr("r", 10) .attr("fill", d3.interpolateMagma(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.75) .attr("r", 10) .attr("fill", d3.interpolateCividis(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); } //show visualization in Observable return svg.node(); }50:[] 47:{"id":"5b0170be60be67e3","slug":"week-6-d3-scales-statistics-and-charts","title":"Week 6: D3 Scales, Statistics, and Charts","thumbnail":"3a052f9544da042fcd77ee1203b42da35b4fb231880318db09e70f5a9e4f7614","access_level":"public","create_time":"$D2024-11-24T04:43:58.260Z","update_time":"$D2024-11-24T04:55:08.605Z","view_time":null,"first_public_time":"$D2024-11-24T04:44:12.749Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"536e89b71dfea055","login":"woomi","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/31e0a5a063c4f7c40056ea87b83e7737edd99de7ce9467b98c4b12394d8c0561","tier":"starter_2024","bio":"","following":false},"version":119,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"106dcc0cf6497c8a","login":"woomijeong","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/1b631bfd87ceb9a9978eecf2c926160b7765e71f2b89cb9e83edd9366f41b23f","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"536e89b71dfea055","login":"woomi","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/31e0a5a063c4f7c40056ea87b83e7737edd99de7ce9467b98c4b12394d8c0561","tier":"starter_2024","role":"editor"},{"type":"individual","id":"106dcc0cf6497c8a","login":"woomijeong","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/1b631bfd87ceb9a9978eecf2c926160b7765e71f2b89cb9e83edd9366f41b23f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 6: D3 Scales, Statistics, and Charts","cells":[{"id":0,"value":"# Week 6: D3 Scales, Statistics, and Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"exampleScale = d3.scaleLinear().domain([0, 10]).range([200, 600])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"exampleScale(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"latScale = d3.scaleLinear().domain([-90, 90]).range([300, 900]).clamp()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"exampleLogScale = d3\n .scalePow()\n .exponent(0.01)\n .domain([1, 10000])\n .range([200, 600])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"exampleFlipScale = d3.scaleLinear().domain([0, 10]).range([600, 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3.extent([20, 103, 13, 4, 40, 13, 12, 193])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"colors = [\n { waveLength: 425, color: \"Indigo\" },\n { waveLength: 630, color: \"Orange\" },\n { waveLength: 470, color: \"Blue\" },\n { waveLength: 600, color: \"Yellow\" },\n { waveLength: 400, color: \"Violet\" },\n { waveLength: 665, color: \"Red\" },\n { waveLength: 550, color: \"Green\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"MinAndMax = d3.extent(colors, (c) => c.waveLength)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n const min = d3.min(colors, (c) => c.waveLength);\n const max = d3.max(colors, (c) => c.waveLength);\n const mean = d3.mean(colors, (c) => c.waveLength);\n const median = d3.median(colors, (c) => c.waveLength);\n const extent = d3.extent(colors, (c) => c.waveLength);\n\n return {\n minimum: min,\n maximum: max,\n average: mean,\n median: median,\n extent: extent,\n data: colors\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"{\n const parameterScale = d3.scaleLinear().domain([0, 10]).range([0, 1]);\n\n return d3.interpolateViridis(parameterScale(5));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof moonPhase = Inputs.range([0.0, 1.0], {\n label: \"Moon Phase\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"{\n if (moonPhase >= 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof booleanSlider = Inputs.range([0.0, 1.0], {\n label: \"Larger than .5?\",\n value: 0.5,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"booleanSlider > 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof distance = Inputs.range([0.0, 1.0], {\n label: \"Distance to Travel\",\n value: 0.5,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof time = Inputs.range([0.0, 1.0], {\n label: \"Time Available\",\n value: 0.5,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"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 \"Recommended 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof grapeAge = Inputs.range([0.0, 100], {\n label: \"How old are you?\",\n value: 18\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"grapeAge < 21 ? \"🍇->🧃\" : \"🍇->🍷\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof modulo = Inputs.range([1, 9], { label: \"9 %\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"9 % modulo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"isItEvenOrOdd % 2 == 0 ? \"Even\" : \"Odd\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"-----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"//B01001_001E is Total Population\n//B16001_105E is Arabic speaking population\n//B16001_003E is Spanish speaking populations\n\nlanguageData = await d3.json(\n \"https://api.census.gov/data/2023/acs/acs1?get=NAME,B01001_001E,B16001_105E,B16001_003E&for=state:*\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"languageStates = {\n const data = [];\n\n for (let i = 1; i < languageData.length; i++) {\n const state = languageData[i];\n data.push({\n name: state[0],\n totalPopulation: parseInt(state[1]),\n arabic: state[3] == null ? 0 : parseInt(state[2]),\n arabicPercent: state[3] == null ? 0 : parseInt(state[2]) / state[1],\n spanish: state[3] == null ? 0 : parseInt(state[3]),\n spanishPercent: state[3] == null ? 0 : parseInt(state[3]) / state[1],\n fipsCode: state[4]\n });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 42:null