Mainly coding for fun these days!
Public
Edited
Jan 28, 2023
chart = {
let parent = this;
// if (!parent) {console.log(myJSON)
parent = document.createElement("div");
const svg = d3.select(DOM.svg(width, height))
.attr("width", width )
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
console.log("in")
// svg.call(tip);
// const tooltip = d3.select(document.createElement("div")).call(createTooltip);
// const genes
// genes.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.sample; }));
// console.log(x.domain())
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var rotate = function(arr) {
var temp = arr.shift();
arr.push(temp);
};
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
var valueline = d3.line()
.x(function(d) { return x(d.sample) + 25; })
.y(function(d) { return y(d.total/2); });
var sample = svg
.append("g")
.attr("class", "sample")
.selectAll("rect")
.data(genes)
.enter()
.append("rect")
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) {
// console.log(x.domain())
return y(d.y0) - y(d.y1); })
.style("fill", "blue") //function(d) { return color(d.name); })
.on("click", function(d) {
// var gene_index = categories_shift.indexOf(d.name);
// moveStuff(gene_index);
});
// .on('mouseover', tip.show)
// .on('mouseout', tip.hide);
svg.append("g")
.attr("class", "y axis")
.call(yAxisRight);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
//break
//break
var moveStuff = function(gene_index) {
svg.selectAll("path").remove();
var categories_shift = categories;
for (var i = 0; i < gene_index; i++) {
rotate(categories_shift);
}
data.forEach(function(d) {
var y0 = 0;
/// d.genes = genes = categories_shift.map(function(name) { return { name: name, y0: y0, y2: +d[name], y1: y0 += +d[name] }; });
// d.genes.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
})
// console.log(genes)
/// data.sort(function(a, b) { return b.genes[0].y1 - a.genes[0].y1; });
// console.log(genes);
x.domain(data.map(function(d) { return d.sample; }));
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
//svg.append("g")
// .attr("class", "y1 axis")
// .call(yAxisRight);
sample = svg.selectAll(".sample")
.data(data)
.attr("transform", function(d) { return "translate(" + x(d.sample) + ",0)"; });
sample.selectAll("rect")
.data(function(d) { return d.genes; })
.transition()
.delay(function(d, i) { return i * 50 })
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
last_sample = data[data.length - 1];
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
};
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var last_sample = data[data.length - 1];
// legtext.selectAll("text")
// .data(last_sample.genes)
// .enter()
// .append("text")
// .text(function(d) { return d.name; })
// .attr("x", function(d) { return x(last_sample.sample) + x.bandwidth() + 15; })
// .attr("y", function(d) { return (y(d.y0) + y(d.y1)) / 2; })
// .attr("font-size", "11px")
// .attr("fill", "black");
parent.appendChild(svg.node());
// parent.appendChild(tooltip.node());
parent.groups = sample;
//});
setTimeout(trans, 3000);
function trans () {
// gene_index = categories_shift.indexOf("Counselling");
// moveStuff(gene_index);
};
//
return parent;
}
margin = ({ top: 40, right: 30, bottom: 30, left: 40 })
y1.domain([0, max * 1.1]);
y.domain([0, max * 1.1]);
color.range(Spectral.length);
color.domain(categories);
categories_shift = categories;
categories = d3.keys(data[0]).filter(function(key) { return key !=="sample" && key !=="total"; });
createTooltip = function (el) {
el.style("position", "absolute")
.style("pointer-events", "none")
.style("top", 0)
.style("opacity", 0)
.style("background", "white")
.style("border-radius", "5px")
.style("box-shadow", "0 0 10px rgba(0,0,0,.25)")
.style("padding", "10px")
.style("line-height", "1.3")
.style("font", "11px sans-serif");
}
yAxisRight = d3.axisRight()
.scale(y1) // This is the new declaration for the 'Right', 'y1'
.tickSize(width, 0, 0);
yAxis = d3.axisLeft()
.scale(y)
.tickSize(-width, 0);
xAxis = d3.axisBottom()
.scale(x)
.tickSize(0, 0, 0)
.tickPadding(6);
color = d3.scaleOrdinal()
y1 = d3.scaleLinear()
.range([height, 0]);
y = d3.scaleLinear()
.rangeRound([height, 0]);
x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
width = 960
height = 500
getCsvUrl = url => {
url = new URL(url);
const id = url.pathname.split("/")[3]
const gid = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;
return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`
}
url = "https://docs.google.com/spreadsheets/d/1iEZrGN2cq3WQrqmHLjsWInzBczZokyXoVeO3nRCCv-M/edit#gid=0"
max = {
var c = 0
data.forEach(function(d) {
d.total = +d.total
if (d.total > c) {
c = d.total
}
})
return c
}
genes = {
var x
var arr = []
const columns = data.columns.slice(2);
data.forEach(function (d,i) {
var y0 = 0;
for (x = 0; x < columns.length; x++) {
arr.push({"name": columns[i], y0: y0, y2: +d[columns[x]], y1: y0 += +d[columns[x]],"total": d.total });
// console.log(columns)
}
})
return arr
}
data = d3.csv(getCsvUrl(url), d3.autoType)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@5")
Spectral = ["#9e0142", "#d53e4f", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#e6f598", "#abdda4", "#66c2a5", "#3288bd", "#5e4fa2"]
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.
