How to use the d3-scale.scaleSqrt function in d3-scale

To help you get started, we’ve selected a few d3-scale examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vasturiano / sunburst-chart / src / sunburst.js View on Github external
init: function(domNode, state) {
    state.chartId = Math.round(Math.random() * 1e12); // Unique ID for DOM elems

    state.radiusScale = scaleSqrt();
    state.angleScale = scaleLinear()
      .domain([0, 10]) // For initial build-in animation
      .range([0, 2 * Math.PI])
      .clamp(true);

    state.arc = d3Arc()
      .startAngle(d => state.angleScale(d.x0))
      .endAngle(d => state.angleScale(d.x1))
      .innerRadius(d => Math.max(0, state.radiusScale(d.y0)))
      .outerRadius(d => Math.max(0, state.radiusScale(d.y1)));

    const el = d3Select(domNode)
      .append('div').attr('class', 'sunburst-viz');

    state.svg = el.append('svg');
    state.canvas = state.svg.append('g');
github broadinstitute / gtex-viz / src / modules / BubbleMap.js View on Github external
_setBubbleScale(range={max:10, min:0}){
        return scaleSqrt()
            .domain([3, max(this.data.map((d)=>d.r))]) // set min at 2 for -log(0.01)
            .range([range.min, range.max]);
    }
github hpcc-systems / Visualization / src / tree / SunburstPartition.ts View on Github external
enter(_domNode, element) {
        const context = this;

        this.radius = Math.min(this.width(), this.height()) / 2;

        this._xScale = d3ScaleLinear()
            .range([0, 2 * Math.PI])
            ;

        this._yScale = d3ScaleSqrt()
            .range([0, this.radius])
            ;

        this.partition = d3Parition();

        this.arc = d3Arc()
            .startAngle(function (d: any) {
                return Math.max(0, Math.min(2 * Math.PI, context._xScale(d.x0)));
            })
            .endAngle(function (d: any) {
                return Math.max(0, Math.min(2 * Math.PI, context._xScale(d.x1)));
            })
            .innerRadius(function (d: any) {
                return Math.max(0, context._yScale(d.y0));
            })
            .outerRadius(function (d: any) {
github beancount / fava / fava / static / javascript / charts.js View on Github external
constructor(svg) {
    super(svg);
    this.margin = NO_MARGINS;

    this.x = scaleLinear().range([0, 2 * Math.PI]);
    this.y = scaleSqrt();
    this.partition = partition();
    this.arc = arc()
      .startAngle(d => this.x(d.x0))
      .endAngle(d => this.x(d.x1))
      .innerRadius(d => this.y(d.y0))
      .outerRadius(d => this.y(d.y1));

    this.canvas = this.svg
      .attr("class", "sunburst")
      .append("g")
      .on("mouseleave", d => this.mouseLeave(d));
  }
github hasadna / open_pension / client / old-client / src / app / components / pai / pai.component.ts View on Github external
private initAxes() {
    this.mainAxes.x = scale
      .scaleLinear()
      .range([0, 2 * Math.PI]);
    this.mainAxes.y = scale
      .scaleSqrt()
      .range([0, this.dimensions.radius]);
  }
github contiamo / operational-ui / packages / visualizations / lib / PieChart / renderers / polar.js View on Github external
Polar.prototype.computeOuterRadius = function (drawingDims, scaleFactor) {
        var _this = this;
        if (scaleFactor === void 0) { scaleFactor = 1; }
        var domainMax = fp_1.max(fp_1.map(function (datum) { return _this.value(datum); })(this.data));
        var scale = d3_scale_1.scaleSqrt()
            .range([
            this.state.current.get("config").minInnerRadius,
            Math.min(drawingDims.width, drawingDims.height) / 2 - this.state.current.get("config").outerBorderMargin,
        ])
            .domain([0, domainMax]);
        return function (d) { return scale(_this.value(d)) * scaleFactor; };
    };
    Polar.prototype.computeInnerRadius = function (data, outerRadius) {
github hpcc-systems / Visualization / packages / chart / src / Scatter.ts View on Github external
private getScale() {
        switch (this.pointSizeScale()) {
            case "linear":
                return d3ScaleLinear();
            case "pow":
                return d3ScalePow().exponent(2);
            case "log":
                return d3ScaleLog();
            case "sqrt":
                return d3ScaleSqrt();
        }
    }
github apache-superset / superset-ui-plugins / packages / superset-ui-preset-chart-xy / src / encodeable / parsers / extractScale.ts View on Github external
function createScaleFromType<output>(type: ScaleType) {
  switch (type) {
    case ScaleType.LINEAR:
      return scaleLinear<output>();
    case ScaleType.LOG:
      return scaleLog<output>();
    case ScaleType.POW:
      return scalePow<output>();
    case ScaleType.SQRT:
      return scaleSqrt<output>();
    case ScaleType.SYMLOG:
      return undefined;
    case ScaleType.TIME:
      return scaleTime<output>();
    case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();</output></output></output></output></output></output></output></output></output>
github nteract / semiotic-docs / src / guides / Scatterplot.js View on Github external
rank: 28,
    grossWeekly: 126320,
    title: "The Longest Ride"
  },
  {
    theaterCount: 116,
    rank: 31,
    grossWeekly: 101719,
    title: "The Longest Ride"
  },
  { theaterCount: 45, rank: 40, grossWeekly: 33808, title: "The Longest Ride" },
  { theaterCount: 24, rank: 56, grossWeekly: 17379, title: "The Longest Ride" },
  { theaterCount: 9, rank: 67, grossWeekly: 6872, title: "The Longest Ride" }
]

const rScale = scaleSqrt()
  .domain([0, 16660516])
  .range([0, 25])

const frameProps = {
  size: [700, 400],
  xAccessor: "theaterCount",
  yAccessor: "rank",
  yExtent: [0],
  xExtent: [0],
  title: (
    
  ),