Mainly coding for fun these days!
Public
Edited
Jan 30, 2023
chart = {
const svg = d3.create('svg')
.attr('width', width )
.attr('height', height)
// Here we render the x axis
svg.append('g')
.attr('class', 'x-axis')
// First set its container's (g) position to the
// bottom of the chart
.attr('transform', `translate(0,${ height- margin.bottom})`)
// then just call this to render it
.call( xAxis )
// it works the same for the y axis
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${ margin.left },0)`)
.call( yAxis )
// data.sort(function(a, b) { return b.total - a.total; });
svg.append('g')
.attr('class', 'bars')
.selectAll('rect')
.data(genes)
.join('rect')
.attr('class', 'bar')
.attr('x', d => x(d.year))
.attr('y', d => y(d.end))
// bandwidth is a special function of scaleBand
// it returns the width of the band (bar) based on the configuration
// we set up earlier
.attr('width', function(d,i) {return x.bandwidth()})
// remember that yScale(0) is the height of the entire chart
// so we subtract the y position of the top of the bar yScale(d.value)
// from it to get the total height of the bar.
.attr('height',d => y(d.start) - y(d.end))
.style("fill", function(d) { return color(d.name); }) //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);
var valueline = d3.line()
.x(function(d) { return x(d.sample); })
.y(function(d) { return y(d.total); });
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
return svg.node();
}
rotate = function(arr) {
var temp = arr.shift();
arr.push(temp);
};
tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Cost £</strong> <span style='color:red'>" + d.y2 + "K" + "</span>";
});
categories = [...new Set (genes.map(d => d.name))];
color = d3.scaleOrdinal(colscheme).domain(categories)
colscheme =["#14675a","#4b998b","#00ffff","#3cca73","#00b8dd","#29971b","#187c9a","#bcfd6f","#677932","#2f7ec5","#3385ff","#786306","#f3d89d","#fbb80f","#ff9000","#9c6bbc","#962d9d","#ff00e5","#874c62"].reverse();
margin = ({
top: 50,
right: 50,
bottom: 50,
left: 100
})
height = 600
width =1000
max = {
var c = 0
data.forEach(function(d) {
d.total = +d.total
if (d.total > c) {
c = d.total
}
})
return c
}
yAxis = d3.axisLeft()
.scale(y)
// .tickSize(-width, 0);
y1 = d3.scaleLinear()
.range([height, 0])
.domain([0, max * 1.1]);
y = d3.scaleLinear()
.domain([0, max*1.1])
.range([ height - margin.bottom, margin.top ])
xDomain = [...new Set (genes.map(d => d.year))];
x = d3.scaleBand()
.domain(xDomain)
.range([ margin.left, width - margin.right - margin.left ])
.padding(0.5)
xAxis = d3.axisBottom()
.scale(x);
// .tickSize(0, 0, 0)
// .tickPadding(6);
url = "https://docs.google.com/spreadsheets/d/1iEZrGN2cq3WQrqmHLjsWInzBczZokyXoVeO3nRCCv-M/edit#gid=0"
data = d3.csv(getCsvUrl(url), d3.autoType)
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}`
}
genes = {
var x
var arr = []
const columns = data.columns.slice(2);
data.forEach(function (d,i) {
var y0 = 1;
for (x = 0; x < columns.length; x++) {
arr.push({"name": columns[x], "start": y0, "height": +d[columns[x]], "end": y0 += +d[columns[x]],"total": d.total, "year": d.sample});
// y0 += +d[columns[x]]
// console.log(columns)
}
})
return arr
}
gene_filter = data
d3 = require('d3@5')
import { Tooltip } from "@clhenrick/tooltip-component"
html`
<style type="text/css">
body {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: black;
stroke-width: 3;
}
</style>
`
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.
