FileAttachment("test-1.csv").text()
d3.csvParse(await FileAttachment("test-1.csv").text())
data = d3.csvParse(await FileAttachment("test-1.csv").text(), d3.autoType)
y = d3.scaleBand()
.domain(data.map(d => d.Year))
.range([0, 20 * data.length])
viewof state = select(indicator)
Type TeX, then Shift-Enter.
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", y.range()[1])
.attr("font-family", "sans-serif")
.attr("font-size", "12")
.attr("text-anchor", "end");
const datanew = data.map((d) => {
return {Year: d.Year, Indicator: d[state]}
})
const x = d3.scaleLinear()
.domain([0, d3.max(datanew, d => d.Indicator)])
.range([0, width])
const bar = svg.selectAll("g")
.data(datanew)
.join("g")
.attr("transform", d => `translate(0,${y(d.Year)})`);
bar.append("rect")
.attr("fill", "steelblue")
.attr("width", d => x(d.Indicator))
.attr("height", y.bandwidth() - 1)
.on('mouseover', function (e, d, i) {
//We define a hovering function here and we will use it below.
//Here, we create our tooltip. We will define its features below this code block.
tooltip
.html(
`<div>${d.Indicator}</div>`)
.style('visibility', 'visible');
d3.select(this).attr('fill', '#ECD444');
})
.on('mousemove', function (e) {
//function e is for the mouse hover movement. What happens when you hover over the graph is created by this line of code.
//You can play with the design of the tooltip and see what happens.
tooltip
.style('top', e.pageY + 10 + 'px')
.style('left', e.pageX + 10 + 'px');
})
.on('mouseout', function () {
// This function defines the state of the tooltip when we are not hovering over.
tooltip.html(``).style('visibility', 'hidden');
d3.select(this).transition().attr('fill', 'steelblue');
});
bar.append("text")
.attr("fill", "yellow")
.attr("x", d => x(d.Indicator) - 3)
.attr("y", y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => d.Indicator);
return svg.node();
}
tooltip = d3
.select('body')
.append('div')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', '#26FFE6')
.style('border-radius', '3px')
.style('color', '#D84797');
indicator=["COEMiami", "COEWake"]
width = 420
d3 = require("d3@6")
import { select } from "@jashkenas/inputs"
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.
