The avatar for @weijuntan
Wei Jun
A data visualization TA at University of Washington. Skilled in D3.js and Vega-Lite.
Public
Edited
May 9, 2023
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sort_species_data = {
d3.select("#speciesbarchart")
.selectAll("#sortbyvalue")
.remove()

d3.select("#speciesbarchart")
.append("input")
.attr("type", "button")
.attr("id", "sortbyvalue")
.attr("value", "Sort by value")
.on("click", function() {
// Get previous state
let prev_value = d3.select("#speciesbarchart")
.select("#sortflag")
.attr("value")

// Change the button text
d3.select("#speciesbarchart")
.select("#sortbyvalue")
.attr("value", prev_value == 0 ? "Sort by species" : "Sort by value")

// Toggle the state
d3.select("#speciesbarchart")
.select("#sortflag")
.attr("value", prev_value ^ 1)

// Get the correct comparator function and sort both data
const comp = prev_value == 1
? ((a, b) => a.Species < b.Species ? -1 : a.Species > b.Species)
: ((a, b) => b.count - a.count);
species_data.sort(comp);
filtered_species_data.sort(comp);

// Redraw the visualization
resetData();
resetFilteredData();
resetClickListener();
})

function resetData() {
const svg = d3.select("#speciesbarchart")
.select("#scaffold")
.select("#data")

svg.selectAll("text")
.data(species_data)
.text((d, i) => d.Species)

svg.selectAll("rect")
.data(species_data)
.transition()
.duration(750)
.ease(d3.easeCubic)
.attr('width', function (d) { return species_breakdown_chart_params.wScale(Number(d.count))})
}

function resetFilteredData() {
const svg = d3.select("#speciesbarchart")
.select("#scaffold")
.select("#data")
.select("#filtereddata")

svg.selectAll("rect")
.data(filtered_species_data)
.transition()
.duration(750)
.ease(d3.easeCubic)
.attr('width', function (d) { return species_breakdown_chart_params.wScale(Number(d.count))})
svg.selectAll("text")
.data(filtered_species_data)
.transition()
.duration(750)
.ease(d3.easeCubic)
.attr("x", function(d,i) {return width * species_breakdown_chart_params.margin.left + species_breakdown_chart_params.wScale(Number(d.count)) + 10})
.text(function(d){ return d3.format(",")(Number(d.count)) })
}

function resetClickListener() {
const svg = d3.select("#speciesbarchart")
.select("#scaffold")
.select("#clicklistener")

svg.selectAll("rect")
.data(species_data)
.transition()
.duration(750)
.ease(d3.easeCubic)
.style("stroke-width", d => species_select.includes(d.Species) ? 1 : 0)
.on("click", setSpecies)
.on("mouseover", function() {
d3.select(this).style("fill-opacity", 0.3)
})
.on("mouseout", function() {
d3.select(this).style("fill-opacity", 0)
})

function setSpecies(event, d) {
console.log("clicked");
var _ = svg.property("value")
var index = _.indexOf(d.Species)
if (index >= 0) {
// it was already selected, deselect it now
d3.select(this)
.style("stroke-width", 0)
_.splice(index, 1)
}
else {
// it was not selected, select it now
d3.select(this)
.style("stroke-width", 1)
_.push(d.Species)
}
svg.property("value", _).dispatch("input")
}
}

return "Currently sort by " + (d3.select("#speciesbarchart").select("#sortflag").attr("value") == 0 ? "Species" : "Value")
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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