Laboratory
chart = { const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .selectAll("g") .data(bins) .enter().append("g"); g.append("path") .attr("stroke", "currentColor") .attr("d", d => ` M${x((d.x0 + d.x1) / 2)},${y(d.range[1])} V${y(d.range[0])} `); g.append("path") .attr("fill", "#ddd") .attr("d", d => ` M${x(d.x0) + 1},${y(d.quartiles[2])} H${x(d.x1)} V${y(d.quartiles[0])} H${x(d.x0) + 1} Z `); g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 2) .attr("d", d => ` M${x(d.x0) + 1},${y(d.quartiles[1])} H${x(d.x1)} `); g.append("g") .attr("fill", "currentColor") .attr("fill-opacity", 0.2) .attr("stroke", "none") .attr("transform", d => `translate(${x((d.x0 + d.x1) / 2)},0)`) .selectAll("circle") .data(d => d.outliers) .enter().append("circle") .attr("r", 2) .attr("cx", () => (Math.random() - 0.5) * 4) .attr("cy", d => y(d.y)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }
Laboratory is a platform for my experiments. At that moment, these experiments are mostly related to Supply Chain Mapping by using SVG and they are planned to create a user interface for SCOM dashboard. Please see BIPOLAR.
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter
