The avatar for @petroleumjelliffe
Pete Jelliffe
Published
Edited
Dec 15, 2021
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof greek = horizontalNav(["alpha", "beta", "gamma", "delta"])
Insert cell
phonetic
Insert cell
viewof phonetic = horizontalNav([{label: "adam"}, {label: "baker"}, {label: "charlie"}, {label: "david"}], {label:"name", format: d => d.label})
Insert cell
horizontalNav = function(itemData, options = {label:"horizontal-nav", format: d => d}) {
//unordered list weill be our nav
const ul = d3.create("ul").attr("id", options.label || "horizontal-nav"+Math.ceil(Math.random()*100), options.format || (d => d))
.attr("class", "horizontal-nav")

//itemData array will be our nav items
const items = ul.selectAll("li")
.data(itemData)
.join(enter => enter
.append("li").attr("class", "nav-item")
.append("a")
.attr("href", "#"+options.label)
.text(options.format),
update => update,
exit => exit.remove())
.on("mousedown", function(event) {
const selection = d3.select(this.parentNode)
selection.classed("active", true)
})
.on("mouseup", function(event) {
//select all nav items
const items = d3.selectAll(".nav-item")

//select clicked li.nav-item
const selected = d3.select(this.parentNode)

//for each, set class to t/f whether it's the clicked item
items.each(function(text) {
const item = d3.select(this)
console.log(selected, item)
item.classed("active", selected.node() == item.node() )
})
})
.on("click", function(event) {
const selection = d3.select(this)
ul.node().value = selection.datum()
ul.node().dispatchEvent(new Event("input", {bubbles: true}));
})

ul.node().value = options.value || items.data()[0]

return ul.node()
}
Insert cell
html`<style>
.horizontal-nav {
margin:10px;
height:50px;

}
.horizontal-nav li {
display:block;
margin: 0;
padding:0;
background:#fff;
float:left;
}
.horizontal-nav li a {
margin:0;
width:100%;
display:block;
padding:10px;

}
.horizontal-nav li.active {
font-weight:bold;
}

a:hover {
background: #cef;
}
</style>`
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