Published
Edited
Nov 22, 2019
speciesResponse = d3.json('https://rest.ensembl.org/info/species?content-type=application/json')
species = speciesResponse.species.map(d => ({
id: d.name,
name: d.display_name,
taxonomyId: d.taxon_id
}));
table(species, {
sortable: true,
paged: 10,
columns: {
id: { title: 'Species ID' },
name: { title: 'Name' },
taxonomyId: { title: 'Taxonomy ID' },
}
})
speciesFiltered = species.filter(d => d.name.toLowerCase().includes(search))
selectedSpecies = d3.json(`https://rest.ensembl.org/info/assembly/${selectedSpeciesId}?content-type=application/json`)
chromosomes = selectedSpecies.top_level_region.filter(d => d.coord_system === 'chromosome')
chromosomesSortByComparator = {
switch (chromosomesSortBy) {
case 'name':
return (a, b) => d3.ascending(
chromosomesOrderByName.indexOf(a.name),
chromosomesOrderByName.indexOf(b.name)
);
case 'length':
default:
return (a, b) => d3.descending(a.length, b.length);
}
}
chromosomesSorted = chromosomes.sort(chromosomesSortByComparator)
x = d3.scaleBand()
.domain(chromosomesSorted.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
y = {
switch(chromosomesLengthScale) {
case 'log':
return d3.scaleLog()
.domain([1, d3.max(chromosomes, d => d.length)])
.range([height - margin.bottom, margin.top]);
case 'linear':
default:
return d3.scaleLinear()
.domain([0, d3.max(chromosomes, d => d.length)]).nice()
.range([height - margin.bottom, margin.top])
}
}
// g is an svg group element here, which d3.axisBottom fills with the axis content
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeInner(-width).tickSizeOuter(0))
.call(g => g.selectAll(".tick line").attr('stroke', '#bbb'))
updateChart = {
// this cell is automatically run by observable when any of the cells
// that it depends on change, so it updates the chart as needed
// select the parent elements in the chart above and control their
// content programmatically using d3 methods
const gX = d3.select(chart).select('.x-axis')
const gY = d3.select(chart).select('.y-axis')
const gBars = d3.select(chart).select('.bars')
// bottom of the chart
const y0 = height - margin.bottom
// set up a transition to animate smoothly between states
const t = d3.transition().duration(2000)
// create the bars (each as a rect element) using d3 update pattern
const bars = gBars
.selectAll('rect')
.data(
chromosomesSorted,
d => d.name
)
.join(
enter => enter // new elements (on first render)
.append('rect')
.attr('x', d => x(d.name))
.attr('y', y0)
.attr('height', 0)
.attr('width', x.bandwidth())
.call(
// transitions are a complex topic, but you can read about them here:
// https://github.com/d3/d3-transition
enter => enter
.transition(t)
.attr('y', d => y(d.length))
.attr('height', d => y0 - y(d.length))
),
update => update // updating elements (on subsequent renders)
.call(
update => update
.transition(t)
.attr('x', d => x(d.name))
.attr('y', d => y(d.length))
.attr('height', d => y0 - y(d.length))
.attr('width', x.bandwidth())
),
exit => exit // removing elements (on subsequent renders)
.call(
exit => exit
.transition(t)
.attr('y', height - margin.bottom)
.attr('height', 0)
.remove()
)
);
// render the axes (d3 generates ticks and labels for you)
gX.transition(t).call(xAxis);
gY.transition(t).call(yAxis);
}
chart = {
// create a new svg element
const svg = d3.select(DOM.svg(width, height));
// append a group element inside the svg to contain the x axis
const gX = svg.append("g").classed('x-axis', true)
// append a group element inside the svg to contain the y axis
const gY = svg.append("g").classed('y-axis', true)
// append a group element inside the svg to contain the bars of the chart
// and set the fill attribute, which will be inherited by each bar
const gBars = svg
.append("g")
.classed('bars', true)
.attr("fill", "steelblue")
// return the chart (so that the cell renders it)
return svg.node();
}
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.
