2b:null 2c:["$","title",null,{"children":"Open TG-GATEs Histopathology | fionaebi | Observable"}] 31:T473,chart = { // Create svg element const svg = d3.create("svg") //sets the viewing window for the svg .attr("viewBox", [0, 0, width, margin.top+height_upper+margin.bottom]) .style('border', '1px dotted #999'); // <-- A dotted border shows the margin; // This creates the background that can be clicked on to go UP! svg.append("rect") .attr("class", "background") .attr("fill", "none") // .attr("fill", "#fe9929") .attr("pointer-events", "all") .attr("width", width+margin.left+width+margin.right) .attr("height", margin.top+height_upper+margin.bottom) .attr("cursor", "pointer") .on("click", (event, d) => up(svg, data)); // // Create background colour behind upper heatmap // svg.append("rect") // .attr("class", "plot_background") // .attr("x", margin.left*1.8) // .attr("y", margin.top) // .attr("width", width_upper ) // .attr("height", height_upper ) // .style("fill", "#f0f0f0") // Create the heatmap chart that is clickable to drill down upper_heatmap(svg, data, ".enter"); // return SVG DOM element return svg.node() }32:Te03,// Creates the upper heatmap. function upper_heatmap(svg, d, selector) { const g = svg.insert("g", selector) .attr("class", "enter") const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('visibility', 'hidden') /////////////////////////////////////////////// // Add x_axis and y_axis to plot g.append("g").style("font", "12px sans-serif") .call(xAxis_upper).attr("transform",`translate( ${margin.left}, ${margin.top+height_upper})`) //position xAxis at bottom g.append("g").style("font", "12px sans-serif") .call(xAxis2_upper).attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis2 at top g.append("g").style("font", "12px sans-serif") .call(yAxis_upper).attr("transform",`translate( ${margin.left}, ${margin.top})`) //position yAxis g.append("g").style("font", "12px sans-serif") .call(yAxis2_upper).attr("transform",`translate( ${margin.left+width_upper}, ${margin.top})`) //position yAxis2 /////////////////////////////////////// // SVG 'rect' elements for each cell in the heatmap const upper_cells = g.selectAll("rect") .data(data, function(d) { if (ont === "MC") {return d.MC+':'+d.time_days} else if (ont === "UBERON") {return d.UBERON+':'+d.time_days} else if (ont === "CL") {return d.CL+':'+d.time_days} }) .join("g") // Specify the data within each cell of the heatmap: upper_cells.append("rect") .attr("x", function(d) { if (ont === "MC") {return xlabels_upper(d.MC) } else if (ont === "UBERON") {return xlabels_upper(d.UBERON) } else if (ont === "CL") {return xlabels_upper(d.CL) } }) .attr("y", function(d) { return ylabels_upper(d.parent_prefname_chemblid) }) .attr("width", xlabels_upper.bandwidth() ) .attr("height", ylabels_upper.bandwidth() ) .style("fill", function(d) { return myColor(d.score)} ) .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position heatmap squares .attr("cursor", "pointer") //Creates pointer // Add the mouseover and clickable url link - see example at https://observablehq.com/d/7430d08ce5b1283d .on("mouseover", function(e, d){ d3.select(this).transition() .attr("stroke", "black") .attr("stroke-width", 2.0) }) .on("mousemove", function(e, d){ return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Organ: ${d.tissue} Hpath Ontology (MC_ID): ${d.mc_term_id} UBERON Ontology (ID): ${d.uberon_term_id} CL Ontology (CL_ID) : ${d.cl_term_id} Original hpath term: ${d.Term} Click for detailed view of ${d.parent_prefname_chemblid}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible"); }) .on("mouseout", function(e, d){ d3.select(this).transition() .attr("stroke", "none") .style("fill", function(d) { return myColor(d.score)} ) //Return to normal colour return tooltip.html(``).style("visibility", "hidden"); }) // Drill down to detailed data for one compound that is used in the lower_heatmap. Remember to hide tooltip. .on("click", (event, d) => { var cmpd = d.parent_prefname_chemblid //Select the compound e.g. 'ROSIGLITAZONE_CHEMBL121' return tooltip.html(``).style("visibility", "hidden") & down(svg, d, cmpd); }) return g; }33:T217f,// Creates the lower heatmap. function lower_heatmap(svg, d, selector, cmpd) { // Insert new heatmap const g = svg.insert("g", selector) .attr("class", "enter") // .attr("transform", `translate(0,${margin.top})`) const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') // .style('position', 'absolute') .style('visibility', 'hidden') /////////////////////////////////////////////// //Filter the data for a specific compound: const data2 = FilterData_lower(datafile2, cmpd, organ) // const data2 = datafile2.filter(d => d.parent_prefname_chemblid === 'ROSIGLITAZONE_CHEMBL121') //'FLUOXETINE_CHEMBL41' // Row labels -> for drilled down detailed view of an individual compound const Time_days = Array.from(new Set(data2.map(d => d.time_days))).sort(function(a, b){ return a - b; })//Numerical sort! // Build X scale for the lower chart, ie drilled_down data: Band scales split a pixel range into equal-sized bands! const height_lower = Time_days.length * 20 // Specify individual ontology terms as Column labels const ontology = Array.from(new Set(d3.map(data2, function(d) { if (ont === "MC") {return d.mc_term_dose_doselevel } else if (ont === "UBERON") {return d.uberon_term_dose_doselevel } else if (ont === "CL") {return d.cl_term_dose_doselevel } } ))) const width_lower = ontology.length * 15 /////////////////////////////////////////////// // Build X scale for drilled_down data: Band scales split a pixel range into equal-sized bands! const xlabels_lower = d3.scaleBand().range([ 0, width_lower ]).domain(ontology).padding(0.05) // Build Y scale for the lower chart, ie drilled_down data: Band scales split a pixel range into equal-sized bands! const ylabels_lower = d3.scaleBand().range([ 0, height_lower ]).domain(Time_days).padding(0.05); // Build x-axis at bottom of the plot (for the lower chart, ie drilled_down data) const xAxis_lower = g => g .call(d3.axisBottom(xlabels_lower).tickSize(5) .tickFormat( function(x) { return x.split("_").slice(1,) } ) ) //tickFormat assigns tick labels!!. .selectAll("text").style("text-anchor", "start").attr("dx", "1.0em").attr("dy", "-0.5em").attr("transform", "rotate(90)") // Build x-axis at top of the plot (for the lower chart, ie drilled_down data) const xAxis2_lower = g => g .call(d3.axisBottom(xlabels_lower).tickSize(5) .tickFormat( function(x) { return x.split("_").slice(0,1) } ) ) //tickFormat assigns tick labels!!. .selectAll("text").style("text-anchor", "end").attr("dx", "-1.0em").attr("dy", "0em").attr("transform", "rotate(90)") .call(g => g.select(".domain").remove()) // Build y-axis at left of the plot (for the lower chart, ie drilled_down data) const yAxis_lower = g => g // .attr("class", "y-axis") .call(d3.axisLeft(ylabels_lower).tickSize(5)) .append('text') .attr("dx", "-2.0em") .attr("dy", "1.0em") .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '20px') .attr('font-weight', 'bold') .text('Time (days)') .call(g => g.select(".domain").remove()) // Build y-axis at right of the plot (for the lower chart, ie drilled_down data) const yAxis2_lower = g => g // .attr("class", "y-axis") .call(d3.axisRight(ylabels_lower).tickSize(5) .tickFormat( function(x) { return "" } ) ) //tickFormat assigns tick labels!!. ) // .append('text').attr('transform', `translate( -${margin.right*0.8}, 0), rotate(90)`) // .attr('text-anchor', 'start').attr('fill', 'black').attr('font-size', '20px').attr('font-weight', 'bold').text('Time (days)') // .call(g => g.select(".domain").remove()) /////////////////////////////////////////////// // Add x_axis and y_axis to plot g.append("g") .style("font", "12px sans-serif") .call(xAxis_lower) // .attr("transform",`translate( ${margin.left}, ${margin.top+height_lower})`) //position xAxis .attr("transform",`translate( ${margin.left}, ${margin.top+height_lower})`) //position xAxis at bottom // .append('text') // Add x-axis title 'text' element // .attr("dx", "-1.0em") // .attr("dy", "-2.0em") // .attr('text-anchor', 'end') // .attr('fill', 'black') // .attr('font-size', '20') // .attr('font-weight', 'bold') // .text(ont); g.append("g") .style("font", "12px sans-serif") .call(xAxis2_lower) // .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis2 at top .append('text') // Add x-axis2 title 'text' element .attr("dx", "-1.0em") .attr("dy", "-2.0em") .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '20') .attr('font-weight', 'bold') .text(ont); g.append("g") .style("font", "12px sans-serif") .call(yAxis_lower) .attr("transform",`translate( ${margin.left}, ${margin.top})`); //position yAxis g.append("g") .style("font", "12px sans-serif") .call(yAxis2_lower) .attr("transform",`translate( ${margin.left + width_lower}, ${margin.top})`); //position yAxis2 //Include compound label on plot g.append('text') .attr('class', 'year') .attr('text-anchor', 'start') .attr('x', margin.left*0.2 ) .attr('y', margin.top*0.1 ) //.attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 25) //.attr("transform", "rotate(-90)") .text( cmpd ) //Compound_name column /////////////////////////////////////////////// // SVG 'rect' elements for each cell in the heatmap const lower_cells = g.selectAll("rect") .data(data2, function(d) { if (ont === "MC") {return d.mc_term_dose_doselevel+':'+d.time_days} else if (ont === "UBERON") {return d.uberon_term_dose_doselevel+':'+d.time_days} else if (ont === "CL") {return d.cl_term_dose_doselevel+':'+d.time_days} }) .join("g") // Specify the data within each cell of the heatmap: lower_cells.append("rect") .attr("x", function(d) { if (ont === "MC") {return xlabels_lower(d.mc_term_dose_doselevel) } else if (ont === "UBERON") {return xlabels_lower(d.uberon_term_dose_doselevel) } else if (ont === "CL") {return xlabels_lower(d.cl_term_dose_doselevel) } }) .attr("y", function(d) { return ylabels_lower(d.time_days) }) .attr("width", xlabels_lower.bandwidth() ) .attr("height", ylabels_lower.bandwidth() ) .style("fill", function(d) { return myColor(d.score)} ) .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position heatmap squares .attr("cursor", "pointer") // Add the mouseover and clickable url link - see example at https://observablehq.com/d/7430d08ce5b1283d .on("mouseover", function(e, d){ d3.select(this).transition().duration(duration) .attr("stroke", "black") //outline around heatmap cell .attr("stroke-width", 2.0) }) .on("mousemove", function(e, d){ return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Time (days): ${d.time_days} Dose, Dose Level: ${d.dose_doselevel} Organ: ${d.tissue} Hpath Ontology (MC_ID): ${d.mc_term_id} UBERON Ontology (ID): ${d.uberon_term_id} CL Ontology (CL_ID) : ${d.cl_term_id} Organismal Ontology (NCBITaxon) : Rattus norvegicus_NCBITaxon:10116 Original hpath term: ${d.Term} Test values : ${d.test_std_values} Is test value outside control range?: ${d.is_value_outside_normal_range} Control values: ${d.control_std_values} Min: ${d.min_control_value} Max: ${d.max_control_value} Click to visit ChEMBL activity_id ${d.activity_id}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible"); }) .on("mouseout", function(e, d){ d3.select(this).transition() .attr("stroke", "none") return tooltip.html(``).style("visibility", "hidden"); }) .on("click", function(e, d) { //Move to upper heatmap. Remember to hide tooltip. d3.select(this).transition() return tooltip.html(``).style("visibility", "hidden") & window.open(d.activity_id_url); }) return [g, width_lower, height_lower] }34:T474,// Filter the data for a specific compound, AND exclude rows with missing ontology data or null score, AND sort data (ie hierarchical cluster) per ontology result: // Then SORT the data, first by organ, (and then if organ gives identical term!), sort by MC_index/UBERON_index/CL_index. data = { //MC if (ont === "MC" ) {return datafile1.filter(d => Cmpd_names.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.MC !== '' & d.score !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.MC_index-b.MC_index) }) } //UBERON else if (ont === "UBERON" ) {return datafile1.filter(d => Cmpd_names.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.UBERON !== '' & d.score !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.UBERON_index-b.UBERON_index) }) } //CL else if (ont === "CL" & organ !== "All" ) {return datafile1.filter(d => Cmpd_names.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.CL !== '' & d.score !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }35:T7cd,// Row labels -> for top level summary view of all compounds (exclude null rows) // Cmpd_names = { // if (yaxis_selection == "ABCD") {return Array.from(axis_labels.map(d => d.A).concat(axis_labels.map(d => d.B)).concat(axis_labels.map(d => d.C)).concat(axis_labels.map(d => d.D)).filter(function(d){return d != ""})) } // if (yaxis_selection == "EFGH") {return Array.from(axis_labels.map(d => d.E).concat(axis_labels.map(d => d.F)).concat(axis_labels.map(d => d.G)).concat(axis_labels.map(d => d.H)).filter(function(d){return d != ""})) } // if (yaxis_selection == "IJKL") {return axis_labels.map(d => d.I).concat(axis_labels.map(d => d.J)).concat(axis_labels.map(d => d.K)).concat(axis_labels.map(d => d.L)).filter(function(d){return d != ""}) } // if (yaxis_selection == "MNOP") {return axis_labels.map(d => d.M).concat(axis_labels.map(d => d.N)).concat(axis_labels.map(d => d.O)).concat(axis_labels.map(d => d.P)).filter(function(d){return d != ""}) } // if (yaxis_selection == "QRST") {return axis_labels.map(d => d.Q).concat(axis_labels.map(d => d.R)).concat(axis_labels.map(d => d.S)).concat(axis_labels.map(d => d.T)).filter(function(d){return d != ""}) } // if (yaxis_selection == "UVWX") {return axis_labels.map(d => d.U).concat(axis_labels.map(d => d.V)).concat(axis_labels.map(d => d.W)).concat(axis_labels.map(d => d.X)).filter(function(d){return d != ""}) } // if (yaxis_selection == "YZ") {return axis_labels.map(d => d.Y).concat(axis_labels.map(d => d.Z)).filter(function(d){return d != ""}) } // if (yaxis_selection == "[0-9] & Symbol") {return axis_labels.map(d => d.Numbers_Symbols).filter(function(d){return d != ""}) } // else {return yaxis_selection } // } // // Choose multiple selections of GROUPS of compounds: Not yet sure how to make this generic... E.g. // // if (yaxis_selection[0] == "ABCD" & yaxis_selection[1] == "EFGH") {return Array.from(axis_labels.map(d => d.A).concat(axis_labels.map(d => d.F)).filter(function(d){return d != ""})) }36:T475,// Filter the data for a specific compound, AND exclude rows with missing ontology data or null score, AND sort data (ie hierarchical cluster) per ontology result: // Then SORT the data, first by organ, (and then if organ gives identical term!), sort by MC_index/UBERON_index/CL_index. function FilterData_lower( inputdata, cmpd, organ) { //MC if (ont === "MC" ) {return inputdata.filter(d => d.parent_prefname_chemblid === cmpd & organ.includes(d.tissue) & d.MC !== '' & d.score !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.MC_index-b.MC_index) }) } //UBERON else if (ont === "UBERON" ) {return inputdata.filter(d => d.parent_prefname_chemblid === cmpd & organ.includes(d.tissue) & d.UBERON !== '' & d.score !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.UBERON_index-b.UBERON_index) }) } //CL else if (ont === "CL" ) {return inputdata.filter(d => d.parent_prefname_chemblid === cmpd & organ.includes(d.tissue) & d.CL !== '' & d.score !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }37:T740,//Adapted from https://observablehq.com/@d3/color-legend //Note for vertical color legend - see https://observablehq.com/@slowkow/vertical-color-legend function legend({ color, title, tickSize = 6, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block") let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Ordinal x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; svg.append("g") .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .attr("font-size", "14") // Legend labels .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop-25) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "16") //Legend title .attr("class", "title") .text(title)); return svg.node(); }38:[{"id":"c9ab6b919774beaf9c6dc67ea13dd68621418216ecc93eb69fbfd7f88ab48a8c7e367d9e70addd39b76b3d6f717123288444ef60511a82897a8ee79ef5630fea","href":"https://static.observableusercontent.com/files/c9ab6b919774beaf9c6dc67ea13dd68621418216ecc93eb69fbfd7f88ab48a8c7e367d9e70addd39b76b3d6f717123288444ef60511a82897a8ee79ef5630fea","name":"TG_Pathology_condensed@2.csv","type":"text/csv","lastModified":1643620007286.595,"size":201232},{"id":"76d8d07ebb9d791d38972816da39a1d47ba7a9df10f759909982a5c65732a88e2c3d91ac17bc50f2eb852a77c0686444558fcdd99f84d45fdac3a7ba1bb13cb5","href":"https://static.observableusercontent.com/files/76d8d07ebb9d791d38972816da39a1d47ba7a9df10f759909982a5c65732a88e2c3d91ac17bc50f2eb852a77c0686444558fcdd99f84d45fdac3a7ba1bb13cb5","name":"TG_Pathology_alldrugs@2.csv","type":"text/csv","lastModified":1643620023681.473,"size":4450981}] 2f:{"id":"35606f85e0347280","slug":"tg-histopathology","title":"Open TG-GATEs Histopathology","thumbnail":"d1f90099ec2e84cd19314245e73ab2232f3976aeec46ea00a95eade9a90fc30d","access_level":"public","create_time":"$D2022-01-28T11:48:46.174Z","update_time":"$D2022-02-03T10:35:16.352Z","view_time":null,"first_public_time":"$D2022-02-01T14:27:48.742Z","fork":{"id":"ae4f10b58f469940","slug":"dm-histopathology","title":"DrugMatrix Histopathology","owner":{"id":"977d7da73b7bbe57","login":"fionaebi","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"977d7da73b7bbe57","login":"fionaebi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/82275629f7aa88eb61a8d2df4cdbfc88d4de1578031eae0e788db19f7742fd02","tier":"starter_2024"},"version":7166,"publish_version":7166,"role":null,"authored":false,"authors":[{"type":"individual","id":"473bc0dbbbe1316f","login":"fionaebi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/82275629f7aa88eb61a8d2df4cdbfc88d4de1578031eae0e788db19f7742fd02","tier":null}],"members":[{"type":"individual","id":"473bc0dbbbe1316f","login":"fionaebi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/82275629f7aa88eb61a8d2df4cdbfc88d4de1578031eae0e788db19f7742fd02","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Open TG-GATEs Histopathology","cells":[{"id":0,"value":"md`# Open TG-GATEs Histopathology`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"md`[ChEMBL](https://www.ebi.ac.uk/chembl/) > [toxicity datasets](https://observablehq.com/@fionaebi/landing-page-for-toxicity-datasets) > [Open TG-GATEs histopathology](document.baseURI)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2732,"value":"1. Drill down by clicking on a heatmap cell\n2. Click on background to go up or reset\n4. Choose one or multiple compound(s) or organ(s), and choose an ontology","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2653,"value":"viewof Cmpd_names = Inputs.select( cmpd_list, {value: cmpd_list.slice(-20,), label: \"Choose compound(s)\", multiple: 5, width: 400})\n//cmpd_list.slice(8,28)\n//\"multiple:5\" specifies that 5 options can be displayed!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7165,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5221,"value":"viewof organ = Inputs.select( Array.from(new Set(datafile1.map(d => d.tissue))) , {value: Array.from(new Set(datafile1.map(d => d.tissue))).slice(1,2), label: \"Choose organ(s)\", multiple:2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5166,"value":"viewof ont = Inputs.select([\"MC\", \"UBERON\",\"CL\"], {value: \"MC\", label: \"Choose ontology\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3379,"value":"bar = {\n \n // Create svg element\n const svg = d3.create(\"svg\")\n //sets the viewing window for the svg\n .attr(\"viewBox\", [0, 0, (width+margin.left+margin.right), (margin.top)*0.3])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 40)\n // .style('border', '1px dotted #999'); // <-- A dotted border shows the margin;\n \n //Append the legend\n key(svg)\n\n // return SVG DOM element \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"// Creates function to drill down when an individual heatmap cells is clicked\nfunction down(svg,d,cmpd) {\n\n // Rebind the current node to the background.\n svg.select(\".background\").datum(d);\n\n ///////////////////////////////////////////////\n // Mark any currently-displayed heatmap cells as exiting.\n const exit = svg.selectAll(\".enter\")\n .attr(\"class\", \"exit\")\n .remove();\n \n ///////////////////////////////////////////////\n // Enter the new heatmap for the clicked-on data - these are immediately visible.\n const [enter, width_lower_plot, height_lower_plot] = lower_heatmap(svg, d, \".enter\", cmpd)\n\n //resize viewbox for lower plot\n svg.attr(\"viewBox\", [0, 0, width, margin.top+height_lower_plot+margin.bottom])\n .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"))\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"//Creates function to go to upper_heatmap when background is clicked\nfunction up(svg,d) {\n // if (!d.children || d3.active(svg.node())) return;\n\n // Rebind the current node to the background.\n svg.select(\".background\").datum(d);\n \n ///////////////////////////////////////////////\n // Mark any currently-displayed heatmap cells as exiting.\n const exit = svg.selectAll(\".enter\")\n .attr(\"class\", \"exit\")\n .remove(); \n \n ///////////////////////////////////////////////\n // Enter the new heatmap for the clicked-on data - these are immediately visible.\n const enter = upper_heatmap(svg, d, \".enter\") \n\n //resize viewbox for upper plot\n svg.attr(\"viewBox\", [0, 0, width, margin.top+height_upper+margin.bottom]) \n .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"));\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6123,"value":"md`## Input data from files`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"datafile1 = {\n try {\n return await FileAttachment(\"TG_Pathology_condensed@2.csv\").csv();\n } catch (e) {\n throw new Error(`Something went wrong: ${e.message}`)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"datafile2 = {\n try {\n return await FileAttachment(\"TG_Pathology_alldrugs@2.csv\").csv();\n } catch (e) {\n throw new Error(`Something went wrong: ${e.message}`)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`## Data for upper chart, ie the high level summary data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"height_upper = Cmpd_names.length * 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6551,"value":"width_upper = Data_types.length * 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7022,"value":"cmpd_list = Array.from(new Set(datafile1.map(d => d.parent_prefname_chemblid))).sort(d3.ascending)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7160,"value":"cmpd_list.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6097,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3958,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"// Column labels -> for top level summary view of all compounds\n// Data_types = data.map(d => d.MC).filter(function(d){return d != \"\"})\n\nData_types = { \n if (ont === \"MC\" ) {return Array.from(new Set(data.map(d => d.MC).filter(function(d){return d != \"\"}))) }\n else if (ont === \"UBERON\" ) {return Array.from(new Set(data.map(d => d.UBERON).filter(function(d){return d != \"\"}))) }\n else if (ont === \"CL\" ) {return Array.from(new Set(data.map(d => d.CL).filter(function(d){return d != \"\"}))) }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"// Build X scale for the upper chart, ie summary top-level data: Band scales split a pixel range into equal-sized bands!\nxlabels_upper = d3.scaleBand()\n.range([ 0, width_upper ])\n.domain(Data_types)\n.padding(0.05);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"// Build Y scale for the upper chart, ie summary top-level data: Band scales split a pixel range into equal-sized bands!\nylabels_upper = d3.scaleBand()\n.range([ 0, height_upper ])\n.domain(Cmpd_names)\n.padding(0.05);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"// Build x-axis at bottom of the plot (for the upper chart, ie summary top level data)\nxAxis_upper = g => g\n .attr(\"class\", \"x-axis\")\n // Position and populate the x-axis: \n .call(d3.axisBottom(xlabels_upper).tickSize(5)\n .tickFormat( function(x) { return \"\" } ) ) //tickFormat assigns tick labels!!. \n // // Rotate x-labels:\n // .call(g => g.selectAll(\"text\")\t\n // .style(\"text-anchor\", \"end\")\n // .attr(\"dx\", \"-0.50em\")\n // .attr(\"dy\", \"0.20em\")\n // .attr(\"transform\", \"rotate(-90)\"))\n // // Add x-axis title: \n // .call(g => g.append(\"text\") \n // .attr('text-anchor', 'start')\n // .attr('fill', 'black')\n // .attr('font-size', '20')\n // .attr('font-weight', 'bold')\n // .attr('x', (width-margin.left-margin.right)/2 + margin.left )\n // .attr('y', margin.bottom*0.5)\n // .text(ont))\n // .call(g => g.select(\".domain\").remove());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"// Build x-axis at top of the plot (for the upper chart, ie summary top level data)\nxAxis2_upper = g => g\n .attr(\"class\", \"x-axis\")\n // Position and populate the second x-axis: \n .call(d3.axisTop(xlabels_upper).tickSize(5))\n // Rotate x-labels:\n .call(g => g.selectAll(\"text\")\t\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-0.5em\")\n .attr(\"dy\", \"1em\")\n .attr(\"transform\", \"rotate(90)\"))\n // Add x-axis2 title:\n .call(g => g.append('text')\n .attr(\"dx\", \"-0.5em\")\n .attr(\"dy\", \"-2.0em\")\n .attr('text-anchor', 'end')\n .attr('fill', 'black')\n .attr('font-size', '20')\n .attr('font-weight', 'bold')\n .text(ont) )\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"// Build y-axis at left of the plot (for the upper chart, ie summary top level data)\nyAxis_upper = g => g\n .attr(\"class\", \"y-axis\")\n // Position and populate the y-axis: \n .call(d3.axisLeft(ylabels_upper).tickSize(5))\n // Add y-axis title:\n .append('text')\n .attr(\"dx\", \"-0.5em\")\n .attr(\"dy\", \"-0.5em\")\n .attr('text-anchor', 'end')\n .attr('fill', 'black')\n .attr('font-size', '20px')\n .attr('font-weight', 'bold')\n .text('Parent Compound')\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"// Build y-axis at right of the plot (for the upper chart, ie summary top level data)\nyAxis2_upper = g => g\n .attr(\"class\", \"y-axis\")\n // Position and populate the y-axis: \n .call(d3.axisRight(ylabels_upper).tickSize(5)\n .tickFormat( function(x) { return \"\" } ) ) //tickFormat assigns tick labels!!. )\n // // Add y-axis title:\n // .append('text')\n // .attr('transform', `translate( ${margin.right*1.5}, ${(margin.top+height_upper+margin.bottom)/2}), rotate(-90)`)\n // .attr('text-anchor', 'middle')\n // .attr('fill', 'black')\n // .attr('font-size', '20px')\n // .attr('font-weight', 'bold')\n // .text('Compound')\n // .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1041,"value":"md`## Data for lower chart, ie the detailed data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5467,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"md`## Other input for colour, duration of transition, legend, margin etc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"// Build color scale as discrete colours https://colorbrewer2.org/#type=diverging&scheme=PRGn&n=5\n// Alternative is https://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=5 incl yellow middle colour\nmyColor = d3.scaleLinear()\n // .range([\"#7b3294\", \"#c2a5cf\", \"#f7f7f7\", \"#a6dba0\", \"#008837\"])\n // .range([\"#d7191c\", \"#fdae61\", \"#ffffbf\", \"#abd9e9\", \"#2c7bb6\"]) //neg is red colour' pos is blue colour\n .range([ \"#2c7bb6\", \"#abd9e9\", \"#ffffbf\", \"#fdae61\", \"#d7191c\"]) //neg is blue colour; pos is red colour\n .domain([-2,-1,0,1,2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"duration = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"// margin\nmargin = ({top: 400, right: 300, bottom: 300, left: 300})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"function key(svg) {\n // Create the legend\n const color_legend = legend({\n color: d3.scaleOrdinal([`p<=0.05; below normal range & control values`\n ,`p<=0.05; below control values`\n ,`p>0.05 or no change`\n ,`p<=0.05; above control values`\n ,`p<=0.05; above normal range & control values`]\n // ,[\"#7b3294\", \"#c2a5cf\", \"#f7f7f7\", \"#a6dba0\", \"#008837\"])\n ,[ \"#2c7bb6\", \"#abd9e9\", \"#ffffbf\", \"#fdae61\", \"#d7191c\"]) //neg is blue colour; pos is red colour\n , title: \"Comparison with control data\"\n , tickSize: 0\n , height: 60 })\n \n //Append the legend and position it on the overall plot\n svg.append(\"g\")\n .attr(\"transform\",`translate( ${margin.left}, ${margin.top*0.2})`) // position legend\n .append(() => color_legend);\n \n return color_legend\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2746,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"