3e:null 3f:["$","title",null,{"children":"Horizontal bar chart | Andrés G. Carmona | Observable"}] 45:T84c,chart = { // Specify the chart’s dimensions, based on a bar’s height. const barHeight = 25; const marginTop = 30; const marginRight = 0; const marginBottom = 10; const marginLeft = 30; const width = 928; const height = Math.ceil((alphabet.length + 0.1) * barHeight) + marginTop + marginBottom; // Create the scales. const x = d3.scaleLinear() .domain([0, d3.max(alphabet, d => d.frequency)]) .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(d3.sort(alphabet, d => -d.frequency).map(d => d.letter)) .rangeRound([marginTop, height - marginBottom]) .padding(0.1); // Create a value format. const format = x.tickFormat(20, "%"); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append a rect for each letter. svg.append("g") .attr("fill", "steelblue") .selectAll() .data(alphabet) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.letter)) .attr("width", (d) => x(d.frequency) - x(0)) .attr("height", y.bandwidth()); // Append a label for each letter. svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .selectAll() .data(alphabet) .join("text") .attr("x", (d) => x(d.frequency)) .attr("y", (d) => y(d.letter) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text((d) => format(d.frequency)) .call((text) => text.filter(d => x(d.frequency) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); // Create the axes. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 80, "%")) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)); return svg.node(); }46:[{"id":"09f63bb9ff086fef80717e2ea8c974f918a996d2bfa3d8773d3ae12753942c002d0dfab833d7bee1e0c9cd358cd3578c1cd0f9435595e76901508adc3964bbdc","href":"https://static.observableusercontent.com/files/09f63bb9ff086fef80717e2ea8c974f918a996d2bfa3d8773d3ae12753942c002d0dfab833d7bee1e0c9cd358cd3578c1cd0f9435595e76901508adc3964bbdc","name":"alphabet.csv","type":"application/octet-stream","lastModified":1703007551117.598,"size":275}] 43:{"id":"80a49a0aca4fa4be","slug":null,"title":"Horizontal bar chart","thumbnail":"3407e991d6225b2c861b5df4f36c47e617198194bed9f17c3b276640b21f2d20","access_level":"public","create_time":"$D2023-12-19T17:39:11.117Z","update_time":"$D2023-12-19T17:39:11.117Z","view_time":null,"first_public_time":"$D2023-12-19T17:39:11.117Z","has_unpublished_edits":null,"fork":{"id":"32d9198887fc0274","slug":"horizontal-bar-chart/2","title":"Horizontal bar chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ec52ea54f248daae","login":"andresgcarmona","name":"Andrés G. Carmona","avatar_url":"https://avatars-next.observableusercontent.com/172d4a1707e78a72753b5e8ba657214178d255bc56a6cb6f7a1f04375deba4c0","tier":"starter_2024","bio":"Full Stack Web Developer, computer enthusiast, programming nerd, geek & computer lover.","following":false},"version":349,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9149013a9368d8d3","login":"andresgcarmona","name":"Andrés G. Carmona","avatar_url":"https://avatars-next.observableusercontent.com/172d4a1707e78a72753b5e8ba657214178d255bc56a6cb6f7a1f04375deba4c0","tier":null,"bio":"Full Stack Web Developer, computer enthusiast, programming nerd, geek & computer lover.","following":false}],"members":[{"type":"individual","id":"9149013a9368d8d3","login":"andresgcarmona","name":"Andrés G. Carmona","avatar_url":"https://avatars-next.observableusercontent.com/172d4a1707e78a72753b5e8ba657214178d255bc56a6cb6f7a1f04375deba4c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizontal bar chart","cells":[{"id":1,"value":"

Horizontal bar chart

D3 › Gallery

\n\n# Horizontal bar chart\n\nThis chart shows the relative frequency of letters in the English language.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"Plot.plot({\n x: {axis: \"top\", percent: true},\n y: {label: null},\n marks: [\n Plot.barX(alphabet, {x: \"frequency\", y: \"letter\", fill: \"steelblue\", sort: {y: \"-x\"}}),\n Plot.text(alphabet, {x: \"frequency\", y: \"letter\", text: d => format(d.frequency), textAnchor: \"start\", dx: 3, filter: d => d.frequency <= 0.007, fill: \"currentColor\"}),\n Plot.text(alphabet, {x: \"frequency\", y: \"letter\", text: d => format(d.frequency), textAnchor: \"end\", dx: -3, filter: d => d.frequency > 0.007, fill: \"white\" }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"format = d3.format(\".1%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"