Published unlisted
Edited
Dec 12, 2019
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("-webkit-tap-highlight-color", "transparent")
.style('overflow-x', 'scroll');
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(captions)
.join("rect")
.attr("x", d => xts(d.timeStop))
.attr("y", 200)
.attr("height", d =>y(0) - y(d.laugh))
.attr("width", 1)
.on("mouseover",function(){
d3.select(this)
.attr("opacity", "0");
})
.on("mouseout",function(){
d3.select(this)
.attr("opacity", "1")
});
svg.append("g")
.selectAll('links')
.data(topics)
.enter()
.append('path')
.attr('d', function (d) {
var start = xtopics(d.timeStart)
var end = ytopics(d.topicEnd)
return ['M', start, height-101,
'A',
(start - end)/2, ',',
(start - end)/2, 0, 0, ',',
start < end ? 1 : 0, end, ',', height-101]
.join(' ');
})
.style("fill", "none")
.attr("stroke", "grey")
svg.append("line")
.attr("x1", 1)
.attr("y1", 290)
.attr("x2", width)
.attr("y2", 290)
.attr("stroke-width", 10)
.attr("stroke", "#DDE8F1");
svg.append("g")
.attr("fill", "black")
.attr("text-anchor", "end")
.style("font", "12px sans-serif")
.selectAll("text")
.data(captions)
.join("text")
.attr("x", d => xts(d.timeStart))
.attr("y", 290)
.attr("dy", "0.35em")
.text(d => d.start)
.attr("opacity", "0")
.on("mouseover",function(){
d3.select(this)
.attr("opacity", "1")
})
.on("mouseout",function(){
d3.select(this)
.attr("opacity", "0")
});
return svg.node();
}
d3 = require("d3@5")
captions =d3.csv("https://gist.githubusercontent.com/anupsathya/c66da4ca8f46786abfa42fa2751b495a/raw/4bf9bcdbca61ad62ed75a1abc86334989a9a7bc0/Captions.csv")
topics=d3.csv("https://raw.githubusercontent.com/anupsathya/data/master/stand-up/ali-wong--topics.csv")
y = d3.scaleLinear()
.domain([0, d3.max(captions, d => d.laugh)])
.range([height - margin.bottom, margin.top])
xts = d3.scaleLinear()
.domain([0, d3.max(captions, d => d.timeStop)])
.range([0, (size+2)]) //+2 to compensate for difference between start and stop
xtopics = d3.scaleLinear()
.domain([0, d3.max(topics, d => d.timeStart)])
.range([0, size])
ytopics = d3.scaleLinear()
.domain([0, d3.max(topics, d => d.topicEnd)])
.range([0, size])
height = 300
margin = ({top: 20, right: 0, bottom: 200, left: 0})
size = 200
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.
