32:T4e1,md`# One chart a day - Adding Highlight and Interactive Hover Labels to a Bar Chart This is a continuation of [One chart a day: Bar Chart](https://observablehq.com/@richdayandnight/one-chart-a-day-bar-chart) Objectives: 1. Create a static bar chart with one of the bars highlighted 2. Add axes labels 3. Add hover labels to the bar chart > *Today, I came across [Di's blog on Medium](https://medium.com/@didoesdigital/learning-data-viz-with-d3-8b54afcef74) about learning data visualization with d3. I think she does a great job in fast-tracking learning d3 and I want to learn a few tricks from her (wait hmm, actually a lot haha 👀). For example, she's critical on filling her gaps of knowledge. She does that by [understanding what each line of code](https://observablehq.com/@didoesdigital/26-apr-2020-bar-chart-revisited) and mostly, reading documentations and tutorials scattered around the web. I've looked at some of her Observable notebooks and it's funny and cool to see us running into the same problems and inefficiencies (e.g. No quick way of making a cell turn into a Markdown. No option to automatically unpin all cells by default).(@Didoesdigital If you ever read this, Thank you for sharing your journey in learning D3 🙌)* `33:T67d,chart = { const height = 480; const arbitrary_padding = 160; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.number_of_apprehensions)]).nice() .range([arbitrary_padding+margin.left, width - margin.right]); const y = d3.scaleBand() .domain(data.map(d => d.violation)) .range([480 - margin.bottom, margin.top]) .padding(0.2); const xAxis = g => g .attr('transform', `translate(0,${480 - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 100)) const yAxis = g => g .attr("transform", `translate(${arbitrary_padding+margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) const yTitle = g => g.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", 10) .attr("transform", `translate(${100+margin.left},0)`) .text("Violations") const xTitle = g => g.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("x", width/2) .attr("y", height) .text("Number of Apprehensions") svg.append("g") .attr("fill", color) .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.violation)) .attr("width", d => x(d.number_of_apprehensions) - x(0)) .attr("height", y.bandwidth()) .filter(function(d) { return d.number_of_apprehensions >= arbitrary_threshold; }) .attr("fill", highlight_color); svg.append('g') .call(xAxis); svg.append('g') .call(yAxis); svg.call(yTitle); svg.call(xTitle); return svg.node(); } 34:Tc39,chart2 = { const height = 480; const arbitrary_padding = 160; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.number_of_apprehensions)]).nice() .range([arbitrary_padding+margin.left, width - margin.right]); const y = d3.scaleBand() .domain(data.map(d => d.violation)) .range([480 - margin.bottom, margin.top]) .padding(0.2); const xAxis = g => g .attr('transform', `translate(0,${480 - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 100)) const yAxis = g => g .attr("transform", `translate(${arbitrary_padding+margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) const yTitle = g => g.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", 10) .attr("transform", `translate(${100+margin.left},0)`) .text("Violations") const xTitle = g => g.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("x", width/2) .attr("y", height) .text("Number of Apprehensions") svg.append("g") .attr("fill", color) .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.violation)) .attr("width", d => x(d.number_of_apprehensions) - x(0)) .attr("height", y.bandwidth()) .on("mouseover", function(d) { d3.select(this).attr("fill", highlight_color); //Get this bar's x/y values, then augment for the tooltip //Get this bar's x/y values, then augment for the tooltip var yPosition = parseFloat(d3.select(this).attr("y")) + y.bandwidth() / 2; var xPosition = parseFloat(d3.select(this).attr("x")) / 2 + width / 2; tooltip .html( `

Violation: ${d.violation}

Number of Apprehensions: ${d.number_of_apprehensions}

` ) .style('visibility', 'visible'); //Update the tooltip position and value //d3.select("#tooltip") // .style("left", xPosition + "px") // .style("top", yPosition + "px") // .select("#value") // .text(d.violation); //Show the tooltip //d3.select("#tooltip").classed("hidden", false); }) .on('mousemove', function () { tooltip .style('top', d3.event.pageY - 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', color); }); svg.append('g') .call(xAxis); svg.append('g') .call(yAxis); svg.call(yTitle); svg.call(xTitle); return svg.node(); } 35:T53f,chart3 = { const height = 480; const svg = d3.select(DOM.svg(width, height)); const margin_right = 200; const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.number_of_apprehensions)]).nice() .range([margin.left, width - margin_right]); const y = d3.scaleBand() .domain(data.map(d => d.violation)) .range([480 - margin.bottom, margin.top]) .padding(0.2); const xAxis = g => g .attr('transform', `translate(0,${480 - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 100)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) svg.append("g") .attr("fill", color) .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.violation)) .attr("width", d => x(d.number_of_apprehensions) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "black") .attr("text-anchor", "after-edge") .style("font", "12px sans-serif") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.number_of_apprehensions) + 5) .attr("y", d => y(d.violation) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.violation + " | " + d.number_of_apprehensions); return svg.node(); }36:[{"id":"fef1f3a1cde9272fde985a1247008cee03c18dfd00d49bbabccb3ad485db8aee76f6aa75af2ba38382317db95fe503ae997b801e83ebbb6a614fbbbbe725f401","href":"https://static.observableusercontent.com/files/fef1f3a1cde9272fde985a1247008cee03c18dfd00d49bbabccb3ad485db8aee76f6aa75af2ba38382317db95fe503ae997b801e83ebbb6a614fbbbbe725f401","name":"mmda_topviolations2016.csv","type":"text/csv","lastModified":1592985943158.063,"size":514}] 30:{"title":"One chart a day - Adding Highlight and Interactive Hover Labels to a Bar Chart","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md `## Load data\n\n[Data source](https://data.gov.ph/?q=dataset/top-violations)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = {\n const text = await FileAttachment(\"mmda_topviolations2016.csv\").text();\n return d3.csvParse(text, ({violation, number_of_apprehensions}) => ({\n violation: violation,\n number_of_apprehensions: parseFloat(number_of_apprehensions.replace(/,/g, ''))\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"md `## Create a static bar char\n\n- Drag the threshold slider to change the threshold of the highlighted bars\n\n> *For anybody else who reads this, please do note that I did not think much about choosing the colors (yet). I'll be researching on choosing a better color palette for my future charts. I just the colors that look pretty for now lol.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"html `

Highlight the violations with number of apprehensions greater than: ${arbitrary_threshold}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof arbitrary_threshold = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md` ## Create a bar chart with tooltip\n\n- Implementation of tooltip is done through the help of [this notebook](https://observablehq.com/@bsaienko/animated-bar-chart-with-tooltip)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background-color', 'white')\n .style('border-radius', '4px')\n .style('-webkit-border-radius', '10px')\n .style('-moz-border-radius', '10px')\n .style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('color', color)\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Some experimental bar chart (Optional)\n\n- Create a horizontal bar chart where labels are beside the bars\n\n> *I tried putting the y labels as white text inside the bars, but then the text is too long to fit inside the bars. I'm not 100% satisfied with how I modified the bar chart below (seems like it would not be the best way to present a bar chart tbh) , but hmm, still nice to know that I can format text like this too.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md `## Conclusion\n\nDid I reach my objectives?\n1. ✔️ Create a static bar chart with one of the bars highlighted\n2. ✔️ Add axes labels\n3. ✔️ Add hover labels to the bar chart\n\nSome things to note\n- Difference between previous versions of d3 and d3@5 [general update pattern](https://observablehq.com/@d3/general-update-pattern)\n- As expected, took me a long time to implement the tooltip because of being confused on how to change the styling of the tooltip (Do I use D3 to add styles to the tooltip? Or do I put it inside an html style tag?)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"color = \"#ea5f94\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"highlight_color = \"#ffd700\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"margin = ({top: 30, right: 20, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}