Bioinformatics data scientist.
md`# Simple multiple charts example`
md`A simple convenient way of generating multiple panels on a single div tag`
chart = {
/*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(sumstat2)
.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)})
.style("fill", function(d){ return color(d.key) })
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)
function convertD3V6ToD3V5(merged){
let arrayOfObjects = []
for(let i=0; i<merged.length; i++) {
let object = {"key" : merged[i][0]}
for(let j=0; j<merged.length; j++) {
object["values"] = merged[i][1]
}
arrayOfObjects.push(object)
}
return arrayOfObjects;
}
height = 400
d3 = require("d3@6")
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.
