Published
Edited
Jul 15, 2020
Insert cell
md`# Bar chart with scaleUtc & brush testing`
Insert cell
Insert cell
chart = {
const barWidth = getBarWidth();
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + barWidth, height]);
// legend
const legendList = d3.select('#label')
.selectAll('li')
.data(data)
.join('li')
.text(d => d.time)
.on('mouseover', function() { d3.select(this).style('background', 'blue') })
.on('mouseout', function() { d3.select(this).style('background', 'none') })
.on('click', function () {
const id = d3.select(this).text();
const rect = d3.select('#unx'+ id);
rect.attr('fill', 'red');
})
// crosshair
const crossHairG = svg.append('g');
const crosshair = crossHairG.append('g')
.attr('class', 'line');
// create vertical line
crosshair.append('line')
.attr('id', 'crosshairY')
.attr("y1", 0)
.attr("y2", height)
.attr('stroke', '#aaaaaa')
.attr('stroke-width', barWidth + 10 + 'px')
.style('display', 'none');
// brush
const brush = d3.brushX()
.extent([[margin.left - barWidth / 2, 0], [width - margin.right, height - margin.bottom + 0.5]])
.on("end", brushEnded);
svg.append("g")
.call(brush);
// rect & rect event
svg.append("g")
.attr("fill", color)
// .on('mouseout', () => d3.select(`#crosshairY`).style('display', 'none').transition())
.selectAll("rect")
.data(data)
.join("rect")
.attr('id', d => 'unx' + d.time)
.attr("x", (d, i) => x(d.time) - barWidth/2)
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count))
.attr("width", barWidth)
.on('mouseover', onMouseOver)
.on('mousemove', onMouseMove)
.on('mouseout', onMouseOut);

svg.append("g")
.call(xAxis);

svg.append("g")
.call(yAxis);
// grid
const yGrid = g => g
.attr("transform", "translate(" + margin.left + ",0)")
.call(d3.axisLeft(y).tickSize(-width + margin.right))
.call(g => g.selectAll("text").remove())
.call(g => g.select('path').remove()) // remove vertical line
svg.append("g")
.attr("class", "y-grid")
.style("opacity", 0.08);
svg.selectAll(".y-grid").transition().duration(0)
.call(yGrid);
return svg.node();
}
Insert cell
getBarWidth = () => (width - margin.left - margin.right)/data.length;
Insert cell
Insert cell
Insert cell
function onMouseOut() {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this).transition().attr('fill', color);
d3.select(`#crosshairY`).style('display', 'none').transition();
}
Insert cell
onMouseMove = () => {
tooltip
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px');
}
Insert cell
function onMouseOver (d, i) {
tooltip
.html(`<div>time: ${d.time}</div><div>count: ${d.count}</div>`)
.style('visibility', 'visible');
const rect = d3.select(this).transition().attr('fill', hoverColor);
const x = rect.node().attributes.x.value;
const width = rect.node().attributes.width.value;
d3.select(`#crosshairY`)
.attr("x1", +x +(+width/2)).attr("x2", +x +(+width/2)).attr("opacity", 1)
.style('display', 'block');
}
Insert cell
Insert cell
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.time))
.range([margin.left, width - margin.right])
Insert cell
Insert cell
xAxis = (g) => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.selectAll('.domain').remove();

// xAxis = g => g
// .attr("transform", `translate(0,${height - margin.bottom})`)
// .call(d3.axisBottom(x).tickFormat(i => data[i].time).tickSizeOuter(0))
Insert cell
Insert cell
Insert cell
hoverColor = '#eec42d';
Insert cell
color = '#437c90';
Insert cell
Insert cell
margin = ({top: 30, right: 0, bottom: 30, left: 150})
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more