Published
Edited
Oct 18, 2020
data = [
{date: "1989", count: 1, forline: [{x: 1, y: 1}, {x:2, y:2}, {x:3, y:3}]},
{date: "1990", count: 2 , forline: [{x: 1, y: 3}, {x:2, y:2}, {x:3, y:1}]},
{date: "1991", count: 3 , forline: [{x: 1, y: 1}, {x:2, y:1}, {x:3, y:1}]},
{date: "1992", count: 1 , forline: [{x: 1, y: 1}, {x:2, y:3}, {x:3, y:1}]},
{date: "1993", count: 3 , forline: [{x: 1, y: 3}, {x:2, y:1}, {x:3, y:3}]},
]
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g")
g
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count))
.attr("width", x.bandwidth())
.on('mouseover', function (d, i) {
// run line function
// and update the data to be the forline of the selected bar
makeLineFunction(d.forline)
tooltip.style("visibility", "visible")
})
.on('mouseout', function (d, i) {
return tooltip.style("visibility", "hidden")
// maybe i can use something like exit and remove here on the tooltip div?
// tooltip.exit().remove()
})
.on("mousemove", function( ){
return tooltip.style("top", (d3.event.pageY-20)+"px")
.style("left",(d3.event.pageX+20)+"px");
})
svg.append("g")
.call(xAxis);
return svg.node();
}
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right - 200])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)]).nice()
.range([height - margin.bottom, margin.top])
color = "black"
height = 500
margin = ({top: 30, right: 0, bottom: 30, left: 40})
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].date).tickSizeOuter(0))
md `# Tooltip!
### ✅ With fake data just make the same plot on all hovers
### 🔳 now work on tying joins to each bar's forline data`
html`
<style>
.tooltip {
border: 3px solid #CCCCCC;
border-radius: 3px;
filter: drop-shadow(0 0 0.25rem #CCCCCC);
}
</style>
`
tooltip = d3.select("body")
.append("div")
.attr('class','tooltip')
.style("height", "100px")
.style("width", "200px")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("color", "black")
.style("background-color", "#FFFFFF")
tooltipsvg = tooltip.append("svg")
data_line = [
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 3},
{x: 4, y: 4},
{x: 5, y: 5},
{x: 6, y: 4},
{x: 7, y: 3},
{x: 8, y: 2},
{x: 9, y: 1}
]
md `TODO: Need to scale these to the largest number in all the foreach arrays x's and y's`
d3.max(data.map(function(o) { return o.forline; }).flat(), (d) => d.y)
yScale = d3.scaleLinear()
.domain([0, d3.max(data.map(function(o) { return o.forline; }).flat(), (d) => d.y)]).nice()
.range([80, 20])
xScale = d3.scaleLinear()
.domain(d3.extent(data.map(function(o) { return o.forline; }).flat(), (d) => d.x))
.range([20,180])
line = d3.line()
.defined(d => !isNaN(d.y))
.x(d => xScale(d.x))
.y(d => yScale(d.y))
md `This was the call I used to make the SAME graph on each plot using the dummy data`
/*
makeLine = {
// Create an empty SVG with specified width and height.
const svgtooltip = d3.select(".tooltip");
// Draw the line.
svgtooltip.append("svg").append('path')
.datum(data_line)
.attr('d', line)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2)
return svgtooltip.node();
}
*/
makeLineFunction = function(data) {
tooltipsvg.selectAll("path")
.data([data])
.join('path')
.attr('d', line)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2)
return tooltipsvg.node();
}
d3 = require("d3@5")
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.
