3f:null 40:["$","title",null,{"children":"Genes that make us sick (of rare diseases) | Miguel Pignatelli | Observable"}] 46:Tdb5,spiral_plot = { const svg = d3.select(DOM.svg(width, height)); const g = svg .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); g.append("rect") .attr("id", "background-canvas") .attr("x", -width / 2) .attr("y", -height / 2) .attr("width", width) .attr("height", height) .attr("fill", "#000000") .style("pointer-events", "none") const path = g.append("path") .datum(points) .attr("id", "spiral") .attr("d", spiral) .style("fill", "none") .style("stroke", "#f0f0f0") .style("stroke-width", "0.2px"); const spiralLength = path.node().getTotalLength(); const circleRadius = ((spiralLength / dataLength) - 1) / 2; const circleRadiusScale = d3.scaleLinear() // .domain([0, d3.max(data, d => d.value)]) .domain([1, 30]) .range([2, circleRadius]) .clamp(true) const positionScale = d3.scaleLinear() .domain(d3.extent(data, (d, i) => i)) .range([0, spiralLength]); const circles = g.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d,i) => { // placement calculations const posOnLine = positionScale(i); // % distance are on the spiral const coordsOnLine = path.node().getPointAtLength(posOnLine); d.cx = coordsOnLine.x; // x postion on the spiral d.cy = coordsOnLine.y; // y position on the spiral return d.cx; }) .attr("cy", d => d.cy) .attr("r", d => d.value ? circleRadiusScale(d.value) : 0) .style("fill", primaryGreen) .style("stroke", "none") .on("mouseover", showTooltip) .on("mouseout", hideTooltip) const chrLabels = g.selectAll(".chr-label") .data(chromosomeBreakpoints) .enter() .append("g") .attr("class", "chr-label") .each(d => { const posOnLine = positionScale(d.pos); const coordsOnLine = path.node().getPointAtLength(posOnLine); d.x1 = coordsOnLine.x; d.y1 = coordsOnLine.y; d.a = Math.atan2(coordsOnLine.y, coordsOnLine.x); //angle at the spiral position const guideDistance = (height / 2) - 20; const labelDistance = (height / 2) - (d.chr === "16" ? 8 : 15); d.x2 = guideDistance * Math.cos(d.a); d.y2 = guideDistance * Math.sin(d.a); d.textX = labelDistance * Math.cos(d.a); d.textY = labelDistance * Math.sin(d.a); }) const chrLabelLine = chrLabels .append("line") .attr("x1", d => d.x1) .attr("y1", d => d.y1) .attr("x2", d => d.x2) .attr("y2", d => d.y2) .attr("stroke", "white") .style("stroke-width", "0.5px"); const chrLabelText = chrLabels .append("text") .attr("x", d => d.textX) .attr("y", d => d.textY) .attr("alignment-baseline", "middle") .attr("text-anchor", d => { const degrees = d.a * 180 / Math.PI; return degrees < -90 || degrees > 90 ? "end": "start" }) .attr("transform", d => { const degrees = d.a * 180 / Math.PI; const rotate = degrees < -90 || degrees > 90 ? degrees - 180 : degrees return `rotate(${rotate}, ${d.textX}, ${d.textY})` }) .style("font-size", "0.6em") .style("fill", "white") .text(d => d.chr) // .on("mouseover", highlightChromosome) // function highlightChromosome(d) { // const chr = d.chr; // console.log(chr); // const chrPos = getChromosomePositions // const sectionStart = spiralSectionScale(chromosomeBreakpoints[]) // } return svg.node() }47:[] 44:{"id":"279545fec3d78f68","slug":"genes-that-make-us-sick-of-rare-diseases","title":"Genes that make us sick (of rare diseases)","thumbnail":"d7c40b49f267674cfbf2e4377e7cb20f91b78a6feb86906b74d71c4fd0cee5b5","access_level":"public","create_time":"$D2018-10-25T11:16:42.521Z","update_time":"$D2018-11-07T12:23:20.208Z","view_time":null,"first_public_time":"$D2018-11-07T12:22:31.007Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae0531f420dd9530","login":"emepyc","name":"Miguel Pignatelli","avatar_url":"https://avatars-next.observableusercontent.com/399a69aac54addd707392211ef9765f9847ac2ab6d69071b1aa289534661db66","tier":"starter_2024","bio":"","following":false},"version":457,"publish_version":457,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1474fb5c5876838","login":"emepyc","name":"Miguel Pignatelli","avatar_url":"https://avatars-next.observableusercontent.com/399a69aac54addd707392211ef9765f9847ac2ab6d69071b1aa289534661db66","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b1474fb5c5876838","login":"emepyc","name":"Miguel Pignatelli","avatar_url":"https://avatars-next.observableusercontent.com/399a69aac54addd707392211ef9765f9847ac2ab6d69071b1aa289534661db66","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Genes that make us sick (of rare diseases)","cells":[{"id":0,"value":"md`# Genes that make us sick (of rare diseases)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Spiral plot with circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof backgroundColor = color({\n value: \"#000000\",\n title: \"Background Color\",\n description: \"Sets the background color of the visualisation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof nodeColor = color({\n value: primaryGreen,\n title: \"Rare diseases node color\",\n description: \"Sets the color of the rare disease nodes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof chrLabelColor = color({\n value: \"#FFFFFF\",\n title: \"Chromosome label color\",\n description: \"Sets the color of the chromosome labels and lines to the spiral\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"viewof spiralColor = color({\n value: \"#f0f0f0\",\n title: \"Spiral color\",\n description: \"Sets the color of the spiral\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"changeBackgroundColor = {\n d3.select(\"#background-canvas\")\n .attr(\"fill\", backgroundColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"changeNodeColor = {\n d3.selectAll(\"circle\")\n .style(\"stroke\", nodeColor)\n .style(\"fill\", nodeColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"changeChrLabelColor = {\n const chrLabels = d3.selectAll(\".chr-label\")\n chrLabels.select(\"line\")\n .style(\"stroke\", chrLabelColor)\n chrLabels.select(\"text\")\n .style(\"fill\", chrLabelColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"changeSpirallColor = {\n d3.selectAll(\"#spiral\")\n .style(\"stroke\", spiralColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"heightValue = height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"widthValue = height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"start = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"end = 2.25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"spiralSectionScale = d3.scaleLinear()\n .range([start, end])\n .domain([0, data.length * 1500000])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"numSpirals = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"points = d3.range(start, end + 0.001, (end - start) / 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"spiral = d3.radialLine()\n .curve(d3.curveCardinal)\n .angle(theta)\n .radius(radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"theta = function(r) {\n return numSpirals * Math.PI * r\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"r = d3.min([width, height]) / 2 - 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"radius = d3.scaleLinear()\n .domain([start, end])\n .range([20, r])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"data = d3.json(\"http://127.0.0.1:13454/src/rare_diseases_buckets.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"chromosomeBreakpoints = {\n const chrBreakpoints = data.reduce((acc, chunk, pos) => {\n if (!acc.chrs[chunk.chr]) {\n return Object.assign({}, acc, {\n chrs: Object.assign({}, acc.chrs, {\n [chunk.chr]: true,\n }),\n breakpoints: [...acc.breakpoints, {\n chr: chunk.chr,\n pos,\n }],\n })\n }\n return acc\n }, {\n chrs: {},\n breakpoints: []\n })\n \n return chrBreakpoints.breakpoints\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"//chromosomeRanges = {\n// const ranges = data.reduce((acc, chunk, pos) => {\n// }, {})\n \n// return ranges\n//}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"dataLength = data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"primaryGreen=\"#66C1B0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"font = html`\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"import {showTooltip, hideTooltip}\nwith {\n tooltipMaxWidth as maxWidth,\n tooltipText as tooltipText,\n}\nfrom \"@emepyc/tooltips\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"tooltipMaxWidth = 220","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"tooltipText = function(d) {\n return `Chromosome: ${d.chr}
\nNumber of diseases: ${d.associations.length}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`## SVG Download`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"DOM.download(await serialize(spiral_plot))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`## Dedendencies`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"flatmap = require('https://bundle.run/lodash.flatmap@4.5.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"