29:null 2a:["$","title",null,{"children":"Taxonomic-Arrows with tooltips | Thomas Gotwig | Observable"}] 2f:Tda9,chart = { const svg = d3.create("svg") .attr("width", 900) .attr("height", 100) const margin = {top: 20, right: 0, bottom: 30, left: 40} const height = +svg.attr('height') - margin.top - margin.bottom const width = +svg.attr('width') - margin.left - margin.right // bar colors const getTypeColor = function (type) { switch (type) { case 'feature': return 'gold' case 'gene': return '#bdbdbd' // greyLighten case 'cds': return '#757575' // greyDarken case 'rrna': return '#795548' // brown case 'trna': return '#4caf50' // green case 'ncrna': return '#ff9800' // orange default: return -1 } } // bar constants const barHeight = height * 0.8 const peakWidth = 10 const peakMid = barHeight * 0.5 const opacity = 0.6 // x setup const xScale = d3.scaleLinear() .domain([data[0].start, data[0].end]) .range([0, width]) const xAxis = d3.axisBottom(xScale) svg .attr('width', width + margin.left + margin.right) // width + 2x padding .attr('height', height + margin.top + margin.bottom) // height + 2x padding // x axis svg.append('g') .attr('transform', 'translate(0,' + height + ')') .call(xAxis) const lineGenerator = d3.line() svg.selectAll('.arrow') .data(data[0].features) .enter() .append('path') .attr('class', 'arrow') .attr('title', d => `

	
				name ${' '.repeat(2)}${d.name}

				start ${' '.repeat(1)}${d.start}

				end ${' '.repeat(3)}${d.end}

`) .attr('data-placement', 'bottom') .attr('d', d => { if (d.type === 'feature' && (d.strand === 1 || d.strand === -1)) { // draw bar const points = [ [xScale(d.start), 0], [xScale(d.end), 0], [xScale(d.end), barHeight], [xScale(d.start), barHeight] ] return lineGenerator(points) } else if (d.strand === 1 && getTypeColor(d.type) !== -1) { // draw right arrow if (xScale(d.end) - xScale(d.start) <= peakWidth) { const points = [ [xScale(d.start), 0], [xScale(d.end), peakMid], [xScale(d.start), barHeight] ] return lineGenerator(points) } else { const points = [ [xScale(d.start), 0], [xScale(d.end) - peakWidth, 0], [xScale(d.end), peakMid], [xScale(d.end) - peakWidth, barHeight], [xScale(d.start), barHeight] ] return lineGenerator(points) } } else if (d.strand === -1 && getTypeColor(d.type) !== -1) { // draw left arrow if (xScale(d.end) - xScale(d.start) <= peakWidth) { console.log(true) const points = [ [xScale(d.end), 0], [xScale(d.start), peakMid], [xScale(d.end), barHeight] ] return lineGenerator(points) } else { const points = [ [xScale(d.start), peakMid], [xScale(d.start) + peakWidth, 0], [xScale(d.end), 0], [xScale(d.end), barHeight], [xScale(d.start) + peakWidth, barHeight] ] return lineGenerator(points) } } else console.log(`unknown type: "` + d.type + `" or unknown strand: "` + d.strand + `"`) // error }) .style('fill', d => { return getTypeColor(d.type) }) .style('opacity', opacity) .on('mouseover', function (element) { this.style.opacity = 1 }) .on('mouseout', function (element) { this.style.opacity = opacity }) return svg.node(); }30:[] 2d:{"id":"4bacd8ae3b42f78c","slug":"taxonomic-arrows-with-tooltips","title":"Taxonomic-Arrows with tooltips","thumbnail":"b5a59e9732bfe05ecb10f906ad2ba73b2b3f9c4ad103ad2fca71fe3263ba925f","access_level":"public","create_time":"$D2019-09-06T13:41:32.482Z","update_time":"$D2019-12-10T18:13:22.912Z","view_time":null,"first_public_time":"$D2019-09-06T14:17:47.427Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"b0a673351e7d61b8","login":"tgotwig","name":"Thomas Gotwig","avatar_url":"https://avatars-next.observableusercontent.com/f3b97f339a350aa56f592bd415d7c8dad6427e3ebc8b0e5dec107e226448ceb9","tier":"starter_2024"},"version":66,"publish_version":66,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c7ec15734980f49","login":"tgotwig","name":"Thomas Gotwig","avatar_url":"https://avatars-next.observableusercontent.com/f3b97f339a350aa56f592bd415d7c8dad6427e3ebc8b0e5dec107e226448ceb9","tier":null}],"members":[{"type":"individual","id":"0c7ec15734980f49","login":"tgotwig","name":"Thomas Gotwig","avatar_url":"https://avatars-next.observableusercontent.com/f3b97f339a350aa56f592bd415d7c8dad6427e3ebc8b0e5dec107e226448ceb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Taxonomic-Arrows with tooltips","cells":[{"id":0,"value":"md`\n# Taxonomic-Arrows with tooltips\nA newer version of https://bl.ocks.org/TGotwig/4536d70352fc1149b437f78f61361763\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"popper = require(\"https://unpkg.com/popper.js@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"tippy = require(\"https://unpkg.com/tippy.js@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = [\n {\n\t\t'start': 1000,\n\t\t'end': 20100,\n\t\t'features': [\n\t\t\t{\n\t\t\t\t'name': 'A',\n\t\t\t\t'desc': 'xyz in detail.',\n\t\t\t\t'start': 1000,\n\t\t\t\t'end': 1900,\n\t\t\t\t'strand': 1,\n\t\t\t\t'type': 'feature'\n\t\t\t},\n\t\t\t{\n\t\t\t\t'name': 'B',\n\t\t\t\t'desc': 'xyz in detail.',\n\t\t\t\t'start': 2000,\n\t\t\t\t'end': 2100,\n\t\t\t\t'strand': 1,\n\t\t\t\t'type': 'gene'\n\t\t\t},\n\t\t\t{\n\t\t\t\t'name': 'C',\n\t\t\t\t'desc': 'xyz in detail.',\n\t\t\t\t'start': 2500,\n\t\t\t\t'end': 6500,\n\t\t\t\t'strand': 1,\n\t\t\t\t'type': 'cds'\n\t\t\t},\n\t\t\t{\n\t\t\t\t'name': 'D',\n\t\t\t\t'desc': 'mitf',\n\t\t\t\t'start': 7000,\n\t\t\t\t'end': 9000,\n\t\t\t\t'strand': -1,\n\t\t\t\t'type': 'rrna'\n\t\t\t},\n\t\t\t{\n\t\t\t\t'name': 'E',\n\t\t\t\t'desc': 'mitf',\n\t\t\t\t'start': 9000,\n\t\t\t\t'end': 13000,\n\t\t\t\t'strand': -1,\n\t\t\t\t'type': 'trna'\n\t\t\t},\n\t\t\t{\n\t\t\t\t'name': 'F',\n\t\t\t\t'desc': 'mitf',\n\t\t\t\t'start': 14000,\n\t\t\t\t'end': 20000,\n\t\t\t\t'strand': 1,\n\t\t\t\t'type': 'ncrna'\n\t\t\t}\n\t\t]\n\t}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"tippy('[title]', {\n content: e => e.attributes.title.nodeValue,\n arrow: true,\n size: 'large',\n animation: 'scale',\n placement: 'right',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"