3f:null 40:["$","title",null,{"children":"Horizontal ScatterPlot Series | Jasper Croome | Observable"}] 46:Tde2,// example dataset data = Object({ "People have failed to care for planet": { Australia: { region: "north", value: 0.81 }, Brazil: { region: "south", value: 0.92 }, France: { region: "north", value: 0.77 }, Finland: { region: "north", value: 0.75 }, India: { region: "south", value: 0.86 }, Nigeria: { region: "south", value: 0.76 }, Philippines: { region: "south", value: 0.93 }, Portugal: { region: "north", value: 0.89 }, UK: { region: "north", value: 0.8 }, USA: { region: "north", value: 0.78 } }, "Future is frightening": { Australia: { region: "north", value: 0.76 }, Brazil: { region: "south", value: 0.86 }, France: { region: "north", value: 0.74 }, Finland: { region: "north", value: 0.56 }, India: { region: "south", value: 0.8 }, Nigeria: { region: "south", value: 0.7 }, Philippines: { region: "south", value: 0.92 }, Portugal: { region: "north", value: 0.81 }, UK: { region: "north", value: 0.72 }, USA: { region: "north", value: 0.68 } }, "Humanity is doomed": { Australia: { region: "north", value: 0.5 }, Brazil: { region: "south", value: 0.67 }, France: { region: "north", value: 0.48 }, Finland: { region: "north", value: 0.43 }, India: { region: "south", value: 0.74 }, Nigeria: { region: "south", value: 0.42 }, Philippines: { region: "south", value: 0.73 }, Portugal: { region: "north", value: 0.62 }, UK: { region: "north", value: 0.51 }, USA: { region: "north", value: 0.46 } }, "Less opportunity than parents": { Australia: { region: "north", value: 0.57 }, Brazil: { region: "south", value: 0.5 }, France: { region: "north", value: 0.61 }, Finland: { region: "north", value: 0.42 }, India: { region: "south", value: 0.67 }, Nigeria: { region: "south", value: 0.49 }, Philippines: { region: "south", value: 0.7 }, Portugal: { region: "north", value: 0.54 }, UK: { region: "north", value: 0.53 }, USA: { region: "north", value: 0.44 } }, "Most valued will be destroyed": { Australia: { region: "north", value: 0.52 }, Brazil: { region: "south", value: 0.64 }, France: { region: "north", value: 0.45 }, Finland: { region: "north", value: 0.43 }, India: { region: "south", value: 0.69 }, Nigeria: { region: "south", value: 0.54 }, Philippines: { region: "south", value: 0.74 }, Portugal: { region: "north", value: 0.59 }, UK: { region: "north", value: 0.47 }, USA: { region: "north", value: 0.42 } }, "Family security will be threatened": { Australia: { region: "north", value: 0.48 }, Brazil: { region: "south", value: 0.65 }, France: { region: "north", value: 0.5 }, Finland: { region: "north", value: 0.3 }, India: { region: "south", value: 0.65 }, Nigeria: { region: "south", value: 0.55 }, Philippines: { region: "south", value: 0.77 }, Portugal: { region: "north", value: 0.52 }, UK: { region: "north", value: 0.39 }, USA: { region: "north", value: 0.35 } }, "Hesitant to have children": { Australia: { region: "north", value: 0.43 }, Brazil: { region: "south", value: 0.48 }, France: { region: "north", value: 0.37 }, Finland: { region: "north", value: 0.42 }, India: { region: "south", value: 0.41 }, Nigeria: { region: "south", value: 0.23 }, Philippines: { region: "south", value: 0.47 }, Portugal: { region: "north", value: 0.37 }, UK: { region: "north", value: 0.38 }, USA: { region: "north", value: 0.36 }, } })47:T155b,{ // define the bounds of the chart const chartDimensions = { margin: dimensions.margin, boundedWidth: dimensions.width - (dimensions.margin.left + dimensions.margin.right), boundedHeight: dimensions.height - (dimensions.margin.top + dimensions.margin.bottom) }; // create data objects const dataEntries = Object.entries(data); const groupedDataEntries = dataEntries.map((e) => { return [e[0], Object.entries(e[1])]; }); const xValues = []; const yValues = []; dataEntries.map((dataEntry) => { Object.entries(dataEntry[1]).map((category) => { xValues.push(category[1].value); yValues.push(dataEntry[0]); }); }); const yDomain = yValues.filter((val, vNdx, self) => { return self.indexOf(val) === vNdx; }); const xDomain = d3.extent([0, 1]); const showZero = true; if (showZero) { if (xDomain[1] > 0) xDomain[0] = 0; else xDomain[1] = 0; } // create the scales const xScale = d3.scaleLinear(xDomain, [ chartDimensions.margin.left, chartDimensions.boundedWidth - chartDimensions.margin.right ]); const yScale = d3.scaleBand(yDomain, [ chartDimensions.boundedHeight - chartDimensions.margin.bottom, chartDimensions.margin.top ]); // create the line accessor const line = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])); // create & append various items to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("shape-rendering", "geometricPrecision") .attr("width", chartDimensions.boundedWidth) .attr("height", chartDimensions.boundedHeight); // add the x axis svg .append("g") .attr("transform", `translate(${0}, ${chartDimensions.boundedHeight})`) .attr("class", "axis") .call(d3.axisTop(xScale).ticks(5, "%")); // add the lines, end-dots, end-values and legend Items groupedDataEntries.map((question, gNdx) => { const maxIndex = xValues.length - 1; const northRange = question[1] .filter((r) => r[1].region === "north") .map((r) => r[1].value); const southRange = question[1] .filter((r) => r[1].region === "north") .map((r) => r[1].value); svg .append("g") .selectAll("path") .data(question[1]) .join("path") .attr("d", line(question[1])) .attr("fill", "none") .attr("stroke", colors[gNdx % 6]) .attr("opacity", "0.8") .attr("stroke-width", "4px"); svg .append("g") .attr("class", "endDots") .selectAll("circle") .data(question[1]) .join("circle") .attr("cx", (d) => xScale(d[1].value)) .attr( "cy", (d) => yScale(question[0]) + (d[1].region === "north" ? 10 : 20) ) .attr("r", "5px") .attr("fill", (d) => (d[1].region === "north" ? colors[0] : colors[1])); svg.append("g").attr("class", "connectorLine").append("line").attr("x1"); svg .append("g") .attr("class", "legendItemText") .selectAll("text") .data(question) .join("text") .text(question[0]) .attr("x", chartDimensions.margin.left) .attr("y", (d) => yScale(question[0])) .attr("text-anchor", "start"); // svg // .append("g") // .attr("class", "legendItem") // .selectAll("circle") // .data(group) // .join("circle") // .attr("cx", xScale(d3.max(xScale.domain())) + 50) // .attr("cy", yScale(group[1][2][1])) // .attr("r", "10px") // .attr("fill", colors[gNdx % 6]); // svg // .append("g") // .attr("class", "legendItemText") // .selectAll("text") // .data(question) // .join("text") // .text(question[0]) // .attr("x", xScale(d3.max(xScale.domain())) + 65) // .attr("y", yScale(question[1][1][1]) + 5); }); // add title svg .append("text") .text(title) .attr("class", "title") .attr("y", chartDimensions.margin.top * (2 / 3)) .attr("x", chartDimensions.margin.left * (1 / 2)); // add styling const axisPath = svg.selectAll(".axis .domain"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisTickDash = svg.selectAll(".axis .tick").selectAll("line"); const axisTickLine = svg.selectAll(".tickLine"); const axisLabel = svg.selectAll(".axisLabel"); const legendText = svg.selectAll(".legendItemText"); const { titleStyle, axisLabelStyle, axisStyle, detailLabelStyle } = chartObjectStyle; const axisLineStyleArray = Object.entries(axisStyle.lines); const axisTickLineStyleArray = Object.entries(axisStyle.tickLines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); const legendTextStyleArray = Object.entries(detailLabelStyle); axisLineStyleArray.map((s) => { axisPath.style("stroke", "none"); axisTickDash.style("stroke", "none"); }); axisTickLineStyleArray.map((s) => { axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); legendTextStyleArray.map((s) => { legendText.style(s[0], s[1]); }); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); return svg.node(); }48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"e33e7d9c2cf641f5","slug":"horizontal-scatterplot-series","title":"Horizontal ScatterPlot Series","thumbnail":"0e784e6009c0f976994d6dd61fb4df94a1dd4f082a985eeaeb4b1eab89735bee","access_level":"public","create_time":"$D2021-11-10T04:26:32.280Z","update_time":"$D2021-11-10T19:08:46.081Z","view_time":null,"first_public_time":"$D2021-11-10T05:43:33.355Z","has_unpublished_edits":null,"fork":{"id":"9531006dfbac0dbf","slug":"grouped-slopegraph","title":"Grouped Slopegraph","owner":{"id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":2150,"publish_version":2150,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizontal ScatterPlot Series","cells":[{"id":0,"value":"# Horizontal ScatterPlot Series\n\nThis is a Horizontal ScatterPlot, used to measure the spread of categories across various metrics\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"## 1. Declare your Data\n\nThis is where you would declare data as whatever you want to graph. For this chart, it needs to have a key-value pairing for each category, à la: \n\n```\n{\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2068,"value":"formatValue = (number) => {\n const p = Math.max(0, d3.precisionFixed(0.05) - 1);\n const f = d3.format(\".\" + p + \"%\");\n return f(number/100);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"**Anything below this box is maintenance-related, and doesn't directly change the experience of the grouped Waffle Chart**\n\n(apart from maybe breaking it)\n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"dimensions = Object({\n margin: { left: 60, top: 80, bottom: 60, right: 10 },\n width: 600,\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"//\n\naxes = Object({\n axisLeft: {\n show: false\n },\n axisBottom: {\n show: false\n },\n axisRight: { show: false }, // for now, this does nothing\n axisTop: { show: false } // samesies\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"detailLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"16\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"summaryLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"20\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `Northern and Southern Hemisphere Worldviews, compared`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"import {\n styleString,\n textureArrays,\n colors,\n chartObjectStyle\n} from \"@jasper/carbon-almanac-stylesheet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"{\n const defaultStyle = document.createElement(\"style\");\n defaultStyle.innerHTML = styleString;\n document.head.appendChild(defaultStyle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"