29:null 2a:["$","title",null,{"children":"Syntenyplot with tooltips | Thomas Gotwig | Observable"}] 2f:Tfd0,chart = { const OPACITY_LOW = 0.4 const OPACITY_HIGH = 1 const STROKE_COLORS = d3.scaleOrdinal(['#2196f3', '#ff9800']) // material colors by material.io const INBOX_PADDING = 8 let STROKE_WIDTH = 3 const svg = d3.create("svg") .attr("width", 900) .attr("height", 600) const margin = {top: 20, right: 20, bottom: 30, left: 40} const WIDTH = +svg.attr('width') - margin.left - margin.right const HEIGHT = +svg.attr('height') - margin.top - margin.bottom const xScale = d3.scaleLinear().range([120, WIDTH]) const xAxis = d3.axisBottom(xScale) const yScale = d3.scaleLinear().range([HEIGHT, 0]) const yAxis = d3.axisLeft(yScale) svg .attr('class', 'dotPlot') .attr('width', WIDTH + margin.left + margin.right) .attr('height', HEIGHT + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const xMin = d3.min(data, d => d.rStart) const xMax = d3.max(data, d => d.rEnd) const xPadding = (xMax - xMin) / WIDTH * (STROKE_WIDTH + INBOX_PADDING) let yMin = -1 let yMax = 0 Array.from(data, (e) => { if (yMin === -1) { yMin = e.cStart yMax = e.cStart } yMax += e.cEnd - e.cStart }) const yPadding = (yMax - yMin) / HEIGHT * (STROKE_WIDTH + INBOX_PADDING) // x-axis xScale.domain([xMin - xPadding, xMax + xPadding]) svg.append('g') .attr('id', 'xxx') .attr('transform', 'translate(0,' + HEIGHT + ')') .call(xAxis) // x-label svg.append('text') .attr('transform', 'translate(' + (WIDTH / 2) + ' ,' + (HEIGHT + margin.top + 16) + ')') // from 10 to 16!!! .style('text-anchor', 'middle') .text(`X-Label`) // x-axis-2 svg.append('line') .attr('x1', 0) .attr('y1', 0.5) .attr('x2', WIDTH) .attr('y2', 0.5) .style('stroke', 'black') // y-axis yScale.domain([yMin - yPadding, yMax + yPadding]) svg.append('g') .attr('transform', 'translate(120)') .call(yAxis) // y-label svg.append('text') .attr('transform', 'translate(45, 280) rotate(-90)') .style('text-ancho', 'middle') .text(`Y-Label`) // y-axis-2 svg.append('line') .attr('x1', WIDTH + 0.5) .attr('y1', 0) .attr('x2', WIDTH + 0.5) .attr('y2', HEIGHT) .style('stroke', 'black') // memory for main-strokes let memory = -1 const reset = function () { memory = -1 } // main-strokes svg.selectAll('.line') .data(data) .enter() .append('line') .attr('class', 'line') .attr('x1', d => { return xScale(d.rStart) + STROKE_WIDTH / 2 }) .attr('y1', d => { if (memory === -1) { memory = d.cEnd return yScale(d.strand === '+' ? d.cStart : d.cEnd) } let dif = d.cEnd - d.cStart let out = d.strand === '+' ? memory : memory + dif memory += dif return yScale(out) }) .call(reset) .attr('x2', d => { return xScale(d.rEnd) - STROKE_WIDTH / 2 }) .attr('y2', d => { if (memory === -1) { memory = d.cEnd return yScale(d.strand === '+' ? d.cEnd : d.cStart) } let dif = d.cEnd - d.cStart let out = d.strand === '+' ? memory + dif : memory memory += dif return yScale(out) }) .attr('title', d => { const tipText = `

Contig ${' '.repeat(3)}${d.contig}

Length ${' '.repeat(2)}
${d.cEnd > d.cStart ? (d.cEnd - d.cStart).toLocaleString() : (d.cStart - d.cEnd).toLocaleString()}

Strand ${' '.repeat(3)}${d.strand}

Position ${' '.repeat(1)}${d.rStart.toLocaleString()} - ${d.rEnd.toLocaleString()}

` return tipText }) .style('stroke', d => STROKE_COLORS(d.strand)) .style('stroke-width', STROKE_WIDTH) .style('stroke-linecap', 'round') .style('opacity', OPACITY_LOW) .on('mouseover', function (element) { this.style.opacity = OPACITY_HIGH }) .on('mouseout', function (element) { this.style.opacity = OPACITY_LOW }) return svg.node(); }30:[] 2d:{"id":"098ed091132b4dfc","slug":"syntenyplot-with-tooltips","title":"Syntenyplot with tooltips","thumbnail":"186fe325c7d237b4d1bdf20a17f9b8a14b510cdc537bbe3245fe0dfe18c1cedb","access_level":"public","create_time":"$D2019-12-10T17:44:47.331Z","update_time":"$D2019-12-10T18:13:58.511Z","view_time":null,"first_public_time":"$D2019-12-10T17:57:34.348Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b0a673351e7d61b8","login":"tgotwig","name":"Thomas Gotwig","avatar_url":"https://avatars-next.observableusercontent.com/f3b97f339a350aa56f592bd415d7c8dad6427e3ebc8b0e5dec107e226448ceb9","tier":"starter_2024"},"version":40,"publish_version":40,"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":1,"collection":null,"type":"notebook","body":{"title":"Syntenyplot with tooltips","cells":[{"id":0,"value":"md`\n # Syntenyplot with tooltips\n A newer version of https://bl.ocks.org/tgotwig/2ea023d4296af7772e2797c90bb50012\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"popper = require(\"https://unpkg.com/popper.js@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"tippy = require(\"https://unpkg.com/tippy.js@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = [\n {\n 'contig': 'Ecoli_R37_1',\n 'contigLength': '2266003',\n 'rStart': 1,\n 'rEnd': 15390,\n 'cStart': 1067066,\n 'cEnd': 1082454,\n 'length': 15388,\n 'noNonIdentities': 176,\n 'strand': '+'\n },\n {\n 'contig': 'Ecoli_R37_1',\n 'contigLength': '2266003',\n 'rStart': 15391,\n 'rEnd': 20390,\n 'cStart': 786678,\n 'cEnd': 787183,\n 'length': 505,\n 'noNonIdentities': 10,\n 'strand': '-'\n },\n {\n 'contig': 'Ecoli_R37_1',\n 'contigLength': '2266003',\n 'rStart': 20390,\n 'rEnd': 30000,\n 'cStart': 262451,\n 'cEnd': 285872,\n 'length': 23421,\n 'noNonIdentities': 284,\n 'strand': '+'\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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"