34:["$","title",null,{"children":"Tutorial on D3 Basics and Circle Packing (Heirarchical Bubble Charts) | Bobbi | Observable"}] 3c:T865,md ` ## Building a Table Header Next, we need some HTML DOM to manipulate. One way to do this in observable is to declare the HTML as a variable: \`\`\`js const table = html\`

\`; \`\`\` We can then select this HTML object by feeding it into a D3 select call. \`\`\`js let tableObject = d3.select(table); \`\`\` In environments outside of Observable you can pass a CSS selector into the "select" call to select a specific element from the DOM. Next, we'll modify the table. First, we are going to add a header row to the table. To do this we execute the following code: \`\`\`javascript tableObject.append("tr") // 1. Append a element to the table .selectAll("th") // 2. Select all elements in the (there are none) .data(data_as_array[0]) // 3. "Join" that selection to the first row in the CSV data we recieved (an array of string column headers) .enter() // 4. Perform another selection - getting all elements that do not exist in the table header yet .append("th") // 5. Take this selection (which is all the elements) and append a element .text(d => d); // 6. Put each array element inside the element - creating our column headers \`\`\` This may need some additional explanation. Step 1 is easy to explain. we take the table and append a table row. After that's done the html looks like this: \`\`\`html

\`\`\` Step 2 is a little stranger - we select all \`\`\`\` elements. Clearly there are non, but we're about to change that using what's called a D3 "join" in Step 3. The join takes our array of strings and binds it to the selection we just made. Now any missing elements will be exposed with the call to enter(). When something's missing we append \`\`\`\` (step 5) and then put whatever the data is that we have in the array inside the tag (step 6). In the end the html looks like this. \`\`\`html ...

Code	Occupation_Name

\`\`\` You can see this in action in the Observable code block below: `3d:T490,md ` ## Drawing Circles Using the Packed Data The next step will be to use a join on our packed data to build an SVG visualization. Start by creating an SVG node and setting some height and style parameters: \`\`\`js let width = 932; let height = 932; const svgHTML = html\`\`; const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); \`\`\` Next, append a series of groups with x and y coordinate translations that use the x and y coordinates generated by the packing API calls we made in the previous step: \`\`\`js const leaf = svg.selectAll("g") .data(packedData.leaves()) .enter().append("g") .attr("transform", d => \`translate(\${d.x + 1},\${d.y + 1})\`); \`\`\` Finally, create the circles using the radius generated by the pack API and give them a colour: \`\`\`js const circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => "#bbccff"); \`\`\` Take a look below! We have nicely formatted circles! `3e:T9ff,md ` ## Adding Interactivity - Occupation Details and Labels The circles are great, but they lack any labeling of any kind. Here we have a little challenge. If we are just to apply the labels directly to the circles the text is going to either overflow or get trimmed since their labels can be quite long. In situations like this you might want to instead display the name when someone clicks on or hovers over the circle. To help the visualization work better on mobile, let's display the text on click. D3 allows you to bind events to the circles easily. First we need an action to occur when the event happens: \`\`\`js let format = d3.format(",d") let current_circle = undefined; function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#bbccff"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => \`translate(0, 20)\`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } \`\`\` That looks like a lot of code, but all this does is displays the Occupation name and other information (growth, market conditions) at the top of the screen using appends and selections which we've already covered. To bind this function to the click action for the circles all we do is execute: \`\`\`js circle.on("click", selectOccupation); \`\`\` Take a look at this in action by clicking on the circles in the chart below: `3f:T7fe,{ let width = 932; let height = 932; const svgHTML = html``; const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const leaf = svg.selectAll("g") .data(packedData.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => "#bbccff"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#bbccff"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 20)`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } circle.on("click", selectOccupation); return svg.node() }40:T589,md ` ## Showing Employment Growth on the Bubbles A lot of the information is now hidden from the user when they're viewing the bubble chart. It would be good to expose some of the more interesting dimensions of the data on the graph. We'll do this first by adding the quantitative "growth" measure to the graph. We will work to add a ring around the circles in proportion to the amount the occupation will grow. To make this happen we're going to draw two circles for each occupation instead of just one: an outer circle and then an inner circle on top of it. To accomplish that we're going to have to adjust our data set a little. \`\`\`js highest_data_as_json = { const data = JSON.parse(JSON.stringify(data_as_json)).slice(1); // make a copy of the data and then get rid of the first row return data.map(d => { if(d.Employment_Growth < 0){ d.isGrowing = false; d.Employment_High = Number(d.Employment); d.Employment_Low = Number(d.Employment) + Number(d.Employment_Growth); } else { d.isGrowing = true; d.Employment_High = Number(d.Employment) + Number(d.Employment_Growth); d.Employment_Low = Number(d.Employment); } return d; }); } \`\`\` Here it is, the data with three new fields added: - isGrowing: Whether employment is projected to grow - Employment_High: The highest projected employment - Employment_Low: The lowest projected employment `41:Tb5c,md `Now, let's adjust our bubble chart. First, let's adjust our circle fill to be a green colour if the employment numbers are growing or a red colour if the employment numbers are shrinking: \`\`\`js let circle = leaf.append("circle") ... .attr("fill", d => { if(d.data.isGrowing){ return "#5cb85c"; } else{ return "#d9534f"; } }); \`\`\` The radius here now represents the largest number employment is expected to reach. Next draw another circle on top of those circles that is blue showing the smallest number employment is expected to reach. In this way the red and green circles will become rings around a blue circle. The size of the rings will represent the magnitude of the growth or decline. \`\`\`js let innerCircles = leaf.append("circle") .attr("r", d => { let scale = d3.scaleSqrt() .domain([0, d.data.Employment_High]) // The employment high .range([0,d.r]); // d.r : radius from packed data (the larger circle) return scale(d.data.Employment_Low); // Linearly scaled radius of Employment_Low compares to Employment_High }) .attr("fill", "#d9edf7"); \`\`\` Note the construction of a new scale here. It is a square root scale where we define the domain (the lowest and highest numbers possible) and the range (the lowest and highest radiuses). In this case our lowest numbers of zero and our highest represent the employment high - both in terms of the domain and the range (represented by the packaged data radius - d.r). One could imagine building a visualization of just these circles after choosing an occupation. How you would build that visualization would be very similar to what we've just done. What we're doing here is combining a circle pack bubble chart visualization and another visualization showing a change in value based on the radius of the circle. This is one very powerful feature of D3 - you can combine visualizations together in ways other libraries used for charting just cannot easily provide. One quick note on scale choices: We use scaleSqrt above because the size of the growth or decline should most correctly correspond to the change in the **area** of the circle, not the radius - using this scale has that effect. This has some interesting results. Occupations that have very large growth - 24% for "Registered nurses and registered psychiatric nurses" for instance, may not look like they have quite so large a growth rate when using this scale. Changing the graph to using scaleLinear, so that the **radius** changes in proportion to the size of the growth/decline does a better job of communicating magnitude of the changes, but is less strictly accurate. Feel free to change the scale in code that draws the chart below to see the difference. The results of these changes are shown below: `42:T995,{ let width = 932; let height = 932; const svgHTML = html``; const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const leaf = svg.selectAll("g") .data(highest_packed_data.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => { if(d.data.isGrowing){ return "#5cb85c"; } else{ return "#d9534f"; } }); let innerCircles = leaf.append("circle") .attr("r", d => { let scale = d3.scaleSqrt() .domain([0, d.data.Employment_High]) .range([0,d.r]); return scale(d.data.Employment_Low); }) .attr("fill", "#d9edf7"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#d9edf7"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 20)`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } innerCircles.on("click", selectOccupation); return svg.node() }43:T9bd,md ` ## Grouping the Bubbles into Labour Market Outlook Categories We now have two quantitative dimensions on our chart: 1. The current employment numbers 2. The expected growth in employment Let's add a qualitative dimenion by grouping the circles based on the current and projected labour market. D3 stands for data-driven documents. Given the name it might make sense that we'll be able to do this by changing the structure of the data. We'll be doing this by adding a level to our data heirarchy. We can do that with the following simple code which categorizes the data into five different lists: \`\`\`js highest_data_grouped_as_json = { const data = JSON.parse(JSON.stringify(highest_data_as_json)); let balance = []; let surplus = []; let shortage = []; let balance_to_surplus = []; let balance_to_shortage = []; for(let i in data){ let record = data[i]; let recent_condititions = record.Recent_Labour_Market_Conditions.toUpperCase(); let future_condititions = record.Future_Labour_Market_Conditions.toUpperCase(); if(recent_condititions === "BALANCE" && future_condititions === "BALANCE"){ balance.push(record); } else if(recent_condititions === "SHORTAGE" && future_condititions === "SHORTAGE"){ shortage.push(record); } else if(recent_condititions === "SURPLUS" && future_condititions === "SURPLUS"){ surplus.push(record); } else if(recent_condititions === "BALANCE" && future_condititions === "SHORTAGE"){ balance_to_shortage.push(record); } else if(recent_condititions === "BALANCE" && future_condititions === "SURPLUS"){ balance_to_surplus.push(record); } } return [ {Description: "Labour Market Outlook Remains Balanced", children: balance}, {Description: "Labour Market Outlook Remains Shortage", children: shortage}, {Description: "Labour Market Outlook Remains Surplus", children: surplus}, {Description: "Labour Market Balanced to Shortage", children: balance_to_shortage}, {Description: "Labour Market Balanced to Surplus", children: balance_to_surplus}, ]; } \`\`\` You may have noticed that there are no categories where the labour market goes from "Shortage" or "Surplus" to "Balanced" or their opposites. That's an interesting result from the dataset - they are saying effectively that they are projecting labour markets to become more unbalanced and for existing shortages and surpluses not to be resolved. ` 44:T5df,highest_data_grouped_as_json = { const data = JSON.parse(JSON.stringify(highest_data_as_json)); let balance = []; let surplus = []; let shortage = []; let balance_to_surplus = []; let balance_to_shortage = []; for(let i in data){ let record = data[i]; let recent_condititions = record.Recent_Labour_Market_Conditions.toUpperCase(); let future_condititions = record.Future_Labour_Market_Conditions.toUpperCase(); if(recent_condititions === "BALANCE" && future_condititions === "BALANCE"){ balance.push(record); } else if(recent_condititions === "SHORTAGE" && future_condititions === "SHORTAGE"){ shortage.push(record); } else if(recent_condititions === "SURPLUS" && future_condititions === "SURPLUS"){ surplus.push(record); } else if(recent_condititions === "BALANCE" && future_condititions === "SHORTAGE"){ balance_to_shortage.push(record); } else if(recent_condititions === "BALANCE" && future_condititions === "SURPLUS"){ balance_to_surplus.push(record); } } return [ {Description: "Labour Market Outlook Remains Balanced", children: balance}, {Description: "Labour Market Outlook Remains Shortage", children: shortage}, {Description: "Labour Market Outlook Remains Surplus", children: surplus}, {Description: "Labour Market Balanced to Shortage", children: balance_to_shortage}, {Description: "Labour Market Balanced to Surplus", children: balance_to_surplus}, ]; }45:T460,md ` Now to use the new data. We do that by creating a heirarchy as always. We then join to descendants() instead of the leaves(). \`\`\`js // Create the heirarchy like we did before, but with the new heirarchical data const nodeHeirarchy = d3.hierarchy({ children: highest_data_grouped_as_json }) .sum(d => d.Employment_High); const root = pack.padding(7)(nodeHeirarchy) const leaf = svg.selectAll("g") .data(root.descendants()) // Use descendants() in the join - changed from leaves() .enter().append("g") .attr("transform", d => \`translate(\${d.x + 1},\${d.y + 1})\`); \`\`\` This will group the circles into the categories we want - but it will also apply the same fills and other attributes to the new circles surrounding the leaf circles. Luckily you can selectively apply the attributes using the height attribute: \`\`\`js let circle = leaf.append("circle") ... .attr("fill", d => { if(d.height !== 0){ // if you're not a leaf, you don't get a fill return "none"; } ... }); \`\`\` Here it is! Nicely grouped bubbles: ` 46:Taaf,{ let width = 932; let height = 932; const svgHTML = html``; let pack = d3.pack() .size([width - 2, height - 2]) .padding(3) const nodeHeirarchy = d3.hierarchy({ children: highest_data_grouped_as_json }) .sum(d => d.Employment_High); const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const root = pack.padding(7)(nodeHeirarchy) const leaf = svg.selectAll("g") .data(root.descendants()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => { if(d.height !== 0){ return "none"; } if(d.data.isGrowing){ return "#5cb85c"; } else{ return "#d9534f"; } }); let innerCircles = leaf.append("circle") .attr("r", d => { let scale = d3.scaleSqrt() .domain([0, d.data.Employment_High]) .range([0,d.r]); return scale(d.data.Employment_Low); }) .attr("fill", "#d9edf7"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#d9edf7"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 20)`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } innerCircles.on("click", selectOccupation); return svg.node() }47:Tc2f,drawFinal = function(){ let width = 932; let height = 932; const svgHTML = html``; let pack = d3.pack() .size([width - 2, height - 2]) .padding(3) const nodeHeirarchy = d3.hierarchy({ children: highest_data_grouped_as_json }) .sum(d => d.Employment_High); const svg = d3.select(svgHTML) .style("width", "100%") .style("height", "auto") const root = pack.padding(7)(nodeHeirarchy) const leaf = svg.selectAll("g") .data(root.descendants()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); let circle = leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => { if(d.height !== 0){ return "none"; } if(d.data.isGrowing){ return "#5cb85c"; } else{ return "#d9534f"; } }); let innerCircles = leaf.append("circle") .attr("r", d => { let scale = d3.scaleSqrt() .domain([0, d.data.Employment_High]) .range([0,d.r]); return scale(d.data.Employment_Low); }) .attr("fill", "#d9edf7"); let current_circle = undefined; let format = d3.format(",d") function selectOccupation(d) { // cleanup previous selected circle if(current_circle !== undefined){ current_circle.attr("fill", d => "#d9edf7"); svg.selectAll("#details-popup").remove(); } // select the circle current_circle = d3.select(this); current_circle.attr("fill","#b2e1f9"); let textblock = svg.selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", d => `translate(0, 20)`); textblock.append("text") .text("Occupation Details:") .attr("font-weight", "bold"); textblock.append("text") .text(d => "Description: " + d.data.Occupation_Name) .attr("y", "16"); textblock.append("text") .text(d => "Current Employment: " + format(d.data.Employment)) .attr("y", "32"); textblock.append("text") .text(d => "Projected Growth: " + format(d.data.Employment_Growth)) .attr("y", "48"); textblock.append("text") .text(d => "Recent Labour Market Conditions: " + d.data.Recent_Labour_Market_Conditions.toUpperCase()) .attr("y", "64"); textblock.append("text") .text(d => "Projected Future Labour Market Conditionsh: " + d.data.Future_Labour_Market_Conditions.toUpperCase()) .attr("y", "80"); } innerCircles.on("click", selectOccupation); const categories = root.children; svg.selectAll(".categories") .data(categories) .enter() .append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + d.r + 1})`) .append("text") .text(d => d.data.Description) .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); return svg.node() }48:[] 38:{"id":"2527e5bb3be3f469","slug":"tutorial-on-d3-basics-and-circle-packing-heirarchical-bubb","title":"Tutorial on D3 Basics and Circle Packing (Heirarchical Bubble Charts)","thumbnail":"d77d1544b4f8476f4e8bcfbf7e0aee1cf84c9e68dfb57ed8991f75f823b48624","access_level":"public","create_time":"$D2019-12-07T19:06:24.265Z","update_time":"$D2019-12-07T19:06:24.265Z","view_time":null,"first_public_time":"$D2019-12-07T19:32:55.708Z","has_unpublished_edits":null,"fork":{"id":"df228a1e41b64f7a","slug":"tutorial-on-d3-basics-and-circle-packing-heirarchical-bubb","title":"Tutorial on D3 Basics and Circle Packing (Heirarchical Bubble Charts)","owner":{"id":"c5afcf9e4842eb6c","login":"johnhaldeman","name":"John Haldeman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d908c6612b29e155","login":"bobi-rakova","name":"Bobbi","avatar_url":"https://avatars-next.observableusercontent.com/5a506088dd065dd02ba316e364e4882cc3f6dde1e66ea8bbc8fce3f4dfaf136c","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":325,"publish_version":325,"role":null,"authored":false,"authors":[{"type":"individual","id":"38a21775c1195e6d","login":"bobi-rakova","name":"Bobbi","avatar_url":"https://avatars-next.observableusercontent.com/5a506088dd065dd02ba316e364e4882cc3f6dde1e66ea8bbc8fce3f4dfaf136c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"38a21775c1195e6d","login":"bobi-rakova","name":"Bobbi","avatar_url":"https://avatars-next.observableusercontent.com/5a506088dd065dd02ba316e364e4882cc3f6dde1e66ea8bbc8fce3f4dfaf136c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tutorial on D3 Basics and Circle Packing (Heirarchical Bubble Charts)","cells":[{"id":0,"value":"md`# Tutorial on D3 Basics and Circle Packing (Heirarchical Bubble Charts)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md `In this tutorial, we'll be taking a tour through D3 and building a bubble chart for [Canadian Occupational Projection System (COPS) projections published by Open Data Canada](https://open.canada.ca/data/en/dataset/e80851b8-de68-43bd-a85c-c72e1b3a3890 \"COPS projections on Open Data Canada\"). By the end of the tutorial, we'll have created the following bubble chart:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"{return drawFinal()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md `## Importing D3\nThe first step is to import D3. In observable, we do that with the following code:\n\\`\\`\\`js\nd3 = require(\"d3@5\");\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md `Next, to get a handle on the basic mechanics of D3, we'll create an HTML table of the COPS data. This will show how data can be bound to a DOM representation which is the core of D3. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md `\n## Getting the Data\nFirst though we'll need some data. Import it synchronously by fetching the data as text and then parse it into an array. The good news is that D3 provides us tools to do this:\n\n\\`\\`\\`js\nlet data_as_text = await d3.text(\"https://www.example.com/my_data.csv\"); \nreturn d3.csvParseRows(data_as_text);\n\\`\\`\\`\n\nI've supplied a lightly edited data set on my github page we can import:\nhttps://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv\n\nThat is imported in the Observable code block below (click on the margin on the left to expand it):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data_as_array = {\n let data_as_text = await d3.text(\"https://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv\");\n \n return d3.csvParseRows(data_as_text);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"{\n const table = html`

`;\n let tableObject = d3.select(table);\n tableObject.append(\"tr\") \n .selectAll(\"th\") \n .data(data_as_array[0]) \n .enter() \n .append(\"th\") \n .text(d => d);\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md `\n## Filling in the table\nThe final step is to do the same thing except performing two joins - one for the rows in the data and another for the individual cell values.\n\n\\`\\`\\`js\n tableObject.selectAll(\"tr\")\n .data(data_as_array.slice(1, 15)) // Join the table rows to the rows in the CSV file (now a js array)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n .data(d => d) // Join the table values to the table data\n .enter()\n .append(\"td\")\n .text(d => d)\n ;\n\\`\\`\\`\nThe completed table (well, the first 15 rows at least) are shown below in the Observable code block:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{\n const table = html`

`;\n \n let tableObject = d3.select(table);\n \n tableObject.append(\"tr\")\n .selectAll()\n .data(data_as_array[0])\n .enter()\n .append(\"th\")\n .text(d => d);\n \n tableObject.selectAll(\"tr\")\n .data(data_as_array.slice(1, 15))\n .enter()\n .append(\"tr\")\n .selectAll()\n .data(d => d)\n .enter()\n .append(\"td\")\n .text(d => d)\n ;\n \n \n return table;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md `\n## Creating a Bubble Chart by Packing Data\nNow that we've got a handle on some D3 fundementals, let's start building our visualization. We are going to build a bubble chart. D3 bubble charts use the pack layout. The pack layout expects an array of json objects, not a 2 dimensional array of strings that was convenient for the html table we built before. So as a first step, let's refetch our data as an array of json objects with this call:\n\\`\\`\\`js\ndata_as_json = d3.csv(\"https://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv\");\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"data_as_json = d3.csv(\"https://raw.githubusercontent.com/johnhaldeman/talk-on-d3-basics/master/Summary_sommaire_2017_2026.csv\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md `Pack expects the data to be organized into a D3 heirarchy. We're going to start with a flat bubble chart, which means we only need a 1-level heirarcy. We can build that with the following code:\n\n\\`\\`\\`js\nflatNodeHeirarchy = {\n let root = {children: data_as_json.slice(1)}; // remove the first value from the dataset - which is an aggregate we don't need\n return d3.hierarchy(root).sum(d => d.Employment);\n}\n\\`\\`\\`\n\nThe root node here is empty except for a reference to the array of json elements which are it's children. We then call \\`\\`sum()\\`\\` on the heirarchy to build a sum-based heirarchy. That is each node's value will be the sum of their children's Employment number. The other option here is building a count-based heirarchy which is useful for other kinds of heirarchical bubble charts. You can see the results of what the \\`\\`d3.hierarchy\\`\\` call does below - take a look at the new \"value\" and \"data\" fields\" and what the new children objects look like.\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"flatNodeHeirarchy = {\n let root = {children: data_as_json.slice(1)};\n return d3.hierarchy(root).sum(d => d.Employment);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md `The next step is to \"pack\" the heirarchy. The pack API is what's used to build beirarchical bubble charts (AKA enclosure diagrams).\n\\`\\`\\`js\n\npackedData = {\n let width = 930;\n let height = 930;\n let pack = d3.pack()\n .size([width, height])\n .padding(3)\n return pack(flatNodeHeirarchy);\n}\n\\`\\`\\`\nWhen we specify the pack, we also set the width, height, and how big we'd like the padding to be. Take a look at the results below - we now have our heirarchy as before, but each node also has an x, y, and r value - we'll be using this x-coordinate, y-coordinate, and radius to build our circles.\n\nIt should now be clear what D3 is in general:\n1. An API that allows you to bind (\"join\") data to the DOM and\n2. Another set to APIs to help you create source data to apply to your joins\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"packedData = {\n let width = 930;\n let height = 930;\n let pack = d3.pack()\n .size([width, height])\n .padding(3)\n return pack(flatNodeHeirarchy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"{\n let width = 932;\n let height = 932;\n const svgHTML = html``;\n\n const svg = d3.select(svgHTML)\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"text-anchor\", \"middle\");\n \n const leaf = svg.selectAll(\"g\")\n .data(packedData.leaves())\n .enter().append(\"g\")\n .attr(\"transform\", d => `translate(${d.x + 1},${d.y + 1})`);\n \n leaf.append(\"circle\")\n .attr(\"r\", d => d.r)\n .attr(\"fill\", d => \"#bbccff\");\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"highest_data_as_json = {\n const data = JSON.parse(JSON.stringify(data_as_json)).slice(1); // make a copy of the data and then get rid of the first row\n\n return data.map(d => {\n if(d.Employment_Growth < 0){\n d.isGrowing = false;\n d.Employment_High = Number(d.Employment);\n d.Employment_Low = Number(d.Employment) + Number(d.Employment_Growth);\n }\n else {\n d.isGrowing = true;\n d.Employment_High = Number(d.Employment) + Number(d.Employment_Growth);\n d.Employment_Low = Number(d.Employment);\n }\n\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"highest_packed_data = {\n let root = {children: highest_data_as_json.slice(1)};\n let highest_flat_node_heirarchy = d3.hierarchy(root).sum(d => d.Employment_High);\n \n let width = 930;\n let height = 930;\n let pack = d3.pack()\n .size([width, height])\n .padding(3)\n return pack(highest_flat_node_heirarchy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md `\n## Adding Some Labels to the Categories\nThe final step is to add some labels. We're going to do this by joining a selection to the immediate children of our root node in the heirarchy and then appending the text.\n\n\\`\\`\\`js\n const categories = root.children;\n \n svg.selectAll(\".categories\")\n .data(categories)\n .enter()\n .append(\"g\")\n .attr(\"transform\", d => \\`translate(\\${d.x + 1},\\${d.y + d.r + 1})\\`)\n .append(\"text\")\n .text(d => d.data.Description)\n .attr(\"font-size\", 12)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"text-anchor\", \"middle\");\n\\`\\`\\`\n\nHere's the result!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"{\n return drawFinal()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md `This concludes this tutorial on D3. In it you learned about the basics of D3 and then applied that knowledge to a progressively more complex data visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 33:null