chart = {
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 40;
const tooltipPadding = 20;
const default_color = "steelblue";
const highlight_color = "orange";
const x = d3.scaleBand()
.domain(data.map(d => d.letter))
.range([marginLeft, width - marginRight])
.padding(0.1);
const xAxis = d3.axisBottom(x).tickSizeOuter(0);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.frequency)]).nice()
.range([height - marginBottom, marginTop]);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`);
const tooltip = d3.select("body").append("div");
// Styles you may want to use: background, border, padding, etc.
// Remember to set div invisible and make position absolute for default
tooltip.attr('id', "tooltip");
tooltip.html("TOOLTIP");
tooltip.style('border', "1px solid black;");
tooltip.style('position', 'absolute');
tooltip.style('color', default_color);
tooltip.style('display', 'none');
// Create a bar for each letter.
// TODO: 1. Add tooltip functionalities
// 2. Add an hover and on-click highlight color change to bars
const bar = svg.append("g")
.attr("fill", default_color)
.selectAll("rect")
.data(data)
.join("rect")
.style("mix-blend-mode", "multiply") // Darker color when bars overlap during the transition.
.attr("x", d => x(d.letter))
.attr("y", d => y(d.frequency))
.attr("height", d => y(0) - y(d.frequency))
.attr("width", x.bandwidth());
bar.on('mouseover', function (e) {
console.log(12, tooltip, e.pageX);
tooltip
.style('left', (e.pageX + tooltipPadding) + 'px')
.style('top', (e.pageY + tooltipPadding) + 'px')
.style('display', 'block')
.style('background', 'black');
d3.select(this).style('fill', highlight_color);
})
bar.on('mousemove', function(e) {
tooltip
.style('left', (e.pageX + tooltipPadding) + 'px')
.style('top', (e.pageY + tooltipPadding) + 'px')
.style('display', 'block')
.style('background', 'black');
})
bar.on('mouseout', function (e) {
const thisBar = d3.select(this);
const thisBarClicked = thisBar.classed("clicked");
thisBar.style('fill', thisBarClicked ? highlight_color : default_color);
tooltip.style('display', 'none');
})
bar.on('click', function (e) {
const thisBar = d3.select(this);
const thisBarClicked = thisBar.classed("clicked");
thisBar.classed("clicked", !thisBarClicked);
})
// Add your code for the tooltip and on-click after .attr("width", x.bandwidth())
// Function you will use .on(eventType, listenerFunction)
// Tooltip: "mouseover", "mousemove", and "mouseout" functionalities
// On mouseover, set the bar color to highlight color, set the tooltip to visible and define position, and display image
// selector of the current bar can be defined by bar = d3.select(this)
// Tooltip message can be defined by .html(`YOUR MESSAGE`)
// On mousemove, update the tooltip position
// On mouseout, set tooltip back to invisible, if the bar is not clicked, reset color
// On-click event: "click", set the color to highlight color
// Use bar = d3.select(this) and bar.classed("clicked", bar.classed("clicked")) to select clicked/unclicked bars
// Create the axes.
const gx = svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(xAxis);
const gy = svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed()))
.call(g => g.select(".domain").remove());
function update(order) {
console.log(order);
// Get selected ordered data mapping
x.domain(data.sort(order).map(d => d.letter));
// TODO: Add animation to bars before setting new x positions of bars (.attr("x", d => x(d.letter)))
bar.data(data, d => d.letter).order().transition().duration(750).delay(30).attr("x", d => x(d.letter));
// Function you may need:
// trainsition(): normalizes the start and end values, and calculates all their in-between states
// duration(): set the duration of animation, let's set to 750 for the bar, feel free to explore
// delay(): set delays to objects, we can add a stagger effect to the bars
// TODO: Add a similar animation to x ticks before changing ticks (before .call(xAxis))
gx.call(xAxis).selectAll(".tick");
};
// Return the chart, with an update function that takes as input a domain
// comparator and transitions the x axis and bar positions accordingly.
return Object.assign(svg.node(), {update});
}