25:["$","title",null,{"children":"Horizontal Scatterplot | JOYCE TAN's Workspace | Observable"}] 49:T374f,function horizontalScatterplot() { d3.select('#chart').selectAll('svg').remove() // defined via accessor functions let data = [], steps = [], width = 800, height = 800, margin = { top: 0, left: 20, right: 30, bottom: 0 }, beadRadius = 10, backgroundColor = 'none', stripeColors = ['#fafafa', '#f4f4f4'], heightFactors = { xAxis: 0.085, plotArea: 0.8, legend: 0.115 } // defined internally y let svg, x, y, color, widthFactors = { rowLabels: 0.15, plotArea: 0.85 } function chart(selection) { selection.each(function() { svg = d3.select(this).append('svg') .attr('width', width) .attr('height', height) .style('background-color', backgroundColor) // grayscale filter to be applied to unfocused beads let defs = svg.append('defs'), grayscale = defs.append('filter').attr('id', 'grayscale') grayscale.append('feColorMatrix') .attr("type", "matrix") .attr("values", "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0") color = d3.scaleOrdinal() .domain(data[0].cats.map((d, i) => i)) .range(d3.schemeCategory10) x = d3.scaleLinear() .domain([0, 100]) .range([margin.left + (width * widthFactors.rowLabels), width - margin.right]) y = d3.scaleLinear() .domain([0, data.length]) .range([margin.top + (heightFactors.legend * height), height - (height * heightFactors.xAxis) - margin.bottom]) let legend = svg.append('g').attr('class', 'legend'), rows = svg.append('g').attr('class', 'rows'), rowLabels = svg.append('g').attr('class', 'row-labels'), xAxis = svg.append('g').attr('class', 'x axis'), beads = svg.append('g').attr('class', 'beads'), beadLines = svg.append('g').attr('class', 'bead-lines'), beadTooltips = svg.append('g').attr('class', 'bead-tooltips') legend.call(addLegend) rows.call(addRows) rowLabels.call(addRowLabels) xAxis.call(addXAxisText) xAxis.call(addXAxisLines) beads.call(addBeads) setTimeout(() => beads.call(addBeadTooltips, beadTooltips), 700) setTimeout(() => beadLines.call(addBeadLines), 700) }) } // --- helpers ---------------------------------- // add x axis text to selection function addXAxisText(selection) { selection.each(function() { let x = d3.scaleLinear() .domain([0, steps.length - 1]) .range([margin.left + (width * widthFactors.rowLabels), width - margin.right]) let text = d3.select(this) .selectAll('text') .data(steps) .enter().append('text') .attr('class', 'step') .attr('x', (d, i) => x(i)) .attr('dy', 0) .attr('text-anchor', (d, i) => (0 === i) ? 'start' : (steps.length - 1 === i) ? 'end' : 'middle') .text(d => d) .call(wrap, { lineHeightEm: 1.2, width: (width / steps.length) - (width / 12) }) let size = d3.select(this).node().getBBox(), y = (height * heightFactors.legend) + (height * heightFactors.plotArea) + ((height * heightFactors.xAxis) / 2) text.attr('transform', `translate(0, ${y})`) }) } // add x axis lines to selection function addXAxisLines(selection) { selection.each(function() { let x = d3.scaleLinear() .domain([0, steps.length - 1]) .range([margin.left + (width * widthFactors.rowLabels), width - margin.right]) d3.select(this) .selectAll('line') .data(steps) .enter().append('line') .attr('class', 'line') .attr('x1', (d, i) => x(i)) .attr('x2', (d, i) => x(i)) .attr('y1', (height * heightFactors.legend)) .attr('y2', (height - (height * heightFactors.xAxis))) .attr('stroke', '#ddd') .attr('stroke-dasharray', '6') }) } // add legend to selection function addLegend(selection) { selection.each(function() { let cats = data[0].cats, wrapWidth = width / cats.length, wrapPadding = 40 let text = d3.select(this).selectAll('text') .data(cats) .enter().append('text') .attr('dy', 0) .attr('y', (height * heightFactors.legend) / 2) .attr('x', (d, i) => (i * wrapWidth) + (wrapWidth / 2)) .attr('text-anchor', 'middle') .attr('font-size', '1.0em') .attr('fill', (d, i) => color(i)) .text(d => d.cat) text.call(wrap, { width: wrapWidth - (wrapPadding * 2) }) text.each(function() { let selection = d3.select(this), y = parseFloat(selection.attr('y')), size = selection.node().getBBox(), isTooBig = (y + size.height) > ((height * heightFactors.legend)) if (isTooBig) { let gap = ((height * heightFactors.legend) - size.height) / 2 selection.attr('transform', `translate(0, ${-gap})`) } }) }) } // add rows to selection function addRows(selection) { selection.selectAll('g') .data(data) .enter().append('g') .attr('class', 'row') .attr('id', d => d.group) .attr('index', (d, i) => i) .call(add) function add(selection) { selection.each(function() { let row = d3.select(this), datum = row.datum(), group = datum.group, cats = datum.cats, index = row.attr('index'), rowHeight = (heightFactors.plotArea * height) / data.length // shift row's position row.attr('transform', `translate(0, ${y(index)})`) // add background rectangle row.append('rect') .attr('width', width) .attr('height', rowHeight) .attr('x', 0) .attr('y', 0) .attr('fill', (0 === index % 2) ? stripeColors[0] : stripeColors[1]) }) } } // add row labels to selection function addRowLabels(selection) { selection.selectAll('g') .data(data) .enter().append('g') .attr('class', 'row-label') .attr('id', d => d.group) .attr('index', (d, i) => i) .call(add) function add(selection) { selection.each(function() { let label = d3.select(this), datum = label.datum(), group = datum.group, index = label.attr('index'), rowHeight = (heightFactors.plotArea * height) / data.length // shift label's y position label.attr('transform', `translate(0, ${y(index)})`) // add label text let text = label.append('text') .attr('class', 'label') .style('font-size', '1.2em') .attr('fill', '#444') .text(group) // measure text let textSize = text.node().getBBox() // dynamically reposition label text text .attr('x', margin.left + 12) .attr('y', textSize.height + (rowHeight / 2 - textSize.height) + 8) }) } } // add row beads to selection function addBeads(selection, cb) { selection.selectAll('g') .data(data) .enter().append('g') .attr('class', 'bead-group') .attr('id', d => d.group) .attr('index', (d, i) => i) .call(add) function add(selection) { selection.each(function() { let row = d3.select(this), datum = row.datum(), cats = datum.cats, rowHeight = (heightFactors.plotArea * height) / data.length, index = row.attr('index') row .attr('transform', `translate(0, ${y(index)})`) .selectAll('circle') .data(cats) .enter().append('circle') .attr('class', d => `bead ${hyphenate(d.cat)}`) .attr('r', beadRadius) .attr('cx', x(0)) .attr('cy', rowHeight / 2) .attr('stroke', '#eee') .attr('stroke-width', 1) .attr('cursor', 'pointer') .attr('fill', (d, i) => color(i)) .on('mouseenter', focus) .on('mouseout', unfocus) .transition() .duration(500) .attr('cx', d => x(parseFloat(d.val))) .on('end') }) } } // add lines connecting beads of same category function addBeadLines(selection) { let line = d3.line().curve(d3.curveMonotoneX), cats = data[0].cats let path = selection.selectAll('path') .data(cats) .enter().append('path') .attr('class', d => `bead-line ${hyphenate(d.cat)}`) .attr('d', getPathData) .attr('fill', 'none') .attr('stroke', (d, i) => color(i)) .attr('stroke-width', 1.4) .attr('opacity', 0) .attr('pointer-events', 'none') function getPathData({ cat }) { let beads = d3.selectAll(`.bead.${hyphenate(cat)}`), points = [] beads.each(function() { let x = parseFloat(d3.select(this).attr('cx')), y = parseFloat(d3.select(d3.select(this).node().parentNode).attr('transform').split(",")[1]) + parseFloat(d3.select(this).attr('cy')) points.push([x, y]) }) return line(points) } } // add hover tooltips to beads function addBeadTooltips(selection, tooltips) { // generate tooltips selection.selectAll('.bead').each(function() { let _this = d3.select(this), datum = _this.datum(), width = _this.attr('r') * 2, height = _this.attr('r') * 2, x = parseFloat(_this.attr('cx')) + 26, yTransform = d3.select(_this.node().parentNode).attr('transform') let tooltip = tooltips.append('g') .attr('class', 'tooltip') .attr('transform', yTransform) .attr('opacity', 0) .attr('pointer-events', 'none') _this.on('mouseenter', () => { tooltip.transition().duration(150).attr('opacity', 1) focus({ cat: datum.cat }) }) _this.on('mouseout', () => { tooltip.transition().duration(150).attr('opacity', 0) unfocus({ cat: datum.cat }) }) let bg = tooltip.append('rect') .attr('rx', 5) .attr('x', x) .attr('y', 0) .attr('fill', '#f4f4f4') .attr('stroke', '#999999') .attr('stroke-width', '1px') let text = tooltip.append('text').text(datum.val), textSize = text.node().getBBox(), padding = { vertical: 10, horizontal: 20 } bg .attr('width', padding.horizontal + textSize.width) .attr('height', padding.vertical + textSize.height) text .attr('x', (padding.horizontal / 2) + x) .attr('y', (padding.vertical / 2) + textSize.height - (textSize.height / 4)) }) } // focus beads in specified category function focus({ cat }) { svg.selectAll('.bead') .filter(d => d.cat !== cat) .attr('filter', 'url(#grayscale)') .transition() .ease(d3.easeCubic) .duration(250) .attr('r', beadRadius * 0.8) svg.selectAll('.bead') .filter(d => d.cat === cat) .transition() .ease(d3.easeCubic) .duration(250) .attr('r', beadRadius * 1.2) svg.selectAll('.bead-line') .filter(d => d.cat === cat) .transition() .duration(350) .attr('opacity', 1) } // unfocus all beads function unfocus() { svg.selectAll('.bead') .attr('filter', '') .transition() .ease(d3.easeCubic) .duration(250) .attr('r', beadRadius) svg.selectAll('.bead-line') .transition() .duration(350) .attr('opacity', 0) } function wrap(selection, { width, lineHeightEm }) { selection.each(function(d, i) { let text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = lineHeightEm || 1.4, // ems y = text.attr("y"), x = text.attr("x"), dy = parseFloat(text.attr("dy")), tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em") while (word = words.pop()) { line.push(word) tspan.text(line.join(" ")) if (tspan.node().getComputedTextLength() > width) { line.pop() tspan.text(line.join(" ")) line = [word] tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word) } } }) } // hyphenate string (ex. This is the/String -> this-is-the-string) function hyphenate(str) { return str.toLowerCase().replace(/[\W_]+/g, "-") } // --- accessors -------------------------------- chart.data = function(value) { if (!arguments.length) return data data = value return chart } chart.steps = function(value) { if (!arguments.length) return steps steps = value return chart } chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.margin = function(value) { if (!arguments.length) return margin margin = value return chart } chart.beadRadius = function(value) { if (!arguments.length) return beadRadius beadRadius = value return chart } chart.backgroundColor = function(value) { if (!arguments.length) return backgroundColor backgroundColor = value return chart } chart.stripeColors = function(value) { if (!arguments.length) return stripeColors stripeColors = value return chart } chart.heightFactors = function(value) { if (!arguments.length) return heightFactors heightFactors = value return chart } return chart }4a:[] 29:{"id":"0d936b6bc1d23ad1","slug":null,"title":"Horizontal Scatterplot","thumbnail":"21cbc30992b8e0c650209b15fea6dc52bff9b9e8df115b6d5a6c60ea3f579680","access_level":"public","create_time":"$D2023-12-05T00:50:48.360Z","update_time":"$D2023-12-05T00:56:51.389Z","view_time":null,"first_public_time":"$D2023-12-05T00:50:48.360Z","has_unpublished_edits":null,"fork":{"id":"3963a1ccf6cdf18e","slug":"horizontal-scatterplot","title":"Horizontal Scatterplot","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc0ebcbef1616572","login":"joyce-tan-ws","name":"JOYCE TAN's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9a08f58c6586e25a44597f5369861bf6e884a89a31d86df71cfa84a49a2d1114","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1001,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"017535eaf4a7944b","login":"joyce-tan","name":"JOYCE TAN","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"017535eaf4a7944b","login":"joyce-tan","name":"JOYCE TAN","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"role":"editor"},{"type":"team","id":"bc0ebcbef1616572","login":"joyce-tan-ws","name":"JOYCE TAN's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9a08f58c6586e25a44597f5369861bf6e884a89a31d86df71cfa84a49a2d1114","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":"Horizontal Scatterplot","cells":[{"id":0,"value":"md`# Horizontal Scatterplot`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n

${title}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof csv = html`\n cat,Overall,US,Mexico,Brazil,China,India,Japan,UK,France,Germany,Italy\nClimate change/Environmental issues,33%,24%,35%,31%,38%,41%,27%,30%,23%,41%,35%\nHealth/Healthcare,47%,38%,51%,48%,59%,53%,43%,42%,48%,39%,51%\nEducation,49%,45%,63%,62%,51%,63%,29%,48%,33%,46%,50%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof title = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"html`