Published
Edited
Jun 14, 2022
Fork of Inchlib
1 star
Insert cell
Insert cell
//viewof selectedData = select(Object.keys(dataObj))
Insert cell
Osa = html`<select>
<option selected value="Osa_somatic_hsu_2018">SE with mature seed (Hsu et al., 2018)
<!--<option value="Osa_somatic_shim_2020">SE with mature seed (Shim et al., 2020)-->
</select>`
Insert cell
Mpa = html`<select>
<option selected value="Mpa_wound_ishida_2022_1">WIR with thallus (apical vs basal) (Ishida et al., 2022)
<option value="Mpa_wound_ishida_2022_2">WIR with thallus (mock vs NAA treatment) (Ishida et al., 2022)
<option value="Mpa_wound_liang_2022">WIR with thallus (Liang and De Veylder, 2022)
</select>`
Insert cell
Sly = html`<select>
<option selected value="Sly_wound_larriba_2021">WIR with hypocotyl explant (Larriba et al., 2021)
</select>`
Insert cell
Ath = html`<select>
<option selected value="wound_ikeuchi_2017">WIR with hypocotyl explant (Ikeuchi et al., 2017)
<option value="wound_pan_2019">WIR with leaf explant (Pan et al., 2019)
<option value="wound_ye_2020">WIR with leaf explant (Ye et al., 2020)
<option value="wound_zhang_2019">WIR with leaf explant (Zhang et al., 2019)
<option value="wound_hernandez_coronado_2022">WIR with root explant (Hernandez-Coronado et al., 2022)
<option value="wound_rymen_2019">WIR with root explant (Rymen et al., 2019)
<option value="wound_matosevich_2020">WIR with root tip (Matosevich et al., 2020)
<option value="hormone_coleman_2020">HIR with hypocotyl explant (Coleman et al., 2020)
<option value="hormone_lambolez_2022">HIR with hypocotyl explant (Lambolez et al., 2022)
<!--<option value="hormone_zhai_2021_1">HIR with hypocotyl explant (wox5-1wox7-1) (Zhai et al., 2021)
<option value="hormone_zhai_2021_2">HIR with hypocotyl explant (plt1plt2) (Zhai et al., 2021) #2-->
<option value="hormone_ishihara_2019">HIR with root explant (Ishihara et al., 2019)
<option value="hormone_kim_2018">HIR with root explant (Kim et al., 2018)
<!--<option value="hormone_liu_2016">HIR with root explant (Liu et al., 2016)-->
<option value="hormone_liu_2020">HIR with root explant (Liu et al., 2020)
<option value="somatic_wang_2020">SE with immature embryos or seedlings (Wang et al., 2020)
<option value="somatic_wickramasuriya_2015">SE with immature embryos (Wickramasuriya et al., 2015)
<option value="protoplast_sakamoto_2021">Protoplast regeneration with leaf mesophyll cells (Sakamoto et al., 2021)
<option value="protoplast_xu_2021">Protoplast regeneration with leaf mesophyll cells (Xu et al., 2019)
</select>`
Insert cell
species = 'Ath'
Insert cell
viewof selectedData = {
if(species == 'Ath'){
return Ath
}else if (species == 'Sly'){
return Sly
}else if (species == 'Mpa'){
return Mpa
}else if (species == 'Osa'){
return Osa
}

}
Insert cell
inchlibContainerHTML = html`<div id="inchlibContainer" style="text-align:center ;" ></div>`
Insert cell
Insert cell
width=700
Insert cell
{
inchlibDrawing;
const objectId = clusteredData.data.nodes[Object.keys(clusteredData.data.nodes)[0]].objects[0];
return inchlibObj.get_features_for_object(objectId);

}
Insert cell
Insert cell
{
return;
inchlibDrawing;
const nodeId = Object.keys(clusteredData.data.nodes)[0].replace('inchlibContainer#','');
inchlibObj.highlight_cluster(nodeId);
return nodeId;
}
Insert cell
Insert cell
{
return;
inchlibDrawing;
const nodeId = Object.keys(clusteredData.data.nodes)[0].replace('inchlibContainer#','');
inchlibObj.highlight_column_cluster(nodeId);
return nodeId;
}
Insert cell
Insert cell
inchlibObj ={
inchlibContainerHTML;
document.querySelector('#inchlibContainer').innnerHTML=''
window.inchlib="";

const obj = new inchlibLibrary({ //instantiate InCHlib
target: "inchlibContainer", //ID of a target HTML element
navigation_toggle: {distance_scale: false},
independent_columns: false,
//metadata: true, //turn on the metadata
//count_column:true,
//column_metadata: true, ERROR//turn on the column metadata
max_height: height, //set maximum height of visualization in pixels
width: width, //set width of visualization in pixels
heatmap_part_width:0.5,
heatmap_colors: "PuBu", //set color scale for clustered data
//metadata_colors: "Reds", //set color scale for metadata
// count_column_colors: 'Reds',
draw_row_ids:true,
//min_row_height:50,
//heatmap_font_color: 'green'
fixed_row_id_size: 10,
heatmap_part_width: 0.8,
});
return obj;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
exampleData = load("https://gist.githubusercontent.com/bumbeishvili/5ecd2e6066065980d7171aab23f8752b/raw/9ca96478bc6755e7894a809be9b810aa18a2545f/example_output.json")
Insert cell
clusteredData = {
return JSON.parse(JSON.stringify(dataObj[selectedData]))
}
Insert cell
myData = FileAttachment("example@3.json").json()
Insert cell
hormone_coleman_2020 = await d3.json(url_hormone_coleman_2020);
Insert cell
hormone_ishihara_2019 = await d3.json(url_hormone_ishihara_2019);
Insert cell
hormone_kim_2018 = await d3.json(url_hormone_kim_2018);
Insert cell
hormone_lambolez_2022 = await d3.json(url_hormone_lambolez_2022);
Insert cell
hormone_liu_2016 = await d3.json(url_hormone_liu_2016);
Insert cell
hormone_liu_2020 = await d3.json(url_hormone_liu_2020);
Insert cell
hormone_zhai_2021_1 = await d3.json(url_hormone_zhai_2021_1);
Insert cell
hormone_zhai_2021_2 = await d3.json(url_hormone_zhai_2021_2);
Insert cell
protoplast_sakamoto_2021 = await d3.json(url_protoplast_sakamoto_2021);
Insert cell
protoplast_xu_2021 = await d3.json(url_protoplast_xu_2021);
Insert cell
wound_matosevich_2020 = await d3.json(url_wound_matosevich_2020);
Insert cell
somatic_wang_2020 = await d3.json(url_somatic_wang_2020);
Insert cell
somatic_wickramasuriya_2015 = await d3.json(url_somatic_wickramasuriya_2015);
Insert cell
wound_hernandez_coronado_2022 = await d3.json(url_wound_hernandez_coronado_2022);
Insert cell
wound_ikeuchi_2017 = await d3.json(url_wound_ikeuchi_2017);
Insert cell
wound_pan_2019 = await d3.json(url_wound_pan_2019);
Insert cell
wound_rymen_2019 = await d3.json(url_wound_rymen_2019);
Insert cell
wound_ye_2020 = await d3.json(url_wound_ye_2020);
Insert cell
wound_zhang_2019 = await d3.json(url_wound_zhang_2019);
Insert cell
Sly_wound_larriba_2021 = await d3.json(url_Sly_wound_larriba_2021);
Insert cell
Mpa_wound_ishida_2022_1 = await d3.json(url_Mpa_wound_ishida_2022_1);
Insert cell
Mpa_wound_ishida_2022_2 = await d3.json(url_Mpa_wound_ishida_2022_2);
Insert cell
Mpa_wound_liang_2022 = await d3.json(url_Mpa_wound_liang_2022);
Insert cell
Osa_somatic_hsu_2018 = await d3.json(url_Osa_somatic_hsu_2018);
Insert cell
Osa_somatic_shim_2020 = await d3.json(url_Osa_somatic_shim_2020);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
url_Osa_somatic_hsu_2018 = "https://gist.githubusercontent.com/bumbeishvili/5ecd2e6066065980d7171aab23f8752b/raw/9ca96478bc6755e7894a809be9b810aa18a2545f/example_output.json"
Insert cell
url_Osa_somatic_shim_2020 = "https://gist.githubusercontent.com/bumbeishvili/5ecd2e6066065980d7171aab23f8752b/raw/9ca96478bc6755e7894a809be9b810aa18a2545f/example_output.json"
Insert cell
dataObj = ({
wound_ye_2020,
somatic_wang_2020,
hormone_liu_2020,
hormone_zhai_2021_1,
hormone_ishihara_2019,
protoplast_sakamoto_2021,
hormone_zhai_2021_2,
wound_hernandez_coronado_2022,
hormone_kim_2018,
hormone_coleman_2020,
wound_matosevich_2020,
wound_ikeuchi_2017,
wound_zhang_2019,
hormone_liu_2016,
somatic_wickramasuriya_2015,
hormone_lambolez_2022,
wound_pan_2019,
wound_rymen_2019,
protoplast_xu_2021,
Sly_wound_larriba_2021,
Mpa_wound_ishida_2022_1,
Mpa_wound_ishida_2022_2,
Mpa_wound_liang_2022,
Osa_somatic_hsu_2018,
Osa_somatic_shim_2020
})
Insert cell
Insert cell
inchlibDrawing = {
inchlibContainerHTML;
window.inchlib=inchlibObj;
inchlibObj.events.row_onclick = function(object_ids, evt){
console.log('clicked ',object_ids,evt)
};
inchlibObj.events.row_onmouseout = function(object_ids, evt){
console.log('mouseout ',object_ids,evt)
};
inchlibObj.events.row_onmouseover = function(object_ids, evt){
console.log('mouseove ',object_ids,evt)
};
inchlibObj.read_data(clusteredData);
inchlibObj.draw()
}
Insert cell
height = 800
Insert cell
Insert cell
Insert cell
Insert cell
inchlibLibrary = {
kinetic;
jquery;
await requireScript('https://gist.githubusercontent.com/bumbeishvili/cfd78d8250d0765826e813726bc5f9de/raw/be74559171d6436a50d0f001d0313a98a9b6b3fc/inchlib-1.2.0.min.js');
return window.InCHlib;
}
Insert cell
inchlibLibraryNew = {
kinetic;
jquery;
await requireScript('https://gist.githubusercontent.com/bumbeishvili/83c9fe7d26f53afcea94c24a180e28ad/raw/77c95626a956bd383ccec65ed3b2ba732cca7633/inchlib_dev.js');
return window.InCHlib;
}
Insert cell
Konva = require('konva@0.9.5');
Insert cell
kinetic = require('kinetic@v5.1.9')
Insert cell
jquery = require('jquery@2.1.0')
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more