45:["$","title",null,{"children":"D3 Review, Generators, and Layouts | Ethan K | Observable"}] 4d:Ta89,{ 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(0.05); // 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(0); // Let's test 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(); }4e:T693,{ // 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 // 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(); }4f:[{"id":"827403fea9b21a55992157a795ecd9ea3039702e102e0556b13375189ad543374bf21d025c5b46919a890d121682e24c9e03655d032ea36646d081d5e22eb242","href":"https://static.observableusercontent.com/files/827403fea9b21a55992157a795ecd9ea3039702e102e0556b13375189ad543374bf21d025c5b46919a890d121682e24c9e03655d032ea36646d081d5e22eb242","name":"image@5.png","type":"image/png","lastModified":1665247072542.735,"size":150922},{"id":"c091b85cbc5c740863b2208cd9b62ec9fa0d839388bfe8b8ab30993753aa66e11971052df9c3e002ef8853f2cb8758f0cb69ebdfbfb14f6140348a9633eba1f7","href":"https://static.observableusercontent.com/files/c091b85cbc5c740863b2208cd9b62ec9fa0d839388bfe8b8ab30993753aa66e11971052df9c3e002ef8853f2cb8758f0cb69ebdfbfb14f6140348a9633eba1f7","name":"image@4.png","type":"image/png","lastModified":1665245535955.335,"size":80067},{"id":"bcf8ae471716691ec40bdfdc443a147d0fe61c33674eae441082d6e9766f9c5bcdbe37b76424873bbea94b800472c8863d6ba18d8026ae673756777598e25763","href":"https://static.observableusercontent.com/files/bcf8ae471716691ec40bdfdc443a147d0fe61c33674eae441082d6e9766f9c5bcdbe37b76424873bbea94b800472c8863d6ba18d8026ae673756777598e25763","name":"population.csv","type":"text/csv","lastModified":1665246147085.471,"size":11383}] 49:{"id":"96871d214b15bb43","slug":"d3-review-generators-and-layouts","title":"D3 Review, Generators, and Layouts","thumbnail":"de774c087b122c23fd60074378b2c3a550050b4584c41a075e164948a22068db","access_level":"public","create_time":"$D2022-10-08T15:40:09.703Z","update_time":"$D2022-10-13T20:43:00.897Z","view_time":null,"first_public_time":"$D2022-10-11T19:10:42.895Z","has_unpublished_edits":null,"fork":false,"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":371,"publish_version":371,"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":19,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Review, Generators, and Layouts","cells":[{"id":0,"value":"# D3 Review, Generators, and Layouts","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 },\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 // 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 // Write your javascript here.\n // It should use single \"path\" element to draw the line.\n // You'll need to use a d3 line generator\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":87,"value":"$4d","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":"$4e","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":"$W4f","stdlib":"1"}} 44:null