2b:null 2c:["$","title",null,{"children":"DrugMatrix Hematology | fionaebi | Observable"}] 31:Tc0c,// Creates the upper heatmap. function upper_heatmap(svg, d, selector) { const g = svg.insert("g", selector) .attr("class", "enter") .attr("transform", `translate( 0, -${margin.top*0.5})`) .attr("text-anchor", "end") .style("font", "14px sans-serif"); 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").call(xAxis_upper).attr("transform",`translate( ${margin.left}, ${margin.top+height_upper})`) //position xAxis at bottom g.append("g").call(xAxis2_upper).attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis2 at top g.append("g").call(yAxis_upper).attr("transform",`translate( ${margin.left}, ${margin.top})`) //position yAxis g.append("g").call(yAxis2_upper).attr("transform",`translate( ${margin.left+width}, ${margin.top})`) //position yAxis2 /////////////////////////////////////// // SVG 'rect' elements for each cell in the heatmap const upper_cells = g.selectAll("rect") .data(data, function(d) {return d.standard_type+':'+d.parent_prefname_chemblid;}) .join("g") // Specify the data within each cell of the heatmap: upper_cells.append("rect") .attr("x", function(d) { return xlabels_upper(d.standard_type) }) .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("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} Data Type: ${d.standard_type} 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); }) .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position heatmap squares return g; }32:T1c6f,// 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 + barStep * barPadding})`) .attr("text-anchor", "end") .style("font", "10px sans-serif"); 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 = datafile2.filter(d => d.parent_prefname_chemblid === cmpd ) // const data2 = datafile2.filter(d => d.parent_prefname_chemblid === 'ROSIGLITAZONE_CHEMBL121') //'FLUOXETINE_CHEMBL41' // Column labels -> for drilled down detailed view of an individual compound const Data_types2 = Array.from(new Set(data2.map(d => d.stdtype_dose_doselevel))) // 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 * 40 /////////////////////////////////////////////// // Build X scale for the lower chart, ie drilled_down data: Band scales split a pixel range into equal-sized bands! const xlabels_lower = d3.scaleBand().range([ 0, width ]).domain(Data_types2).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 // .attr("class", "x-axis") .call(d3.axisBottom(xlabels_lower).tickSize(0)) .selectAll("text").style("text-anchor", "end").attr("dx", "-0.50em").attr("dy", "0.20em").attr("transform", "rotate(-65)") .call(g => g.select(".domain").remove()) // Build x-axis at top of the plot (for the lower chart, ie drilled_down data) const xAxis2_lower = g => g // .attr("class", "x-axis") .call(d3.axisTop(xlabels_lower).tickSize(0)) .selectAll("text").style("text-anchor", "end").attr("dx", "-0.50em").attr("dy", "-0.20em").attr("transform", "rotate(65)") .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(10)) .append('text').attr('transform', `translate( -${margin.left*0.8}, 0), rotate(-90)`) .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(10)) .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") .call(xAxis_lower) .attr("transform",`translate( ${margin.left}, ${margin.top+height_lower})`) //position xAxis .append('text') // Add x-axis title 'text' element .attr('text-anchor', 'start') .attr('fill', 'black') .attr('font-size', '20') .attr('font-weight', 'bold') .attr('x', (width-margin.left-margin.right)/2 + margin.left ) .attr('y', margin.bottom*5) .text('Data Type'); g.append("g") .call(xAxis2_lower) .attr("transform",`translate( ${margin.left}, ${margin.top})`) //position xAxis .append('text') // Add x-axis2 title 'text' element .attr('text-anchor', 'start') .attr('fill', 'black') .attr('font-size', '20') .attr('font-weight', 'bold') .attr('x', (width-margin.left-margin.right)/2 + margin.left ) .attr('y', -margin.top*0.7) .text('Data Type'); g.append("g") .call(yAxis_lower) .attr("transform",`translate( ${margin.left}, ${margin.top})`); //position yAxis g.append("g") .call(yAxis2_lower) .attr("transform",`translate( ${margin.left+width}, ${margin.top})`); //position yAxis2 //Include compound label on plot g.append('text') .attr('class', 'year') .attr('text-anchor', 'start') .attr('x', margin.left) .attr('y', margin.top*0.3 ) //.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) {return d.stdtype_doselevel+':'+d.time_days;}) .join("g") lower_cells.append('a') // Specify the data within each cell of the heatmap: .append("rect") .attr("x", function(d) { return xlabels_lower(d.stdtype_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(`\ Time_days: ${d.time_days} Data Type: ${d.stdtype_dose_doselevel} Compound: ${d.parent_prefname_chemblid} Test values (${d.standard_units}): ${d.test_std_values} Is test value outside control range?: ${d.is_value_outside_normal_range} Control values (${d.standard_units}): ${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; }33:T7a6,// 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 != ""})) }34: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(); }35:[{"id":"9d86e5ed4da03f4c45e424a16089100f648185b6c658b646f628cab5aa92893661c282f59c638524ee516ba99bf1373222e9f2f70ce8f3b1a1f82aef86703197","href":"https://static.observableusercontent.com/files/9d86e5ed4da03f4c45e424a16089100f648185b6c658b646f628cab5aa92893661c282f59c638524ee516ba99bf1373222e9f2f70ce8f3b1a1f82aef86703197","name":"DM_Hematology_condensed.csv","type":"text/csv","lastModified":1643039120849.806,"size":234508},{"id":"f14646890c270371ef600fdfee435c0cf8f39ccaea9d0d292f01bca08319b8ec00eabfc8b6b66f089f5d148063f7a1a52e4d454a91c8f1fb3d8e88e3163c8bda","href":"https://static.observableusercontent.com/files/f14646890c270371ef600fdfee435c0cf8f39ccaea9d0d292f01bca08319b8ec00eabfc8b6b66f089f5d148063f7a1a52e4d454a91c8f1fb3d8e88e3163c8bda","name":"DM_Hematology_alldrugs.csv","type":"text/csv","lastModified":1643039150939.306,"size":9356246},{"id":"d0f5c1aa5fd99cd296747bbcf37a2287b474002a6ac1f5d5ccc0b982a79c8d7effeb7de3541b2d4f7798a57718d5128aa6fa0389e6c72e96acc5b43111157622","href":"https://static.observableusercontent.com/files/d0f5c1aa5fd99cd296747bbcf37a2287b474002a6ac1f5d5ccc0b982a79c8d7effeb7de3541b2d4f7798a57718d5128aa6fa0389e6c72e96acc5b43111157622","name":"DM_Hematology_axis_labels.csv","type":"text/csv","lastModified":1643039161162.104,"size":33553}] 2f:{"id":"a4b23f8ca0ce3021","slug":"dm-hematology","title":"DrugMatrix Hematology","thumbnail":"0bc5c1053d5168391316943e4e66888a69b599eb542ab08c079b075515468fc8","access_level":"public","create_time":"$D2022-01-24T15:35:32.654Z","update_time":"$D2022-01-28T16:55:37.727Z","view_time":null,"first_public_time":"$D2022-02-01T14:28:00.739Z","fork":{"id":"1235b3498306f964","slug":"dm-clinical-chem","title":"DrugMatrix Clinical Chemistry","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":5166,"publish_version":5166,"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":"DrugMatrix Hematology","cells":[{"id":0,"value":"md`# DrugMatrix Hematology`","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 hematology](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 compounds","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2653,"value":"viewof yaxis_selection = Inputs.select(row_labels_upper, {value: row_labels_upper.slice(58,76), label: \"Choose compound(s)\", multiple: true, size: 5, width: 400})\n//row_labels_upper.slice(58,76) is all compounds starting with \"B\"\n//row_labels_upper.slice(221,240) is all compounds starting with \"I\"","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.5])\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":"chart = {\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), (100+margin.top+height_upper+margin.bottom)])\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 // This creates the background that can be clicked on to go UP!\n svg.append(\"rect\")\n .attr(\"class\", \"background\")\n .attr(\"fill\", \"none\")\n // .attr(\"fill\", \"#fe9929\")\n .attr(\"pointer-events\", \"all\")\n .attr(\"width\", width+margin.left+width+margin.right)\n .attr(\"height\", margin.top+height_upper+margin.bottom)\n .attr(\"cursor\", \"pointer\")\n .on(\"click\", (event, d) => up(svg, data));\n \n // Create the heatmap chart that is clickable to drill down\n upper_heatmap(svg, data, \".enter\");\n // lower_heatmap(svg, d, \".x-axis\", 'ROSIGLITAZONE_CHEMBL121')\n\n // return SVG DOM element \n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$31","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 = lower_heatmap(svg, d, \".enter\", cmpd )\n\n //resize viewbox for lower plot\n svg.attr(\"viewBox\", [0, 0, width+margin.left+margin.right, 400+margin.top+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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5165,"value":"","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.left+margin.right, 400+margin.top+margin.bottom ])\n .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"));\n \n}","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":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":88,"value":"data = {\n try {\n return await FileAttachment(\"DM_Hematology_condensed.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_Hematology_alldrugs.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":79,"value":"axis_labels = {\n try {\n return await FileAttachment(\"DM_Hematology_axis_labels.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4226,"value":"row_labels_upper = Array.from(new Set(axis_labels.map(d => d.all_compounds))).concat([\"ABCD\",\"EFGH\",\"IJKL\",\"MNOP\",\"QRST\",\"UVWX\",\"YZ\",\"[0-9] & Symbol\"]).filter(function(d){return d != \"\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3958,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"// Column labels -> for top level summary view of all compounds\nData_types = axis_labels.map(d => d.std_type_alphabetical).filter(function(d){return d != \"\"})\n\n//viewof xaxis_selection = Inputs.select(col_labels_upper, {value: \"std_type_alphabetical\", label: \"columns for upper heatmap:\"})\n// col_labels_upper = axis_labels.columns.slice(0,2)\n// Data_types = { \n// if (xaxis_selection === \"std_type_alphabetical\") {return axis_labels.map(d => d.std_type_alphabetical).filter(function(d){return d != \"\"}) }\n// if (xaxis_selection === \"std_type_clustered\") {return axis_labels.map(d => d.std_type_clustered).filter(function(d){return d != \"\"}) }\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4458,"value":"d3.flatGroup(axis_labels, d => d.A, d => d.B, d => d.C, d => d.D)","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 ])\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(0))\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(-65)\"))\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*1.5)\n .text('Data Type'))\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(0))\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(65)\"))\n // Add x-axis2 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.top*0.3)\n .text('Data Type') )\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(10))\n // Add y-axis title:\n .append('text')\n .attr('transform', `translate( -${margin.left*0.9}, ${margin.top*2/3}), rotate(-90)`)\n .attr('text-anchor', 'end')\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":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(10))\n // Add y-axis title:\n .append('text')\n .attr('transform', `translate( ${margin.right*0.9}, ${margin.top*2/3}), rotate(90)`)\n .attr('text-anchor', 'start')\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":787,"value":"row_labels_lower = datafile2.columns.slice(1,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"col_labels_lower = datafile2.columns.slice(3,5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"md`## Other input for legend, height, margins etc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"height_upper = 20 * Cmpd_names.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"margin = ({top: 200, right: 300, bottom: 50, 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`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"