34:["$","title",null,{"children":"D3 Review, Generators, and Layouts (filled in) | Ethan K | Observable"}] 3c:Ta6a,{ const data = [ { os: "Android", share: 82.8 }, { os: "iOS", share: 13.9 }, { os: "Win", share: 2.6 }, { os: "BB", share: 2.6 }, { os: "", share: 0.3 } ]; const width = 400; const height = 400; const radius = Math.min(width, height) / 2 - 10; const svg = d3.create("svg").attr("width", width).attr("height", height); const group = svg .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // A color scale for each of the slices const color = d3 .scaleOrdinal() .range(["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9"]); // This creates a pie layout generator. // It computes the angles to draw a pie chart. // The .value function tells the generator which attribute to use for the layout. const pie = d3.pie().value((d) => d.share); // You can customize the generator further.. // After you get it working, try to change some of the pie's properties. pie.padAngle(padAngle); // pie.startAngle(-Math.PI/2) // pie.endAngle(Math.PI/2); // Now that we've set up our generator, let's give it our data. const pieData = pie(data); // Take a look at the pieData that we'll use to draw the pie chart. // d3 has computed the necessary info that we can pass to d3.arc() // See the results of this cell: they have info like startAngle and endAngle // return pieData; // To draw the slices, we need an arc generator. const arc = d3.arc().outerRadius(radius).innerRadius(innerRadius); // Let's ftest the arc generator, by giving it the first pie slice: // return arc(pieData[0]); // With the pie data generator, and the arc path generator, we're // finally ready to start drawing! // We'll want a path and a text label for each slice, so first, we'll // create a group element: const groups = group.selectAll("g").data(pieData).join("g"); // Add the path, and use the arc generator to convert the pie data to // an SVG shape. // groups .append("path") .attr("d", arc) .style("fill", (d) => color(d.data.os)); // While we're at it, let's set the color of the slice using our color scale // Now let's add a label groups .append("text") .text((d) => d.data.os) // We need to move the label to the middle of the slice. Our arc generator // is smart enough to know how to do this. Notice that arc.centroid gives us the center of the visible wedge. .attr("transform", (d) => "translate(" + arc.centroid(d) + ")") .attr("dy", ".35em") // Finally some extra text styling to make it look nice: .style("text-anchor", "middle") .style("font-size", "10px"); return svg.node(); }3d:T885,{ // Note: this code currently draws all of the circles on top of each other. // Fill in the spots below to apply a force-directed layout to the code. const width = 600; const height = 600; const svg = d3.create("svg").attr("width", width).attr("height", height); // Filter a bit the data -> more than 1 million inhabitants const data = populations.filter((d) => d.value > 10000000); // Color palette for continents. const color = d3 .scaleOrdinal() .domain(["Asia", "Europe", "Africa", "Oceania", "Americas"]) .range(d3.schemeSet1); // Size scale for countries const size = d3.scaleLinear().domain([0, 1400000000]).range([7, 100]); // circle will be between 7 and 100 px wide // Initialize the circle: all located at the center of the svg area const nodes = svg .append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("r", (d) => size(d.value)) .attr("cx", width / 2) .attr("cy", height / 2) .attr("stroke", "black") .style("stroke-width", 1) .style("fill", (d) => color(d.region)) .style("fill-opacity", 0.8); // Write code here to create a d3 simulation that can compute the layout of the circles. // A good starting place is this example: // https://d3-graph-gallery.com/graph/circularpacking_template.html const simulation = d3 .forceSimulation() .force( "center", d3 .forceCenter() .x(width / 2) .y(height / 2) ) // Attraction to the center of the svg area .force("charge", d3.forceManyBody().strength(0.1)) // Nodes are attracted one each other of value is > 0 .force( "collide", d3 .forceCollide() .strength(0.2) .radius((d) => size(d.value) + 3) .iterations(1) ) .nodes(data); // Force that avoids circle overlapping // After you create a simulation object, uncomment this block of code will // update the position of nodes on every simulation update: simulation.on("tick", () => { nodes .attr("cx", (d) => { return d.x; }) .attr("cy", (d) => { return d.y; }); }); return svg.node(); }3e:[{"id":"c091b85cbc5c740863b2208cd9b62ec9fa0d839388bfe8b8ab30993753aa66e11971052df9c3e002ef8853f2cb8758f0cb69ebdfbfb14f6140348a9633eba1f7","href":"https://static.observableusercontent.com/files/c091b85cbc5c740863b2208cd9b62ec9fa0d839388bfe8b8ab30993753aa66e11971052df9c3e002ef8853f2cb8758f0cb69ebdfbfb14f6140348a9633eba1f7","name":"image@4.png","type":"image/png","lastModified":1665693858994.746,"size":80067},{"id":"827403fea9b21a55992157a795ecd9ea3039702e102e0556b13375189ad543374bf21d025c5b46919a890d121682e24c9e03655d032ea36646d081d5e22eb242","href":"https://static.observableusercontent.com/files/827403fea9b21a55992157a795ecd9ea3039702e102e0556b13375189ad543374bf21d025c5b46919a890d121682e24c9e03655d032ea36646d081d5e22eb242","name":"image@5.png","type":"image/png","lastModified":1665693858994.746,"size":150922},{"id":"bcf8ae471716691ec40bdfdc443a147d0fe61c33674eae441082d6e9766f9c5bcdbe37b76424873bbea94b800472c8863d6ba18d8026ae673756777598e25763","href":"https://static.observableusercontent.com/files/bcf8ae471716691ec40bdfdc443a147d0fe61c33674eae441082d6e9766f9c5bcdbe37b76424873bbea94b800472c8863d6ba18d8026ae673756777598e25763","name":"population.csv","type":"text/csv","lastModified":1665693858994.746,"size":11383}] 38:{"id":"fb91eae475ac335c","slug":"d3-review-generators-and-layouts-filled-in","title":"D3 Review, Generators, and Layouts (filled in)","thumbnail":"31a701baa5f0460c8d0653f604cf46de310138906a3acb4aff2be2df5e32d04f","access_level":"public","create_time":"$D2022-10-13T20:44:18.994Z","update_time":"$D2022-10-13T20:44:27.268Z","view_time":null,"first_public_time":"$D2022-10-13T20:44:42.752Z","has_unpublished_edits":null,"fork":{"id":"96871d214b15bb43","slug":"d3-review-generators-and-layouts","title":"D3 Review, Generators, and Layouts","owner":{"id":"e6524ee95f0d6383","login":"kerzner","name":"Ethan K"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e6524ee95f0d6383","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":443,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"57dee57289581a9b","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"57dee57289581a9b","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Review, Generators, and Layouts (filled in)","cells":[{"id":0,"value":"# D3 Review, Generators, and Layouts (filled in)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"**Q1: Fill in the JavaScript below to draw lines. **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"{\n const segments = [\n { x1: 5, y1: 5, x2: 5, y2: 95 }, // create an svg \"line\" for each entry in this array\n { x1: 45, y1: 5, x2: 45, y2: 95 },\n { x1: 5, y1: 50, x2: 45, y2: 50 },\n { x1: 55, y1: 5, x2: 95, y2: 5 },\n { x1: 55, y1: 95, x2: 95, y2: 95 },\n { x1: 75, y1: 5, x2: 75, y2: 95 }\n ];\n\n const svg = d3.create(\"svg\").attr(\"width\", 400).attr(\"height\", 100);\n\n svg\n .selectAll(\"line\") // select the thing you're going to apply new data to\n .data(segments)\n .join(\"line\")\n .attr(\"x1\", (d) => d.x1)\n .attr(\"x2\", (d) => d.x2)\n .attr(\"y1\", (d) => d.y1)\n .attr(\"y2\", (d) => d.y2)\n .attr(\"stroke\", \"black\");\n\n // write your javascript here.\n // you should use exactly one .join() to draw the segments\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"**Q2: Fill in the JavaScript below to draw a path like this.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", 400).attr(\"height\", 100);\n const group = svg.append(\"g\").attr(\"transform\", \"translate(50, 50)\");\n\n const data = [\n { x: 0, y: 10 },\n { x: 50, y: 30 },\n { x: 100, y: 10 },\n { x: 150, y: -30 },\n { x: 200, y: 10 }\n ];\n\n // create a line generator that can understand our data\n const lineGenerator = d3\n .line()\n .x((d) => d.x)\n .y((d) => -d.y);\n\n // create a path using that line generator\n group\n .append(\"path\")\n .datum(data)\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\")\n .attr(\"d\", lineGenerator);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"** Q3 Layouts and Shape Generators **\nIn the exercise below, you'll get to play with d3 layouts and generators. \n- Draw a pie chart using the code below. There are a few places where you'll have to change the code to get a pie drawn.\n- Add a cell that uses an Observable input to control the inner radius of the layout. (I've put a screenshot of this below)\n- Add an additional input elements to control another part of the layout, such as the startAngle, endAngle, or anything else.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"

\n $\"image@4.png\"$ \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"viewof innerRadius = Inputs.range([0, 200], { label: \"Inner radius\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"viewof padAngle = Inputs.range([0, 1], { value: 0, label: \"Padding\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"** Q4 Force Layouts ** In this question, you'll use a force-layout to position circles that represent countries. See the comments in the code to get started. Your goal will be to create a chart like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"\n

\n $\"image@5.png\"$ \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"// Load the populations data\npopulations = FileAttachment(\"population.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"** Q5 - Use good encodings ** In what ways is the chart from Q6 potentially misleading? How might you address this?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null