29:null 2a:["$","title",null,{"children":"MAGs Haddock / The Gully paper | Julien Tremblay | Observable"}] 2f:Tbe5,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) svg.append("g") .call(xAxis) //X axis title svg.append("text") .style("font", "16px Calibri") .attr("transform", "translate(" + (width/2) + " ," + (height) + ")") .style("text-anchor", "middle") .text("t-SNE x"); svg.append("g") .call(yAxis) // Y axis title svg.append("text") .style("font", "16px Calibri") .attr("transform", "rotate(-90)") .attr("y",100 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("t-SNE y"); let circles = svg.selectAll(".dot") return Object.assign(svg.node(), { update(data2) { const t = svg.transition().duration(750); circles = circles .data(data2, d => d.contig_id) .join( enter => enter.append("circle") .attr("cx", function (d) { return xScale(d.posx); } ) .attr("cy", function (d) { return yScale(d.posy); } ) .style("stroke", "black") .style("stroke-width", 0.5) .style("fill", function(d) {if(colorKey == "gc_perc"){ return zScaleContinuous(d[colorKey]);}else{return zScale(d[colorKey]);}}) .call(circles => circles.transition(t) .attr("r", function (d) { if(circleSize == "byContigSize"){ return (Math.sqrt(d.length)/25);}else{ return 1.5;}})), update => update, exit => exit .call(circles => circles.transition(t).remove() .attr("r", 0)) ) .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut ); } }); /*---------------------------- Tooptip ------------------------------*/ function nodeMouseOver(event, d){ // Get the toolTip, update the position, and append the inner html depending on your content // I tend to use template literal to more easily output variables. toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(`${d.MAG_id}
${d.contig_id}
${d.length}
${d.kingdom}
${d.phylum}
${d.class}
${d.order}
${d.family}
${d.genus}
${d.Species}
`); // Optional cursor change on target d3.select(event.target).style("cursor", "pointer"); // Optional highlight effects on target d3.select(event.target) .transition() .attr('stroke', '#A8234E') .attr('stroke-width', 3); } function nodeMouseOut(event, d){ // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip // Optional cursor change removed d3.select(event.target).style("cursor", "default"); // Optional highlight removed d3.select(event.target) .transition() .attr('stroke', '#fff') .attr('stroke-width', 0); } }30:[{"id":"acf24904be08e298e5a9296c31e505f0b8c65299b4f67c759a078d987373fc3971c913c2cee6f6c4abf7fd3c3b7db5c57d9402bf956db01ea6e9e19d6b1eceb4","href":"https://static.observableusercontent.com/files/acf24904be08e298e5a9296c31e505f0b8c65299b4f67c759a078d987373fc3971c913c2cee6f6c4abf7fd3c3b7db5c57d9402bf956db01ea6e9e19d6b1eceb4","name":"parsed_bins3_high_depth.tsv","type":"text/tab-separated-values","lastModified":1620337059662.564,"size":4008798}] 2d:{"id":"d31730db60edc486","slug":null,"title":"MAGs Haddock / The Gully paper","thumbnail":"b27c64a81e9374521bcd50f01c9015ce555fc8cbf6fb2a3e45ad51b292c8ba84","access_level":"public","create_time":"$D2021-05-06T21:37:01.738Z","update_time":"$D2021-05-31T15:37:10.704Z","view_time":null,"first_public_time":"$D2023-04-08T21:11:37.578Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6c8628fb9e9d6e10","login":"jtremblay","name":"Julien Tremblay","avatar_url":"https://avatars-next.observableusercontent.com/b36ee3419311f3072e80cb191ea30e4ba425058b1c6b0a7c80651c9afa159a2e","tier":"starter_2024"},"version":445,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7eaedc780e334fc3","login":"jtremblay","name":"Julien Tremblay","avatar_url":"https://avatars-next.observableusercontent.com/b36ee3419311f3072e80cb191ea30e4ba425058b1c6b0a7c80651c9afa159a2e","tier":null}],"members":[{"type":"individual","id":"7eaedc780e334fc3","login":"jtremblay","name":"Julien Tremblay","avatar_url":"https://avatars-next.observableusercontent.com/b36ee3419311f3072e80cb191ea30e4ba425058b1c6b0a7c80651c9afa159a2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"MAGs Haddock / The Gully paper","cells":[{"id":0,"value":"md`# MAGs Haddock / The Gully paper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"viewof selectedMAGs = Checkbox(listOfMAGs, {sort:false,label: \"Select MAGs to show on the display\", value:listOfMAGs})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"{\n if(colorKey == \"gc_perc\"){\n return legend({\n color: d3.scaleSequentialSqrt([d3.min(distinct), d3.max(distinct)], d3.interpolateTurbo),\n title: \"GC %\"\n })\n }else{\n return swatches({\n color: d3.scaleOrdinal(distinct, fillColors),\n columns: \"180px\"\n })\n }\n//d3.schemeTableau10\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"chart.update(data2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"viewof colorKey = Select([\"kingdom\", \"phylum\", \"class\", \"gc_perc\"], {label: \"Select variable for color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"viewof circleSize = Select([\"flat\", \"byContigSize\"], {label: \"Select size of circles on t-SNE figure\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"height = 650 - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"margin = ({top: 30, right: 110, bottom: 60, left: 100});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"selectedMAGs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"data2 = tmpData.filter(function(d){\n return selectedMAGs.indexOf(d.MAG_id) > -1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"colorKey","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"distinct = distinctBy(colorKey, data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"listOfMAGs = distinctBy(\"MAG_id\", data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"/*return unique values of the given key - for instance if key is 'kingdom' will return k__Bacteria, k__Archaea, k__Viruses, etc.*/\nfunction distinctBy(key, array) {\n var keys = array.map(function (value) { return value[key]; });\n return keys.filter(function (value, index, a) { return a.indexOf(value) === index; });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"zScale = d3.scaleOrdinal()\n .range(fillColors).domain(distinct);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"zScaleContinuous = d3.scaleSequentialSqrt([d3.min(distinct), d3.max(distinct)], d3.interpolateTurbo)\n //.range(fillColors).domain(distinct);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"d3.scaleSequentialSqrt([0, 100], d3.interpolateTurbo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"fillColors = [\n \"#0000CD\", \"#00FF00\", \"#FF0000\", \"#808080\", \"#000000\", \"#B22222\", \"#DAA520\",\n \"#DDA0DD\", \"#FF00FF\", \"#00FFFF\", \"#4682B4\", \"#E6E6FA\", \"#FF8C00\", \"#80008B\", \"#8FBC8F\", \n \"#00BFFF\", \"#FFFF00\", \"#808000\", \"#FFCCCC\", \"#FFE5CC\", \"#FFFFCC\", \"#E5FFCC\", \"#CCFFCC\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.posx)).nice()\n //.domain(-20,20)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"yScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.posy)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale).ticks(width / 80))\n //.call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.posx))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale))\n //.call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.posy))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"tmpData = parseData2(parseData(d3.tsvParse(await FileAttachment(\"parsed_bins3_high_depth.tsv\").text())))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"data = tmpData//parseData2(tmpData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"function parseData2(e){\n e.forEach(function(d){\n d.Completness = +d.Completness;\n d.Contamination = +d.Contamination;\n d.gc_perc = +d.gc_perc;\n d.length = +d.length;\n })\n return e\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"function parseData(d){\n var i;\n for(i = 0; i < d.length; i++){\n d[i].posx = +d[i]['D1'];\n d[i].posy = +d[i]['D2'];\n delete d[i].D1;\n delete d[i].D2;\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"import {Input, Range, bind, html} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"