25:["$","title",null,{"children":"SBA primary chart | M. Matthews | Observable"}] 4b:T156a, function chart(data, input) { var speed = 0; var margin = {top: 35, left: 35, bottom: 35, right: -15}; var width = 900 - margin.left - margin.right; var height = 900 - margin.top - margin.bottom; var filters = d3.select('.filters') .selectAll('p') .data(data) .enter() .append('p') .classed('filter', true).classed('solid-border-bottom', true).classed('light', true) .append('strong') .classed('pr-1', true) .text(d => d["value" + input]); d3.select('.filters').selectAll('p') .append('small') .text(d => d.name); d3.select('.filters').selectAll('p') .append('input') .classed('checkbox', true) .attr('type','checkbox') .attr('checked', 'checked') .attr('value', (d => d.name)); var svg = d3.select("#chart") .attr('viewBox', '0 0 900 900') .style('max-width', '100%') .style('height', 'auto'); var x = d3.scaleBand() .range([margin.left, width - margin.right]) .padding(0.1) .paddingOuter(0.2) var y = d3.scaleLinear() .range([height - margin.bottom, margin.top]) var xAxis = g => g .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll("text") .style("text-anchor", "end") .attr("dx", -6) .attr("dy", -20) .attr("transform", "rotate(-45)") var yAxis = g => g .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y)) var yGrid = g => g .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y).tickSize(-width + margin.right)) .call(g => g.selectAll("text").remove()) svg.append("g") .attr("class", "x-axis") svg.append("rect").attr("class", "block") .attr("x", 0) .attr("y", 0 + margin.top) .attr("height", height - margin.bottom) .attr("width", margin.left) .attr("fill", "#fff"); svg.append("g") .attr("class", "y-axis") svg.append("g") .attr("class", "y-grid") var sorted = data.map(d => d.name); update(data, input); function update(data, input) { var filter = d3.selectAll('.filters') .selectAll('input:checked') .nodes() .map(box => box.value); var filteredData = data.filter(obj => filter.includes(obj.name)); filteredData.sort(d3.select("#checkBox").property("checked") ? (a, b) => b["value" + input] - a["value" + input] : (a, b) => sorted.indexOf(a.name) - sorted.indexOf(b.name)); x.domain(filteredData.map(d => d.name)) svg.selectAll(".x-axis").transition().duration(speed) .call(xAxis); y.domain([0, d3.max(filteredData, d => +d["value" + input])]).nice() svg.selectAll(".y-axis").transition().duration(speed) .call(yAxis); svg.selectAll(".y-grid").transition().duration(speed) .call(yGrid); var bar = svg.selectAll(".bar") .data(filteredData, d => d.name) bar.exit().remove(); bar = bar .enter().insert("g", ".block") .append("a") .attr("xlink:href", d=> "/requests/ppp_requests/?status=" + d.name) .append("rect") .attr("class", "bar") .attr("fill", "#002e6d") .attr("width", x.bandwidth()) .merge(bar); bar.transition().duration(speed) .attr("x", d => x(d.name)) .attr("y", d => y(d["value" + input])) .attr("height", d => y(0) - y(d["value" + input])) var text = svg.selectAll(".text") .data(filteredData, d => d.name) text.exit().remove(); text = text .enter().insert("g", ".block") .append("text") .attr("class", "text") .attr("text-anchor", "middle") .merge(text); text.transition().duration(speed) .attr("x", d => x(d.name) + x.bandwidth() / 2) .attr("y", function(d) { return (y(d["value" + input]) > height - margin.top ? y(d["value" + input]) - 5 : y(d["value" + input]) + 15) }) .attr("fill", function(d) { return (y(d["value" + input]) > height - margin.top ? "#333" : "#fff") }) .text(d => d["value" + input]); svg.call(zoom); function zoom(svg) { const extent = [ [margin.left, margin.top], [width - margin.right, height - margin.top]]; var zooming = d3.zoom() .scaleExtent([1, 2]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed) svg.call(zooming); function zoomed() { x.range([margin.left, width - margin.right] .map(d => d3.event.transform.applyX(d))); svg.selectAll(".bar") .attr("x", d => x(d.name)) .attr("width", x.bandwidth()); svg.selectAll(".text") .attr("x", d => x(d.name) + x.bandwidth() / 2) .attr("y", function(d) { return (y(d["value" + input]) > height - margin.top ? y(d["value" + input]) - 5 : y(d["value" + input]) + 15) }) .attr("fill", function(d) { return (y(d["value" + input]) > height - margin.top ? "#333" : "#fff") }) .attr("font-size", _ => x.bandwidth() > 50 ? 14 : 12) svg.selectAll(".x-axis").call(xAxis); } } } speed = 750 chart.update = update; }4c:[] 47:{"id":"d7628f0a7787c731","slug":"sba-primary","title":"SBA primary chart","thumbnail":"b89ce875d9163aa0a709696bfd9f1e54e403db002ea507d5dfe31f21373ed078","access_level":"public","create_time":"$D2020-11-24T23:44:14.107Z","update_time":"$D2020-12-08T21:14:51.010Z","view_time":null,"first_public_time":"$D2020-11-24T23:44:16.471Z","has_unpublished_edits":null,"fork":{"id":"32f3925627698ce3","slug":"a-bar-chart-with-an-unnecessary-ammount-of-features","title":"A Bar Chart with an unnecessary ammount of features","owner":{"id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c73b1a31c15d0171","login":"mmatthews1981","name":"M. Matthews","avatar_url":"https://avatars-next.observableusercontent.com/694d0d80b7384d2a84c2815670ea656629aa0157e3db042dbb4857c44b3dccc3","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":427,"publish_version":427,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ec6430349de42be","login":"mmatthews1981","name":"M. Matthews","avatar_url":"https://avatars-next.observableusercontent.com/694d0d80b7384d2a84c2815670ea656629aa0157e3db042dbb4857c44b3dccc3","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1ec6430349de42be","login":"mmatthews1981","name":"M. Matthews","avatar_url":"https://avatars-next.observableusercontent.com/694d0d80b7384d2a84c2815670ea656629aa0157e3db042dbb4857c44b3dccc3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SBA primary chart","cells":[{"id":0,"value":"md`# SBA primary chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"html`Choose Value\n
\n\n

\n\n\n

\n\tSort Values\n\t\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"\nload = {\n \n var opt = d3.select(\".opt\").on(\"change\", function() {\n\t chart.update(data, this.value);\n });\n\t\n d3.select(\".sort\").on(\"change\", function() {\n chart.update(data, opt.property(\"value\"));\n });\n\t\n chart(data, opt.property(\"value\"));\n \n d3.selectAll('.checkbox').on('change', function(){\n chart.update(data, opt.property(\"value\"));\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"data = [\n\t{name: \"Aaaaaaaa aaa\", value_1: \"67\", value_2: \"16\"},\n\t{name: \"Bbbbbbb bbbbbbbb\", value_1: \"92\", value_2: \"49\"},\n\t{name: \"Ccccc cccccccccc\", value_1: \"82\", value_2: \"78\"},\n\t{name: \"Ddddddddddddd ss\", value_1: \"53\", value_2: \"25\"},\n\t{name: \"Eee ssss\", value_1: \"2\", value_2: \"70\"},\n\t{name: \"F ssss\", value_1: \"88\", value_2: \"28\"},\n\t{name: \"Gggggggg ggggggggg\", value_1: \"15\", value_2: \"1\"},\n\t{name: \"Hhhhhhhhhhhhh hhh\", value_1: \"1879\", value_2: \"09\"},\n\t{name: \"Iiiiii ii\", value_1: \"66\", value_2: \"86\"},\n\t{name: \"Jj jjjjjjjj\", value_1: \"53\", value_2: \"15\"},\n\t{name: \"Kkkkkkk kk\", value_1: \"72\", value_2: \"77\"}\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null