2b:null 2c:["$","title",null,{"children":"DrugMatrix Histopathology | fionaebi | Observable"}] 31:Tddf,chart = { // Set the input variables for organ, ontology and ontTerms const inputCompounds = viewof compoundNames const inputOrgan = viewof organ const inputOntology = viewof ont const inputOntTerms = viewof ontTerms // Create svg element const svg = d3.create("svg") //sets the viewing window for the svg .attr("viewBox", [0, 0, width, height_upper+margin.top+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", "#D0F0C0") .attr("pointer-events", "all") .attr("width", width+margin.left+margin.right) .attr("height", margin.top+height_upper+margin.bottom) .attr("cursor", "pointer") .on("click", (event, d) => { // Remove existing heatmap, and reset plot using upper heatmap: reset(svg) }) // Set the visualisationVariables (vizVars) for plot depth and initially specified ontology and compound console.log('is null: ', window.vizVars == null) if (window.vizVars == null) { console.log('RESET window.vizVars') window.vizVars = { currentDepth: 1, //Start at upper_heatmap ('1') currentCompounds: compoundNames, //upper_compound(s) currentOrgan: organ, currentOntology: ont, currentOntTerms: ontTerms, currentLowerCompound: undefined, //only one compound shown in lower heatmap } } //This updates the chart if any input variables are changed: function updateChart() { const specifiedCompounds = inputCompounds.value const specifiedOrgan = inputOrgan.value const specifiedOntology = inputOntology.value const specifiedOntTerms = inputOntTerms.value // Use visualisationVariables (vizVars) to store current input data to each heatmap // If vizVars.currentDepth equals 1, then show upper heatmap: if (window.vizVars.currentDepth === 1) { upperHeatmap(svg, specifiedCompounds, specifiedOrgan, specifiedOntology, specifiedOntTerms) // If vizVars.currentDepth equals 2, then show lower heatmap: } else { // But if upper level compounds are changed, then reset from lower to upper heatmap: if (specifiedCompounds !== window.vizVars.currentCompounds){ return reset(svg) } if (specifiedOrgan !== window.vizVars.currentOrgan){ window.vizVars.currentOrgan = specifiedOrgan } if (specifiedOntology !== window.vizVars.currentOntology){ window.vizVars.currentOntology = specifiedOntology } if (specifiedOntTerms !== window.vizVars.currentOntTerms){ window.vizVars.currentOntTerms = specifiedOntTerms } lowerHeatmap(svg, window.vizVars.currentOrgan, window.vizVars.currentOntology, window.vizVars.currentOntTerms, window.vizVars.currentLowerCompound) } } // Draw the chart for the first time. updateChart() // upperHeatmap(svg, specifiedCompounds, specifiedOrgan, specifiedOntology, specifiedOntTerms) // lowerHeatmap(svg, specifiedOrgan, specifiedOntology, specifiedOntTerms, "AMIODARONE_CHEMBL633") // return SVG DOM element return svg.node() // // 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") }32:T158e,// Creates the upper heatmap. function upperHeatmap(svg, specifiedCompounds, specifiedOrgan, specifiedOntology, specifiedOntTerms) { //Set vizVars variables: window.vizVars.currentDepth = 1 //upperHeatmap window.vizVars.currentCompounds = specifiedCompounds window.vizVars.currentOrgan = specifiedOrgan window.vizVars.currentOntology = specifiedOntology window.vizVars.currentOntTerms = specifiedOntTerms // Provide useful information to console: console.log('render upper heatmap!') console.log('window.vizVars: ', window.vizVars) const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style("visibility", 'hidden') const dat = FilterData_upper( specifiedCompounds, specifiedOrgan, specifiedOntology, specifiedOntTerms) // Append upper plot to existing svg plot area const g = svg.append("g") .attr("class", "upper") /////////////////////////////////////////////// // Add x_axis and y_axis to plot g.append("g").style("font", "12px sans-serif") .call(xAxis_upper) .attr("class", "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("class", "upper") .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis2 at top g.append("g").style("font", "12px sans-serif") .call(yAxis_upper) .attr("class", "upper") .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position yAxis g.append("g").style("font", "12px sans-serif") .call(yAxis2_upper) .attr("class", "upper") .attr("transform",`translate( ${margin.left+width_upper}, ${margin.top})`) //position yAxis2 ///////////////////////////////////////// // Add the heatmap rectangles g.append('g') .attr("class", "upper") .attr("cursor", "pointer") //Creates pointer .selectAll('rect') .data(dat, function(d) {return d.dataset+':'+d.database}) .join('rect') // Specify the data within each cell of the heatmap: .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position heatmap squares .attr("x", function(d) { if (specifiedOntology === "MC") {return xlabels_upper(d.MC) } else if (specifiedOntology === "UBERON") {return xlabels_upper(d.UBERON) } else if (specifiedOntology === "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) { if (specifiedOntology == "MC") {return myColor(d.max_test_distrib_per_mc_id)} else if (specifiedOntology == "UBERON") {return myColor(d.max_test_distrib_per_uberon_id)} else if (specifiedOntology == "CL") {return myColor(d.max_test_distrib_per_cl_id)} } ) // 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){ if (specifiedOntology == "MC") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Organ: ${d.tissue} Control: ${d.vehicle} Hpath Ontology (MC_ID): ${d.mc_term_id} Click for detailed view of ${d.parent_prefname_chemblid}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible") } if (specifiedOntology == "UBERON") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Organ: ${d.tissue} Control: ${d.vehicle} UBERON Ontology (ID): ${d.uberon_term_id} Click for detailed view of ${d.parent_prefname_chemblid}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible") } if (specifiedOntology == "CL") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Organ: ${d.tissue} Control: ${d.vehicle} CL Ontology (CL_ID) : ${d.cl_term_id} 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 to normal colour if (specifiedOntology == "MC") {return myColor(d.max_test_distrib_per_mc_id) } else if (specifiedOntology == "UBERON") {return myColor(d.max_test_distrib_per_uberon_id) } else if (specifiedOntology == "CL") {return myColor(d.max_test_distrib_per_cl_id) } } ) return tooltip.html(``).style("visibility", "hidden"); }) //Drill down to detailed data for one compound that is used in the lower_heatmap .on("click", function(event, d) { //Select the compound e.g. 'ROSIGLITAZONE_CHEMBL121' const cmpd = d.parent_prefname_chemblid // Remove upper heatmap cells when displaying lower plot d3.selectAll(".upper").remove() {return tooltip.html(``).style("visibility", "hidden") & lowerHeatmap(svg, specifiedOrgan, specifiedOntology, specifiedOntTerms, cmpd) } }) return [g] }33:T2a6a,// Creates the lower heatmap. function lowerHeatmap(svg, specifiedOrgan, specifiedOntology, specifiedOntTerms, cmpd) { //Set vizVars variables: window.vizVars.currentDepth = 2 //lowerHeatmap window.vizVars.currentOrgan = specifiedOrgan window.vizVars.currentOntology = specifiedOntology window.vizVars.currentOntTerms = specifiedOntTerms window.vizVars.currentLowerCompound = cmpd //Provide useful information to console console.log('render lower heatmap!') console.log('window.vizVars: ', window.vizVars) const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style("visibility", 'hidden') // Append lower plot to existing svg plot area const g = svg.append("g") .attr("class", "lower") /////////////////////////////////////////////// //Filter the data for a specific compound: const data2 = FilterData_lower( datafile2, specifiedOrgan, specifiedOntology, specifiedOntTerms, cmpd) // 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 * heatmapCellHeight //Specify individual ontology terms as Column labels const dataTypes = Array.from(new Set( data2.map( function(d) { if (specifiedOntology === "MC") {return d.mc_term_dose_doselevel } else if (specifiedOntology === "UBERON") {return d.uberon_term_dose_doselevel } else if (specifiedOntology === "CL") {return d.cl_term_dose_doselevel } } ) )) // const width_lower = dataTypes.length * 15 const width_lower = redefineWidth( dataTypes.length * 15 ) //scaleFactor to use to transform plot const scaleXFactor = 0.4 const scaleYFactor = 1.0 /////////////////////////////////////////////// // 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(dataTypes).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 .call(d3.axisLeft(ylabels_lower).tickSize(5)) .append('text') .attr("dx", "-2.0em") .attr("dy", "-3.0em") .attr("transform", "rotate(-90)") .attr('text-anchor', 'middle') .attr('fill', 'black') .attr('font-size', '16px') .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 .call(d3.axisRight(ylabels_lower).tickSize(5) .tickFormat( function(x) { return "" } ) ) //tickFormat assigns tick labels!!. ///////////////////////////////////////////// //Add x_axis and y_axis to plot g.append("g") .style("font", "12px sans-serif") .call(xAxis_lower) .attr("class", "lower") .attr("transform",`translate( ${margin.left*scaleXFactor}, ${margin.top*scaleYFactor+height_lower})`) //position xAxis at bottom g.append("g") .style("font", "12px sans-serif") .call(xAxis2_lower) .attr("class", "lower") .attr("transform",`translate( ${margin.left*scaleXFactor}, ${margin.top*scaleYFactor})`) //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(specifiedOntology); g.append("g") .style("font", "12px sans-serif") .call(yAxis_lower) .attr("class", "lower") .attr("transform",`translate( ${margin.left*scaleXFactor}, ${margin.top*scaleYFactor})`); //position yAxis g.append("g") .style("font", "12px sans-serif") .call(yAxis2_lower) .attr("transform",`translate( ${margin.left*scaleXFactor + width_lower}, ${margin.top*scaleYFactor})`); //position yAxis2 //Include compound label on plot g.append('text') .attr('class', 'lower') .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 + "___LOWER PLOT" ) //Compound_name column /////////////////////////////////////////////// // Add heatmap rectangles: g.append('g') .attr("class", "lower") .selectAll('rect') .data(data2, function(d) {return d.dataset+':'+d.database}) .join('rect') .attr("transform",`translate( ${margin.left*scaleXFactor}, ${margin.top*scaleYFactor})`) //position heatmap squares .attr("x", function(d) { if (specifiedOntology === "MC") {return xlabels_lower(d.mc_term_dose_doselevel) } else if (specifiedOntology === "UBERON") {return xlabels_lower(d.uberon_term_dose_doselevel) } else if (specifiedOntology === "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) { if (specifiedOntology=="MC") {return myColor(d.max_test_distrib_per_mc_id)} else if (specifiedOntology=="UBERON") {return myColor(d.max_test_distrib_per_uberon_id)} else if (specifiedOntology=="CL") {return myColor(d.max_test_distrib_per_cl_id)} }) // .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(50) .attr("stroke", "black") //outline around heatmap cell .attr("stroke-width", 2.0) }) .on("mousemove", function(e, d){ if (specifiedOntology=="MC") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Time (days): ${d.time_days} Dose, Dose Level: ${d.dose_doselevel} Organ: ${d.tissue} Control: ${d.vehicle} Hpath Ontology (MC_ID): ${d.mc_term_id} UBERON Ontology (ID): ${d.uberon_terms_per_mc_id} CL Ontology (CL_ID) : ${d.cl_terms_per_mc_id} Organism Ontology (NCBITaxon) : Rattus norvegicus_NCBITaxon:10116 Original hpath term(s): ${d.terms_per_mc_id} Hpath severity grades : ${d.test_std_values_per_mc_id} Click to visit ChEMBL activity_id ${d.activity_ids_per_mc_id}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible") } else if (specifiedOntology=="UBERON") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Time (days): ${d.time_days} Dose, Dose Level: ${d.dose_doselevel} Organ: ${d.tissue} Control: ${d.vehicle} Hpath Ontology (MC_ID): ${d.mc_terms_per_uberon_id} UBERON Ontology (ID): ${d.uberon_term_id} CL Ontology (CL_ID) : ${d.cl_terms_per_uberon_id} Organism Ontology (NCBITaxon) : Rattus norvegicus_NCBITaxon:10116 Original hpath term(s): ${d.terms_per_uberon_id} Hpath severity grades : ${d.test_std_values_per_uberon_id} Click to visit ChEMBL activity_id ${d.activity_ids_per_uberon_id}`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible") } else if (specifiedOntology=="CL") {return tooltip.html(`\ Compound: ${d.parent_prefname_chemblid} Time (days): ${d.time_days} Dose, Dose Level: ${d.dose_doselevel} Organ: ${d.tissue} Control: ${d.vehicle} Hpath Ontology (MC_ID): ${d.mc_terms_per_cl_id} UBERON Ontology (ID): ${d.uberon_terms_per_cl_id} CL Ontology (CL_ID) : ${d.cl_term_id} Organism Ontology (NCBITaxon) : Rattus norvegicus_NCBITaxon:10116 Original hpath term(s): ${d.terms_per_cl_id} Hpath severity grades : ${d.test_std_values_per_cl_id} Click to visit ChEMBL activity_id ${d.activity_ids_per_cl_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() { if (specifiedOntology=="MC") {return tooltip.html(``).style("visibility", "hidden") & window.open(d.activity_id_url_per_mc_id) } else if (specifiedOntology=="UBERON") {return tooltip.html(``).style("visibility", "hidden") & window.open(d.activity_id_url_per_uberon_id) } else if (specifiedOntology=="CL") {return tooltip.html(``).style("visibility", "hidden") & window.open(d.activity_id_url_per_cl_id) } } }) return [g] }34:T51d,// Extract relevant ontology terms from chosen ontology - used in dropdown list ontTermList = { //MC if (ont === "MC" ) { return Array.from(new Set( datafile1.filter(d => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.MC !== '' & d.max_test_distrib_per_mc_id !== '' ).map(d => d.MC))) //sort by (i) tissue, then (ii) ontology hierarchy .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.MC_index-b.MC_index) }) } //UBERON else if (ont === "UBERON" ) { return Array.from(new Set( datafile1.filter(d => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.UBERON !== '' ).map(d => d.UBERON))) //sort by (i) tissue, then (ii) ontology hierarchy .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.UBERON_index-b.UBERON_index) }) } //CL else if (ont === "CL" ) { return Array.from(new Set( datafile1.filter(d => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & d.CL !== '' & d.max_test_distrib_per_cl_id !== '' ).map(d => d.CL))) //sort by (i) tissue, then (ii) ontology hierarchy .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }35:T5d7,// Filter the data for a specific compound, AND exclude rows with missing ontology data or null max_test_distrib, 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_upper( specifiedCompounds, specifiedOrgan, specifiedOntology, specifiedOntTerms) { //MC if (specifiedOntology === "MC" ) {return datafile1.filter(d => specifiedCompounds.includes(d.parent_prefname_chemblid) & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.MC) & d.MC !== '' & d.max_test_distrib_per_mc_id !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.MC_index-b.MC_index) }) } //UBERON else if (specifiedOntology === "UBERON" ) {return datafile1.filter(d => specifiedCompounds.includes(d.parent_prefname_chemblid) & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.UBERON) & d.UBERON !== '' & d.max_test_distrib_per_uberon_id !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.UBERON_index-b.UBERON_index) }) } //CL else if (specifiedOntology === "CL") {return datafile1.filter(d => specifiedCompounds.includes(d.parent_prefname_chemblid) & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.CL) & d.CL !== '' & d.max_test_distrib_per_cl_id !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }36:T51d,// Filter the data for a specific compound, AND exclude rows with missing ontology data or null max_test_distrib, 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 => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & ontTerms.includes(d.MC) & d.MC !== '' & d.max_test_distrib_per_mc_id !== '' ).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 => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & ontTerms.includes(d.UBERON) & d.UBERON !== '' & d.max_test_distrib_per_uberon_id !== '' ).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 => compoundNames.includes(d.parent_prefname_chemblid) & organ.includes(d.tissue) & ontTerms.includes(d.CL) & d.CL !== '' & d.max_test_distrib_per_cl_id !== '' ).sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }37:T5c8,// Filter the data for a specific compound, AND exclude rows with missing ontology data or null max_test_distrib, 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, specifiedOrgan, specifiedOntology, specifiedOntTerms, specifiedCmpd) { //MC if (specifiedOntology === "MC" ) {return inputdata.filter(d => d.parent_prefname_chemblid === specifiedCmpd & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.MC) & d.MC !== '' & d.max_test_distrib_per_mc_id !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.MC_index-b.MC_index) }) } //UBERON else if (specifiedOntology === "UBERON" ) {return inputdata.filter(d => d.parent_prefname_chemblid === specifiedCmpd & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.UBERON) & d.UBERON !== '' & d.max_test_distrib_per_uberon_id !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.UBERON_index-b.UBERON_index) }) } //CL else if (specifiedOntology === "CL" ) {return inputdata.filter(d => d.parent_prefname_chemblid === specifiedCmpd & specifiedOrgan.includes(d.tissue) & specifiedOntTerms.includes(d.CL) & d.CL !== '' & d.max_test_distrib_per_cl_id !== '' ) .sort(function(a, b){ return d3.ascending(a.tissue,b.tissue) || (a.CL_index-b.CL_index) }) } }38:T784,//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, tickPadding = 15, 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) .tickPadding(tickPadding) ) .call(tickAdjust) .attr("font-size", "30") // 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", "30") //Legend title .attr("class", "title") .text(title)); return svg.node(); }39:[] 2f:{"id":"ae4f10b58f469940","slug":"dm-histopathology","title":"DrugMatrix Histopathology","thumbnail":"a7100b412336758929f124ff89497ef39b73143c7622acd506ec60505479d7a3","access_level":"public","create_time":"$D2022-01-24T17:15:36.393Z","update_time":"$D2022-03-22T10:27:21.124Z","view_time":null,"first_public_time":"$D2022-02-01T14:27:37.500Z","fork":{"id":"1235b3498306f964","slug":"dm-clinical-chem","title":"DrugMatrix Clinical Chemistry","owner":{"id":"977d7da73b7bbe57","login":"fionaebi","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"977d7da73b7bbe57","login":"fionaebi","name":"","avatar_url":"https://avatars-next.observableusercontent.com/82275629f7aa88eb61a8d2df4cdbfc88d4de1578031eae0e788db19f7742fd02","tier":"starter_2024"},"version":9979,"publish_version":9979,"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":2,"collection":null,"type":"notebook","body":{"title":"DrugMatrix Histopathology","cells":[{"id":0,"value":"md`# DrugMatrix 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) > [DrugMatrix histopathology](document.baseURI)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2732,"value":"1. Choose one or multiple compound(s) or organ(s), and choose an ontology and term(s)\n2. Drill down by clicking on a heatmap cell\n3. Click on background to go up or reset ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2653,"value":"viewof compoundNames = Inputs.select(compoundList, {value: compoundList.slice(0,3), label: \"Choose compound(s)\", multiple: 5, width: 400})\n//compoundList.slice(55,75)\n//\"multiple:5\" specifies that 5 options can be displayed!","pinned":false,"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(0,1), 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 one ontology\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8038,"value":"viewof ontTerms = Inputs.select(ontTermList, {value: ontTermList, label: \"Choose ontology term(s)\", multiple: 5, width: 400})","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 // .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":145,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9320,"value":"//Creates function to go to upper_heatmap when background is clicked\nfunction reset(svg) {\n\n // Remove lower heatmap\n d3.selectAll(\".lower\").remove()\n // Remove upper heatmap\n d3.selectAll(\".upper\").remove()\n\n upperHeatmap(svg, compoundNames, organ, ont, ontTerms)\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9918,"value":"","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(\"DM_Pathology_condensed@23.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(\"DM_Pathology_alldrugs@19.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 = compoundNames.length * heatmapCellHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6551,"value":"width_upper = ontTerms.length * heatmapCellWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7163,"value":"compoundList = 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":8040,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9176,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6097,"value":"$36","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(ontTerms)\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(compoundNames)\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(\"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":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(\"UPPER PLOT_______\"+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 // 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 // Position and populate the y-axis: \n .call(d3.axisRight(ylabels_upper).tickSize(5)\n .tickFormat( function(x) { return \"\" } ) ) //tickFormat assigns tick labels!!","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":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8526,"value":"// //Additional chart for checking purposes\n// chart2 = {\n// //Create the svg plot area\n// const svg = d3.create(\"svg\")\n// .attr(\"viewBox\", [0, 0, width, height_upper + margin.top + margin.bottom])\n// .style('border', '1px dotted #999'); // <-- A dotted border shows the margin\n// //resize viewbox for upper plot\n// // .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"));\n\n// // upperHeatmap(svg,compoundList, organ, ont, ontTerms)\n// lowerHeatmap(svg, organ, ont, ontTerms, \"AMIODARONE_CHEMBL633\")\n\n// return svg.node()\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"md`## Other input for colour, legend, margin, heatmapCellWidth etc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9712,"value":"heatmapCellWidth = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9699,"value":"//Adjust heatmap cell width to fit on width of page:\nheatmapCellHeight = {\n if (width_upper > width) { return width * 0.9 / ontTerms.length }\n else {return 15}\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9822,"value":"// Function to squish plotwidth if it is larger than the window width\n// Used for lowerHeatmap\nfunction redefineWidth(plotWidth) { if ( plotWidth > width) {\n return (width - margin.left - margin.right) * 0.95\n } else {\n return plotWidth \n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9978,"value":"","pinned":true,"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([ \"#ffffb2\", \"#fecc5c\", \"#fd8d3c\", \"#f03b20\", \"#bd0026\"]) //darker red is more severe histopathology value\n .domain([0,1,2,3,4])","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([`0`,`1`,`2`,`3`,`4`]\n ,[ \"#ffffb2\", \"#fecc5c\", \"#fd8d3c\", \"#f03b20\", \"#bd0026\"]) //darker red is more severe histopathology value\n , title: \"Histopathology Severity Grade\"\n , tickSize: 0\n , tickPadding: 40\n , height:margin.top*0.3 })\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.1})`) // position legend\n .append(() => color_legend);\n \n return color_legend\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$38","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"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"