2e:null 2f:["$","title",null,{"children":"Sortable bar chart | Mark McClure | Observable"}] 34:T984,radio_sort = { let radio_sort = Inputs.radio(["Alphabetically", "By population"], { label: html`Sort:`, value: "Alphabetically" }); d3.select(radio_sort).on("input", function () { if (w < 800) { if (radio_sort.value == "By population") { d3.select(population_bar_chart) .select('g[aria-label="y-axis"]') .selectAll("g") .transition() .duration(1000) .attr("transform", function () { return this.getAttribute("data-pop_transform"); }); d3.select(population_bar_chart) .selectAll("rect") .transition() .duration(1000) .attr("y", function () { return this.getAttribute("data-popy"); }); } else { d3.select(population_bar_chart) .select('g[aria-label="y-axis"]') .selectAll("g") .transition() .duration(1000) .attr("transform", function () { return this.getAttribute("data-alpha_transform"); }); d3.select(population_bar_chart) .selectAll("rect") .transition() .duration(1000) .attr("y", function () { return this.getAttribute("data-alphay"); }); } } else { if (radio_sort.value == "By population") { d3.select(population_bar_chart) .select('g[aria-label="x-axis"]') .selectAll("g") .transition() .duration(1000) .attr("transform", function () { return this.getAttribute("data-pop_transform"); }); d3.select(population_bar_chart) .selectAll("rect") .transition() .duration(1000) .attr("x", function () { return this.getAttribute("data-popx"); }); } else { d3.select(population_bar_chart) .select('g[aria-label="x-axis"]') .selectAll("g") .transition() .duration(1000) .attr("transform", function () { return this.getAttribute("data-alpha_transform"); }); d3.select(population_bar_chart) .selectAll("rect") .transition() .duration(1000) .attr("x", function () { return this.getAttribute("data-alphax"); }); } } }); return radio_sort; }35:T142d,population_bar_chart = { if (w < 800) { let plot = Plot.plot({ ariaLabel: "A sortable bar chart", ariaDescription: "A bar chart showing displaying the population of states in alphabetical order. You can sort the bars so that they're ordered by population using the radio button above the chart.", y: { label: "State Abbreviation" }, x: { tickFormat: (n) => (n > 0 ? `${n / 1000000}M` : 0), label: "Population" }, width: w, marks: [ Plot.barX(population, { y: "abbr", x: "pop", title: "abbr", fill: "steelblue", // fill: (s) => d3.interpolateBlues(s.pop / population.max), stroke: "black", strokeWidth: 0.5 }), Plot.ruleX([0]) ] }); let ys = []; d3.select(plot) .selectAll("rect") .on("pointerenter", function () { d3.select(this).attr("stroke", "black").attr("stroke-width", 3); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", 0.5); }) .nodes() .forEach(function (bar, i) { let d3Bar = d3.select(bar); let value = d3Bar.select("title").text(); let y = d3Bar.attr("y"); ys.push(y); d3Bar.attr("data-abbr", value).attr("data-alphay", y); tippy(bar, { content: `${bar.getAttribute( "data-abbr" )}: ${population_map.get(bar.getAttribute("data-abbr"))}`, theme: "light-border", allowHTML: true }); }); d3.select(plot).selectAll("rect").select("title").remove(); ys = d3.sort(ys.map(parseFloat)); let sorted_by_pop_map = new Map( d3.zip( d3.sort(population, (s) => -parseFloat(s.pop)).map((s) => s.abbr), ys ) ); d3.select(plot) .selectAll("rect") .nodes() .forEach(function (bar, i) { let d3Bar = d3.select(bar); d3Bar.attr("data-popy", sorted_by_pop_map.get(d3Bar.attr("data-abbr"))); }); let half_bin_height = +d3.select(plot).select("rect").attr("height") / 2; d3.select(plot) .select('g[aria-label="y-axis"]') .selectAll("g") .each(function (abbr) { let alpha_transform = this.getAttribute("transform"); let pop_transform = `translate(0,${ sorted_by_pop_map.get(abbr) + half_bin_height })`; this.setAttribute("data-alpha_transform", alpha_transform); this.setAttribute("data-pop_transform", pop_transform); }); return plot; } else { let plot = Plot.plot({ ariaLabel: "A sortable bar chart", ariaDescription: "A bar chart showing displaying the population of states in alphabetical order. You can sort the bars so that they're ordered by population using the radio button above the chart.", x: { label: "State Abbreviation" }, y: { tickFormat: (n) => (n > 0 ? `${n / 1000000}M` : 0), label: "Population" }, width: w, marks: [ Plot.barY(population, { x: "abbr", y: "pop", title: "abbr", fill: "steelblue", // fill: (s) => d3.interpolateBlues(s.pop / population.max), stroke: "black", strokeWidth: 0.5 }), Plot.ruleY([0]) ] }); let xs = []; d3.select(plot) .selectAll("rect") .on("pointerenter", function () { d3.select(this).attr("stroke", "black").attr("stroke-width", 2); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", 0.5); }) .nodes() .forEach(function (bar, i) { let d3Bar = d3.select(bar); let value = d3Bar.select("title").text(); let x = d3Bar.attr("x"); xs.push(x); d3Bar.attr("data-abbr", value).attr("data-alphax", x); tippy(bar, { content: `${bar.getAttribute( "data-abbr" )}: ${population_map.get(bar.getAttribute("data-abbr"))}`, theme: "light-border", allowHTML: true }); }); d3.select(plot).selectAll("rect").select("title").remove(); xs = d3.sort(xs.map(parseFloat)); let sorted_by_pop_map = new Map( d3.zip( d3.sort(population, (s) => -parseFloat(s.pop)).map((s) => s.abbr), xs ) ); d3.select(plot) .selectAll("rect") .nodes() .forEach(function (bar, i) { let d3Bar = d3.select(bar); d3Bar.attr("data-popx", sorted_by_pop_map.get(d3Bar.attr("data-abbr"))); }); let half_bin_width = +d3.select(plot).select("rect").attr("width") / 2; d3.select(plot) .select('g[aria-label="x-axis"]') .selectAll("g") .each(function (abbr) { let alpha_transform = this.getAttribute("transform"); let pop_transform = `translate(${ sorted_by_pop_map.get(abbr) + half_bin_width },0)`; this.setAttribute("data-alpha_transform", alpha_transform); this.setAttribute("data-pop_transform", pop_transform); }); return plot; } }36:[{"id":"361bb848e5880937da3ff2439e8e8c9eb8b9a9e8169035fe49bf06fcb08a89e388d02e0b045158ea0e66ed40ff373cf913596642babbe73924bdf48395dc7a66","href":"https://static.observableusercontent.com/files/361bb848e5880937da3ff2439e8e8c9eb8b9a9e8169035fe49bf06fcb08a89e388d02e0b045158ea0e66ed40ff373cf913596642babbe73924bdf48395dc7a66","name":"pop.csv","type":"text/csv","lastModified":1662483391568.636,"size":1093}] 32:{"id":"5c84d07dfee1174e","slug":"sort-a-bar-chart","title":"Sortable bar chart","thumbnail":"126a7a83e6219a595ad25a6ea99fe62cebd02a1f9fa64c21c4538a8941feab94","access_level":"public","create_time":"$D2022-09-06T16:56:31.568Z","update_time":"$D2024-09-08T15:38:29.306Z","view_time":null,"first_public_time":"$D2022-09-06T17:07:16.137Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":560,"publish_version":560,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Sortable bar chart","cells":[{"id":0,"value":"# Sortable bar chart\n\nThe humble statistical chart is fundamental to data visualization. In this course, we'll learn to generate a few of these most fundamental types of charts and, also, how make them interactive. In the bar chart below, for example, the ${width < 800 ? 'length' : 'height'} of each bar is proportional to the population of the corresponding state. You can hover over or touch a bar to get more precise information and you can sort the bars either alphabetically or by population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"topmatter","database":"$undefined"},{"id":276,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"w = d3.min([width, 1000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"population_map = new Map(population.map((o) => [o.abbr, o.pop]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"population = {\n let population = d3.sort(\n await FileAttachment(\"pop.csv\").csv(),\n (o) => o.name\n );\n population.forEach(function (o) {\n o.pop = parseInt(o.pop);\n o.abbr = abbreviation_map.get(o.fips);\n });\n let code48 = Array.from(abbreviation_map.values());\n population = population.filter((o) => code48.indexOf(o.abbr) > -1);\n population.max = d3.max(population.map((o) => o.pop));\n\n return population;\n}\n\n// Comes from this Cenus API call:\n// (\n// await (\n// await fetch(\n// \"https://api.census.gov/data/2018/acs/acs5?get=NAME,B02001_001E&for=state\"\n// )\n// ).json()\n// ).slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"abbreviation_map = new Map([\n [\"01\", \"AL\"],\n [\"04\", \"AZ\"],\n [\"05\", \"AR\"],\n [\"06\", \"CA\"],\n [\"08\", \"CO\"],\n [\"09\", \"CT\"],\n [\"10\", \"DE\"],\n [\"12\", \"FL\"],\n [\"13\", \"GA\"],\n [\"16\", \"ID\"],\n [\"17\", \"IL\"],\n [\"18\", \"IN\"],\n [\"19\", \"IA\"],\n [\"20\", \"KS\"],\n [\"21\", \"KY\"],\n [\"22\", \"LA\"],\n [\"23\", \"ME\"],\n [\"24\", \"MD\"],\n [\"25\", \"MA\"],\n [\"26\", \"MI\"],\n [\"27\", \"MN\"],\n [\"28\", \"MS\"],\n [\"29\", \"MO\"],\n [\"30\", \"MT\"],\n [\"31\", \"NE\"],\n [\"32\", \"NV\"],\n [\"33\", \"NH\"],\n [\"34\", \"NJ\"],\n [\"35\", \"NM\"],\n [\"36\", \"NY\"],\n [\"37\", \"NC\"],\n [\"38\", \"ND\"],\n [\"39\", \"OH\"],\n [\"40\", \"OK\"],\n [\"41\", \"OR\"],\n [\"42\", \"PA\"],\n [\"44\", \"RI\"],\n [\"45\", \"SC\"],\n [\"46\", \"SD\"],\n [\"47\", \"TN\"],\n [\"48\", \"TX\"],\n [\"49\", \"UT\"],\n [\"50\", \"VT\"],\n [\"51\", \"VA\"],\n [\"53\", \"WA\"],\n [\"54\", \"WV\"],\n [\"55\", \"WI\"],\n [\"56\", \"WY\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"require.resolve(`tippy.js/themes/light-border.css`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"