Bio
B'log
Research
Teaching

Difference between revisions of "Laboratory"
m (1 revision imported)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 +
<html>
 +
<script src="https://d3js.org/d3.v5.min.js"></script>
 +
 +
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();
 +
}
 +
 +
 +
 +
</html>
 +
 +
 +
 +
 +
 +
 +
 +
 
{{Subnav-research}}
 
{{Subnav-research}}
  

Revision as of 08:31, 11 January 2019

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.

Retrieved from "https://hkilter.com/index.php?title=Laboratory&oldid=330"

hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

© 2020 H. K. Ilter