2d:null 2e:["$","title",null,{"children":"Horizontal Bar Chart | sam-hurrell | Observable"}] 33:Ta1a,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width + 200, height + 50]); svg.append("g") .attr("fill", "orange") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 16) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.value)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => format(d.value)) .call(text => text.filter(d => x(d.value) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")) .on("mouseover", function(d) { d3.select(this).attr("fill", "magenta"); //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( `

Name: ${d.name}

Proportion: ${d.name_1}%

Catgeory: ${d.name_2}

` ) .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', "white"); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }34:[{"id":"d53cb84662e4457db125d843394b8c098b7ea2dba87393322efa3ac37fadd800dfa53948d8d65bcd05cd662f171b31fdeaa519141c372b9663bd0fe3a6665135","href":"https://static.observableusercontent.com/files/d53cb84662e4457db125d843394b8c098b7ea2dba87393322efa3ac37fadd800dfa53948d8d65bcd05cd662f171b31fdeaa519141c372b9663bd0fe3a6665135","name":"tweet_frequency@4.csv","type":"text/csv","lastModified":1596439425236.629,"size":312}] 31:{"id":"017fdad65b87874a","slug":"thanks-to-video-games","title":"Horizontal Bar Chart","thumbnail":"becda7313d84e22a79ddda0eaa879239eb1071cbcb561666d6d550dffa5f6a0f","access_level":"public","create_time":"$D2020-07-24T15:58:46.106Z","update_time":"$D2020-08-04T20:19:32.842Z","view_time":null,"first_public_time":"$D2020-07-24T16:23:14.614Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e1857478dfb8f13a","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":"starter_2024"},"version":408,"publish_version":408,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec229c186e95ffda","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":null}],"members":[{"type":"individual","id":"ec229c186e95ffda","login":"sam-hurrell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c042dc169d2e37cdaafd306242e1ed6c33d9be59a49a58f2641b557c719e0588","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Horizontal Bar Chart","cells":[{"id":1,"value":"md`# Horizontal Bar Chart\n\n3 of the 10 most-common words relate to connecting with other people.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"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', \"black\")\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"tweet_frequency@4.csv\").text(), ({word,frequency,percentage,category}) => ({name: word, value: +frequency, name_1: percentage, name_2: category})).sort((a, b) => d3.descending(a.value, b.value)), {format:\"%\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"format = x.tickFormat(20, data.format)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, data.format))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(i => data[i].name).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"barHeight = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"margin = ({top: 30, right: 0, bottom: 10, left: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"