2f:null 30:["$","title",null,{"children":"Rectangular Gauge | Jonathan Helfman | Observable"}] 35:T749,function gauge(data, width, height) { const svg = d3.select(DOM.svg(width, height)).style("background", '#000000'); svg .selectAll('g') .data(data) .enter() .append("g") .attr( "transform", "translate(" + margin.left + "," + (height - margin.bottom + margin.top) + ")" ) .call(g => g .append('g') .attr('class', 'axisWhite') .call( d3 .axisBottom() .scale(xScale) .tickValues([0, data[0].pass, 50]) .tickFormat(null) ) ) .call( g => g .append("rect") .attr("x", 0) .attr("y", -barheight) .attr('height', barheight) .attr('width', d => xScale(d.pass)) .attr("fill", '#4a994a') // .attr("fill", '#ddeed3') ) .call(g => g .append("rect") .attr("x", d => xScale(d.pass)) .attr("y", -barheight) .attr('height', barheight) .attr('width', d => (d.fail ? xScale(d.fail) : 0)) //.attr("fill", '#f1575a') .attr("fill", '#ff584c') ) .call(g => g .append("text") .attr("x", -m1) .attr("y", -barheight / 2 + 5) .attr("class", 'darkok') .text(d => Math.round((d.pass * 100) / maxDataValue).toFixed(0) + '%') ) .call(g => g .append("text") .attr("x", -m0 - m1 + 8) .attr("y", -barheight / 2 + 5) .attr('class', 'name') .text(d => d.name) ) .call(g => g .append("text") .attr("x", d => xScale(maxDataValue) + 20) .attr("y", -barheight / 2 + 5) .attr('class', 'darkerror') .text(d => Math.round((d.fail * 100) / maxDataValue).toFixed(0) + '%') ); return Object.assign(svg.node()); }36:[] 33:{"id":"680f08db0428f65f","slug":"rectangular-gauge","title":"Rectangular Gauge","thumbnail":"873238bda6ba0a8604547fbd9497daee5ba10ba8a970bcf457c720986fa31cdf","access_level":"public","create_time":"$D2021-03-09T18:46:21.455Z","update_time":"$D2021-04-25T16:05:46.984Z","view_time":null,"first_public_time":"$D2021-04-25T16:04:29.796Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":"starter_2024"},"version":453,"publish_version":453,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null}],"members":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"66ce46098673e3d7","slug":"d3-charts","title":"D3 Charts","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"type":"notebook","body":{"title":"Rectangular Gauge","cells":[{"id":0,"value":"md`# Rectangular Gauge\n- show percentages\n- show actual values\n- emphasize errors\n- use impairment-safe colors\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"html`\n

\n ${g0}\n

\n ${g1}\n

\n ${g2}\n

\n ${g3}\n

\n ${g4}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data = [\n { name: 'Attach', pass: 41, fail: 9 },\n { name: 'UDG', pass: 33, fail: 17 },\n { name: 'FTP', pass: 13, fail: 37 },\n { name: 'Xx', pass: 50, fail: 0 },\n { name: 'Xx', pass: 40, fail: 10 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof m0 = slider({\n min: 1,\n max: 256,\n step: .1,\n value: 80,\n title: \"Name margin\",\n description: \"Width of name margin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof m1 = slider({\n min: 1,\n max: 256,\n step: .1,\n value: 70,\n title: \"Left margin\",\n description: \"Width of left margin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"viewof m2 = slider({\n min: 1,\n max: 256,\n step: .1,\n value: 20,\n title: \"Right margin\",\n description: \"Width of right margin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"g0 = gauge([data[0]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"g1 = gauge([data[1]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"g2 = gauge([data[2]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"g3 = gauge([data[3]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"g4 = gauge([data[4]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"xScale = d3\n .scaleLinear()\n .domain([0, maxDataValue])\n .range([0, gaugeWidth - margin.right - margin.left])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"yscaleHeight = g2height * data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"yScale = d3\n .scaleLinear()\n .domain([0, data.length])\n .range([0, yscaleHeight - margin.bottom - margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"maxDataValue = d3.max(data.map(d => d.pass + d.fail))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"margin = ({ top: 4, right: m2, bottom: 20, left: m0 + m1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"bargap = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"barheight = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"gaugeWidth = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"g2height = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"import { color, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"