Coach Numérique
Médiation Sensible & Tangible
Image
Link Tree
LINK ="https://docs.google.com/spreadsheets/d/e/2PACX-1vS-WMdDjr9hcAJrhiiJlpCybwNUKqWwbWVd125xH6z-Eamzp_DuQllP9dtKcbhXR2SD3rElX3dSoNdm/pub?gid=0&single=true&output=csv";
rawData = await d3.csv(LINK);
baseData={
// Returns
let pc_root=[];
let pc_tab=[];
let pc_group=[];
let pc_link=[];
rawData.map((row, i)=>{
//Clear arrays
if (i==0) {
pc_root.length=0;
pc_tab.length=0;
pc_group.length=0;
pc_link.length=0;
}
const r ={Level: "Root", pId: undefined, cId: "Root", pName: undefined, cName: "Root", name: "Root", title:"Root", Active: "1"} //root
const t ={Level: "Tab", pId: "Root", cId: row.TabKey, pName: "Root", cName: row.Tab, name: row.Tab, title: row.Tab, Active: row.Active}; //tab
const g ={Level: "Group", pId: row.TabKey, cId: row.GroupKey, pName: row.Tab, cName: row.Group, name: row.Group, title: row.Group, Active: row.Active}; //group
const l ={Level: "Link", pId: row.GroupKey, cId: row.LinkKey, pName: row.Group, cName: row.Link, name: row.Link, title: row.Link, cUrl: row.Url, Active: row.Active}; //link
//Root
const r_found = pc_root.find(el => { if (el.cId == r.cId) return true; return false;})
if (!r_found) {
pc_root.push(r);
//console.log('found');
}
//console.log(s.cId);
//Tab
const t_found = pc_tab.find(el => { if (el.cId == t.cId ) return true; return false;})
if (!t_found) {
pc_tab.push(t);
console.log('found:', t);
}
//Group
const g_found = pc_group.find(el => { if (el.cId == g.cId ) return true; return false;})
if (!g_found) {
pc_group.push(g);
//console.log('found');
}
//Link
const l_found = pc_link.find(el => { if (el.cId == l.cId ) return true; return false;})
if (!l_found) {
pc_link.push(l);
//console.log('found');
}
});
let resultData = null;
let flatData = [...pc_root, ...pc_tab, ...pc_group, ...pc_link];
if (activeOnly)
resultData = flatData.filter(f => f.Active=='1' );
else resultData = flatData;
let TabSearchResult = {Level: "Tab", pId: "Root", cId: "SearchResult", pName: "Root", cName: "SearchResult", name: "SearchResult", title: "SearchResult", Active: "1"}
resultData.push(TabSearchResult);
return resultData;
}
baseData.filter(r => {if (r.Level=="Tab") return r} );
new_data = {
if (typeof searchText == "string"
&& searchText.length > 0
)
return stratify(searchData).each((d) => {
d.name = d.id;
d.size = 1;
});
else
return stratify(baseData).each((d) => {
d.name = d.id;
d.size = 1;
});
}
dx = 20
dy = width / 7
margin = ({ top: 40, right: 60, bottom: 40, left: 60 })
width = window.innerWidth - margin.left - margin.right
style = html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital@0;1&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Futura:ital@0;1&display=swap">
<style>
circle:hover {stroke: #f8ad0a;}
body, svg {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
/* font-size: 48px; */
}
</style>
`
tree = d3.tree().nodeSize([dx, dy])
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
d3 = require("d3@5")
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.
