2b:null 2c:["$","title",null,{"children":"Example chart created with D3.js | Luca Picci | Observable"}] 31:Tc70,{ // create array for the data const data = { Africa: 20.7, Rest: 1479.3 }; //define square sizes, spacing and layout const squareSize = 10; const squaresPerRow = 50; const gapSize = 2; const totalSquares = Math.floor(data["Africa"]) + Math.floor(data["Rest"]) + 1; // Adding 1 for the partial square // Define the colors for each category const colors = { Africa: "#10827b", Rest: "#dedede" }; // Create a container for the text and SVG const container = d3.create("div"); // Add the text and sample square using HTML container.html(`

If each represents 1 million doses, this is how far Africa’s current production is from its target.

`); // Create an SVG container const svg = container .append("svg") .attr("width", squaresPerRow * (squareSize + gapSize)) .attr( "height", Math.ceil(totalSquares / squaresPerRow) * (squareSize + gapSize) ); // Create groups for Africa and Rest const africaGroup = svg.append("g").attr("id", "africa"); const restGroup = svg.append("g").attr("id", "rest"); // Add full squares for Africa africaGroup .selectAll("rect.africa") .data(d3.range(Math.floor(data["Africa"]))) .enter() .append("rect") .attr("class", "africa") .attr("width", squareSize) .attr("height", squareSize) .attr("x", (d) => (d % squaresPerRow) * (squareSize + gapSize)) .attr("y", (d) => Math.floor(d / squaresPerRow) * (squareSize + gapSize)) .attr("fill", colors["Africa"]); // Add the partial square const africaCount = Math.floor(data["Africa"]); const partialSquareX = (africaCount % squaresPerRow) * (squareSize + gapSize); const partialSquareY = Math.floor(africaCount / squaresPerRow) * (squareSize + gapSize); const africaRatio = data["Africa"] - africaCount; const restRatio = 1 - africaRatio; africaGroup .append("rect") .attr("x", partialSquareX) .attr("y", partialSquareY) .attr("width", squareSize) .attr("height", squareSize * africaRatio) .attr("fill", colors["Africa"]); restGroup .append("rect") .attr("x", partialSquareX) .attr("y", partialSquareY + squareSize * africaRatio) .attr("width", squareSize) .attr("height", squareSize * restRatio) .attr("fill", colors["Rest"]); // Add full squares for Rest restGroup .selectAll("rect.rest") .data(d3.range(Math.floor(data["Rest"]))) .enter() .append("rect") .attr("class", "rest") .attr("width", squareSize) .attr("height", squareSize) .attr( "x", (d) => ((d + africaCount + 1) % squaresPerRow) * (squareSize + gapSize) ) .attr( "y", (d) => Math.floor((d + africaCount + 1) / squaresPerRow) * (squareSize + gapSize) ) .attr("fill", colors["Rest"]); return container.node(); }32:[] 2f:{"id":"19eab4b2f988c43f","slug":null,"title":"Example chart created with D3.js","thumbnail":"0b1a29d45e501e9a147995624e4ba8ae6680d226510670b36560ba3561c0c998","access_level":"public","create_time":"$D2024-07-03T14:14:07.374Z","update_time":"$D2024-07-03T14:44:47.414Z","view_time":null,"first_public_time":"$D2024-07-03T15:02:27.016Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6b9e80fc1c575ea7","login":"lucapicci","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/28b920a132d1ed0807bf09d347ff062ed53c9ef1139a3f9c49810051cba058f5","tier":"starter_2024","bio":""},"version":22,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null,"bio":""}],"members":[{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null,"role":"editor"},{"type":"team","id":"6b9e80fc1c575ea7","login":"lucapicci","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/28b920a132d1ed0807bf09d347ff062ed53c9ef1139a3f9c49810051cba058f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Example chart created with D3.js","cells":[{"id":0,"value":"# Example chart created with D3.js ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"This chart was created for ONE's analysis on [vaccine manufacturing in Africa](https://data.one.org/data-dives/manufacturing/). \n\nThis chart was created in D3.js to get around the limitations of using Flourish templates. The svg was integrated with Flourish on the svg annotator template to add interactivity and align the chart with the styling on the page. \n\n**Ideally this would have been created with the Flourish SDK for reproducibility but with short turnarounds for custom charts the Flourish svg annotator is powerful\n\n__Please visit the [page](https://data.one.org/data-dives/manufacturing/) to see the published chart__\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"