31: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()); }32:[] 2f:{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":157,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"g0 = gauge([data[0]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"g1 = gauge([data[1]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"g2 = gauge([data[2]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"g3 = gauge([data[3]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"g4 = gauge([data[4]], gaugeWidth, g2height)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":380,"value":"yscaleHeight = g2height * data.length","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":52,"value":"maxDataValue = d3.max(data.map(d => d.pass + d.fail))","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"margin = ({ top: 4, right: m2, bottom: 20, left: m0 + m1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"bargap = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"barheight = 24","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"gaugeWidth = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"g2height = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"import { color, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}