34:["$","title",null,{"children":"A Bar Chart with an unnecessary ammount of features | Robert Pettersson | Observable"}] 3c:Tfd7, function chart(data, input) { var speed = 0 var svg = d3.select("#chart"), margin = {top: 35, left: 35, bottom: 5, right: -15}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; 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)) 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) { data.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(data.map(d => d.name)) svg.selectAll(".x-axis").transition().duration(speed) .call(xAxis); y.domain([0, d3.max(data, 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(data, d => d.name) bar.exit().remove(); bar = bar .enter().insert("g", ".block") .append("rect") .attr("class", "bar") .attr("fill", "steelblue") .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(data, 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; }3d:[] 38:{"id":"32f3925627698ce3","slug":"a-bar-chart-with-an-unnecessary-ammount-of-features","title":"A Bar Chart with an unnecessary ammount of features","thumbnail":"8c3521f3986e07a09b014a42b8af5ebefaef1dfb6a4cd7287d05e844fbf1e2f6","access_level":"public","create_time":"$D2018-06-22T10:46:15.744Z","update_time":"$D2018-12-04T12:53:16.218Z","view_time":null,"first_public_time":"$D2018-06-22T12:15:34.732Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":"starter_2024","bio":"Programmer","followed_by_you":false,"follows_you":false},"version":185,"publish_version":185,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"bio":"Programmer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A Bar Chart with an unnecessary ammount of features","cells":[{"id":0,"value":"md`# A Bar Chart with an unnecessary ammount of features`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md `I'll have to change up a few things so that it's more idiomatic to the notebook syntax, but all the logic is still there and seems to be working fine.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"html`You can zoom, sort and filter through the dataset`","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\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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$3c","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: \"A\", value_1: \"67\", value_2: \"16\"},\n\t{name: \"B\", value_1: \"92\", value_2: \"49\"},\n\t{name: \"C\", value_1: \"82\", value_2: \"78\"},\n\t{name: \"D\", value_1: \"53\", value_2: \"25\"},\n\t{name: \"E\", value_1: \"2\", value_2: \"70\"},\n\t{name: \"F\", value_1: \"88\", value_2: \"28\"},\n\t{name: \"G\", value_1: \"15\", value_2: \"1\"},\n\t{name: \"H\", value_1: \"94\", value_2: \"09\"},\n\t{name: \"I\", value_1: \"66\", value_2: \"86\"},\n\t{name: \"J\", value_1: \"53\", value_2: \"15\"},\n\t{name: \"K\", 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":"$W3d","stdlib":"1"}} 33:null