3f:null 40:["$","title",null,{"children":"The Sperm Bank Gene Pool | Ellen Bechtel | Observable"}] 46:T58d,My visualization idea is based on the idea of a pool (or petri dish?) with all the sperm options swimming around that I could sort in ways that would help me narrow down my choices. This meant... a force-directed diagram, or maybe even a beeswarm. It would start with an **Overview First:** - each of the donors would be a single dot, - radius, color, and positions scaled to various dimensions - dynamic axes to reshuffle and reorganize the dots For this part, I could only sort by information that was consistent across all five banks. Some banks - like the European Sperm Bank, included a text field where staff at the bank could provide impressions of the donor when they met him. That field included notes like "Donor was very kind to staff, and had a stylish appearance" - but since that field was not consistent across the board, I couldn't use that as a consistent dimension with which to sort the options. Ideally I'd also want to zoom and filter in the same beeswarm viz. But because I couldn't get a `view` to work on my Plot instance, I went with some other visuals instead. So, for **Zoom and Filter** I wanted: - a filter for certain criteria - dynamic color coding based on categorical dimensions of the data (like hair, eye, and skin color). Lastly, I wanted **Details on Demand**. That meant: - a tooltip to preview donor details - a way to select a single donor and see all possible details. 47:T4b2,filteredDistribution = Plot.plot({ y: { axis: null, grid: false, label: sortWithin, inset: 10 }, x: { label: "Count of Donors →", nice: true, grid: true }, marginLeft:30, marginRight: 130, marginBottom: 30, width: width, marks: [ // this is the original Plot.barX(Array.from(d3.group(donor_data, d=>d[sortWithin])).map(g=> {return {title: g[0], count: g[1].length}}), { y: "title", x: "count", fill: "lightgray", sort: { y: "x", reverse: true }, tip: true }), Plot.text(Array.from(d3.group(donor_data, d=>d[sortWithin])).map(g=> {return {title: g[0], count: g[1].length}}), { x: "count", y: "title", text: d => `${d.title} (${d.count})`, textAnchor: "start", dx: 5 }), // this is the filtered Plot.barX(Array.from(d3.group(filtered_donor_data, d=>d[sortWithin])).map(g=> {return {title: g[0], count: g[1].length}}), { y: "title", x: "count", fill: d => { return getColorForBars(d, sortWithin)}, sort: { y: "x", reverse: true }, tip: true }), Plot.ruleX([0]) ] })48:T9aa,random_donor_card = { // Standard Variables let heading = htl.html`

${getAttribute({prop: "donorNum", label: "Donor Alias", unit: ""})}

` let bank = htl.html`

${getAttribute({prop: "bank", label: "Sperm Bank", unit: ""})}

` let height = htl.html`

${getAttribute({prop: "height", label: "Height", unit: "cm"})}

` let weight = htl.html`

${getAttribute({prop: "weight", label: "Weight", unit: "lbs"})}

` let eyeColor = htl.html`

${getAttribute({prop: "eye-color-original", label: "Eye Color", unit: ""})}

` let hairColor = htl.html`

${getAttribute({prop: "hair-color-original", label: "Hair Color", unit: ""})}

` let race = htl.html`

${getAttribute({prop: "race", label: "Self-described Race", unit: ""})}

` let ethnicity = htl.html`

${getAttribute({prop: "ethnicity", label: "Ethnicity", unit: ""})}

` let skintone = htl.html`

${getAttribute({prop: "skin-tone-original", label: "Skintone", unit: ""})}

` let religion = htl.html`

${getAttribute({prop: "religion", label: "Religion", unit: ""})}

` let bloodType = htl.html`

${getAttribute({prop: "bloodType", label: "Blood Type", unit: ""})}

` // collect them in an array let arr = [heading, bank, eyeColor, hairColor, race, ethnicity, skintone, height, weight, religion]; // Optional Variables let d = random_donor; d.price ? arr.push(htl.html`

${getAttribute({prop: "price", label: "Price per vial", unit: " USD"})}

`): ``; // price per vial d.degree ? arr.push(htl.html`

${getAttribute({prop: "degree", label: "Degree", unit: ""})}

`): ``; // Degree d.occupation ? arr.push(htl.html`

${getAttribute({prop: "occupation", label: "Occupation", unit: ""})}

`): ``; // Degree d.donationAge ? arr.push(htl.html`

${getAttribute({prop: "donationAge", label: "Age at time of donation", unit: " years"})}

`): ``; // age d.sign ? arr.push(htl.html`

${getAttribute({prop: "sign", label: "Astrological Sign", unit: ""})}

`): ``; // age d.description ? arr.push(htl.html`

${getAttribute({prop: "description", label: "Description", unit: ""})}

`): ``; // Description d.faveSubjects ? arr.push(htl.html`

${getAttribute({prop: "faveSubjects", label: "Favorite Subjects", unit: ""})}

`): ``; // Description d.dominantHand ? arr.push(htl.html`

${getAttribute({prop: "dominantHand", label: "Dominant Hand", unit: ""})}

`): ``; // Dominant Hand return htl.html`${arr.map(el => el)}` }49:T51a,#### Implementing Details on Demand was tricky. Plot as a library doesn't have a built-in tooltip. So, I had to use Mike Freeman's experimental tooltip add on to get it working at all, but even with that add-on you get hover interactions only, not clicks. In the end, even after modifying the add-on and get deep into DOM manipulation to find a way to select the right element, I couldn't figure out how surface the details of that donor as a ``view`` in Observable. I think if I had been using a different framework - like pure React x D3, or visx library, or something - the click functionality would have been easier to implement. But, it would have been a long start-up ramp to get the whole beeswarm working at all, so I think the work all comes out in the wash. #### Adding a second axis to the beeswarm was useful. Adding a second axis made this a cool mix between a scatterplot, a group of small-multiples or facets, and bubble clustering. But the axes do give the clisters some more order, which I really like! #### Adding a Y force within each cluster gave some internal structure to the clusters. This was a happy accident - I didn't realize that the experimental Plot implementation would allow for Y force within cluster, but it gave even more structure to the clusters which I LOVED. 4a:T1326,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "blue", "stroke-width": 2 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // get chart size const bbox = { width: chart.clientWidth, height: chart.clientHeight }; // console.log(bbox, "bbox") // // And a background rect to the chart that you can attach "reset" listeners to // const background = chart.append("rect") // console.log(chart); // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "left"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) // click selection .on("pointerdown", function (event) { // First, find all elements with selected class, and remove class let selectedElements = d3.selectAll(".selected") selectedElements.classed("selected", false) // use .classed() because we used d3.selectAll // Now get the target of the event, and add "selected" class let selected = event.target; selected.classList.toggle("selected"); // use .toggle() because we used event.target // Now trigger function that assigns a selected donor based on the title of the selected element let this_title = selected.getAttribute('__title') let donor_id = this_title.split(" ")[1]; setSelectedDonor(donor_id) console.log(selected, donor_id, "This element is selected"); }) // when pointer leaves .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }) }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => { tip.selectAll("*").remove() // and remove the selected styling d3.selectAll(".selected").classed("selected", false); // use .classed() because we used d3.selectAll }) .on("pointerdown", () => { // and remove the selected styling // d3.selectAll(".selected").classed("selected", false); // use .classed() because we used d3.selectAll // console.log("clear!") }); // // Define the styles console.log(chart) // chart.appendChild(html`