// primary code from Lab 12 part 2 (section on just nodes & labels); modified everything else from there.
barChart = {
const scale = 0.60
const barWidth = 15
// create a container for the svg; use standard margin notation
const container = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+margin.bottom))
// create a group to hold the viz, adjust the coordinates using standard margin notation
const barGroup = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("font", "12px Roboto")
// create the nodes and labels similarly to Lab 1;
// the new part here is that x locations are determined by the xScale function;
// we also add some padding to y to move it away from the margins
// we assign an attribute named id, as this can be useful to have later
barGroup.selectAll("nodes")
.data(nodes)
.join("rect")
.attr("x", d => xScale(d.Season))
.attr("y", d => -600)
.attr("width", barWidth)
.attr("height", d => d.Resorts * scale)
.attr("fill", "white")
.attr("id", d => d.id)
.transition()
.ease(d3.easeLinear)
.duration((d,i) => i*200)
.attr("fill", "lightblue")
.attr("y", d => height - d.Resorts * scale - 40);
barGroup.selectAll("nodeResorts")
.data(nodes)
.enter().append("text")
.attr("x", d => xScale(d.Season))
.attr("y", d => height - d.Resorts * scale - 50)
.attr("fill", "#fff")
.attr("opacity","0")
.text(d => d.Resorts)
.transition()
.ease(d3.easeBackIn)
.duration(8000)
.attr("opacity", "100")
.attr("fill", "#555");
barGroup.selectAll("nodeLabels")
.data(nodes)
.enter().append("text")
.attr("x", d => xScale(d.Season) + 15)
.attr("y", height-20)
.attr("fill", "black")
.style("text-anchor", "middle")
.text(d => d.Season)
barGroup.append("text")
.text('Number of US Ski Resorts in Operation Per Season')
.attr("opacity", "0.8")
.style("font", "16px Roboto");
return container.node();
}
nodesResorts = nodes.map(function(d){return d.Resorts});
nodesSeasons = nodes.map(function(d){return d.Season});
margin = ({top: 20, bottom: 20, left: 30, right: 30});
height = 450 - margin.top - margin.bottom;
xScale = d3.scalePoint()
.domain(nodesSeasons)
.range([0,width])
yScale = d3.scalePoint()
.domain(nodesSeasons)
.range([0,height])
d3 = require("d3@^5.8")
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.
