Bioinformatics data scientist.
chart(sumstat3.sort(sortFunc));
/*Here the classic join() pattern cannot really be applied as we do not want to update the plots themselves - we want to redispose them: we want to redraw all the svg elements depending on the (new) order. So instead of the chart = {const svg= d3.create; ... return svg.node();} code, we do: chart = function(<data>){...} and we call the chart explicitely above with the chart(sumstat3.sort(sortFunc)); instruction.*/
chart = function(sumstat3){
/*Here instead of calling a DOM.svg, call a DOM.div*/
//const svg = d3.select(DOM.svg(width - 0, height))
const svg = d3.create("div")
.attr("viewBox", [0, 0, width - 0, height])
const groups = svg
.selectAll("uniqueChart")
.data(sumstat3)
.enter()
.append("svg")
.attr("width", innerwidth + margin.left + margin.right)
.attr("height", innerheight + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.attr("fake", function(d){console.log("d0");console.log(d)})
groups
.append("g")
.attr("transform", "translate(0," + innerheight + ")")
.call(d3.axisBottom(x).ticks(3))
groups
.append("g")
.call(d3.axisLeft(y).ticks(5));
// Draw the line .selectAll("circle").data((d) => d.arr).enter().append("circle")
groups
.append("path")
.attr("fill", function(d){ return color(d.key) })
.attr("stroke", "none").attr("fake", function(d){console.log("d1");console.log(d)})
.attr("d", function(d){
return d3.area()
.x(function(d) { return x(d.year) })
.y0(y(0))
.y1(function(d) { return y(+d.n) })
(d.values)
})
// Add titles
groups
.append("text")
.attr("text-anchor", "start")
.attr("y", -5)
.attr("x", 0)
.text(function(d){ return(d.key + " " + d.team)})
.style("fill", function(d){ return color(d.key) })
.style("font", "9px sans-serif")
.style("font-weight", "bold")
return svg.node()
}
url = "https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv"
data = d3.csv(url)
allKeys = Array.from(sumstat.keys());
sumstat = d3.groups(data, d => d.name) // nest function allows to group the calculation per level of a factor
y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return +d.n; })])
.range([ innerheight, 0 ]);
x = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.year; }))
.range([ 0, innerwidth ]);
// color palette
color = d3.scaleOrdinal()
.domain(allKeys)
.range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
margin = ({top: 30, right: 0, bottom: 30, left: 50})
innerwidth = 140 - margin.left - margin.right
innerheight = 160 - margin.top - margin.bottom
sumstat2 = convertD3V6ToD3V5(sumstat)
sumstat3 = addDummyAttibutes(sumstat2)
teamsNonUnique = sumstat3.map(d => d.team)
teams = teamsNonUnique.filter((x, i, a) => a.indexOf(x) === i)
function addDummyAttibutes(inObj){
let obj = {}
inObj.forEach(function(e){
if(e.key === "Helen" || e.key == "Amanda"){
e.team = "teamA"
}else if(e.key === "Betty" || e.key == "Dorothy"){
e.team = "teamB"
}else if(e.key === "Linda" || e.key == "Deborah"){
e.team = "teamC"
}else if(e.key === "Jessica" || e.key == "Patricia"){
e.team = "teamD"
}else if(e.key === "Ashley"){
e.team = "teamE"
}
})
return inObj;
}
height = 400
d3 = require("d3@6")
Sortable = require("sortablejs")
DraggableList = function (values) {
var list = html`<ul style="list-style-type: '≡ '; cursor: move">
${values.map(v => "<li>"+v+"</li>").join("")}
</ul>`
list.value = [...list.children].map(a=>a.innerText)
Sortable.create(list)
Sortable.utils.on(list,"update",()=>{
list.value = [...list.children].map(a=>a.innerText);
list.dispatchEvent(new CustomEvent("input"))
})
return list
}
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.
