d3-shape#arc JavaScript Examples

The following examples show how to use d3-shape#arc. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Donut.jsx    From intergalactic with MIT License 6 votes vote down vote up 
getPieProps(props, ind) {
    const { d3Arc, d3ArcOut } = this.asProps;
    const { active } = props;
    const data = this.arcs.find((arc) => arc.data[0] === props.dataKey);
    if (active) {
      this.activeIndexPie = ind;
    }

    return {
      data,
      d3Arc,
      d3ArcOut,
      $animationActivePie: this.animationActivePie,
      onMouseMove: this.bindHandlerTooltip(true, props),
      onMouseLeave: this.bindHandlerTooltip(false, props),
      onMouseOver: (e) => {
        !active &&
          this.animationActivePie({
            active: true,
            data,
            selector: `[d="${e.target.getAttribute('d')}"]`,
          });
      },
      onMouseOut: (e) => {
        !active &&
          this.animationActivePie({
            active: false,
            data,
            selector: `[d="${e.target.getAttribute('d')}"]`,
          });
      },
    };
  }
Example #2
Source File: Donut.jsx    From intergalactic with MIT License 6 votes vote down vote up 
function animationHoverPie({ d, selector, duration, innerRadius, outerRadius }) {
  if (duration > 0) {
    transition()
      .selection()
      .select(selector)
      .transition()
      .duration(duration)
      .attrTween('d', function () {
        if (!d) return () => '';
        const [min, max] = outerRadius;
        const i = interpolate(min, max);
        return function (t) {
          const d3ArcOut = arc().innerRadius(innerRadius).outerRadius(i(t));
          return d3ArcOut(d);
        };
      });
  }
}
Example #3
Source File: Gauge.jsx    From pooltogether-community-ui with MIT License 5 votes vote down vote up 
export function Gauge({ value = 50, min = 0, max = 100, label, units }) {
  const backgroundFillColor = '#222B45'

  const startAngle = -Math.PI / 2 - 0.6
  const endAngle = Math.PI / 2 + 0.6

  const backgroundArc = arc()
    .innerRadius(0.85)
    .outerRadius(1)
    .startAngle(startAngle)
    .endAngle(endAngle)
    .cornerRadius(1)()

  const percentScale = scaleLinear().domain([min, max]).range([0, 1])
  const percent = percentScale(value)

  const angleScale = scaleLinear().domain([0, 1]).range([startAngle, endAngle]).clamp(true)

  const angle = angleScale(percent)

  const filledArc = arc()
    .innerRadius(0.85)
    .outerRadius(1)
    .startAngle(startAngle)
    .endAngle(angle)
    .cornerRadius(1)()

  const colorScale = scaleLinear().domain([0, 1]).range(['#EF2751', '#6CE988'])

  const gradientSteps = colorScale.ticks(10).map((value) => colorScale(value))

  return (
    <div className='text-center'>
      <svg className='mx-auto overflow-visible' width='15em' viewBox={[-1, -1, 2, 1].join(' ')}>
        <defs>
          <linearGradient id='Gauge__gradient' gradientUnits='userSpaceOnUse' x1='-1' x2='1' y2='0'>
            {gradientSteps.map((color, index) => (
              <stop
                key={color}
                stopColor={color}
                offset={`${index / (gradientSteps.length - 1)}`}
              />
            ))}
          </linearGradient>
        </defs>
        <path d={backgroundArc} fill={backgroundFillColor} />
        <path d={filledArc} fill='url(#Gauge__gradient)' />
      </svg>

      <div
        className='relative'
        style={{
          top: '-5.5rem'
        }}
      >
        {label}
      </div>
    </div>
  )
}
Example #4
Source File: Dial.js    From Atlantis with MIT License 4 votes vote down vote up 
Dial = ({
  value = 99.5,
  min = 0,
  max = 100,
  label,
  units = timeMillisecond,
  responseTime,
  setPercent,
  isCached,
}) => {
  // console.log(value, 'here is value in dial');
  const [cached, setCached] = useState(isCached);

  const onChange = (value) => {
    if (isCached === true) {
      setCached(!isCached);
      return setPercent(value);
    }
  };
  // console.log(value, 'here is value in dial2');

  const backgroundArc = arc()
    .innerRadius(0.65)
    .outerRadius(1)
    .startAngle(-Math.PI / 2)
    .endAngle(Math.PI / 2)
    .cornerRadius(1)();

  const percentScale = scaleLinear().domain([min, max]).range([0, 1]);
  const percent = percentScale(value);

  const angleScale = scaleLinear()
    .domain([0, 1])
    .range([-Math.PI / 2, Math.PI / 2])
    .clamp(true);

  const angle = angleScale(percent);

  const filledArc = arc()
    .innerRadius(0.65)
    .outerRadius(1)
    .startAngle(-Math.PI / 2)
    .endAngle(angle)
    .cornerRadius(1)();

  const colorScale = scaleLinear()
    .domain([0, 1, 2, 3])
    .range(['#9B554E', '#67EFE5', '#A6FFF8', '#A6FFF8']);

  const gradientSteps = colorScale.ticks(10).map((value) => colorScale(value));

  const markerLocation = getCoordsOnArc(angle, 1 - (1 - 0.65) / 2);

  return (
    <div
      id="dial-down"
      style={{
        textAlign: 'center',
      }}
    >
      <svg
        style={{ overflow: 'visible' }}
        width="9em"
        viewBox={[-1, -1, 2, 1].join(' ')}
      >
        <defs>
          <linearGradient
            id="Gauge__gradient"
            gradientUnits="userSpaceOnUse"
            x1="-1"
            x2="1"
            y2="0"
          >
            {gradientSteps.map((color, index) => (
              <stop
                key={color}
                stopColor={color}
                offset={`${index / (gradientSteps.length - 1)}`}
              />
            ))}
          </linearGradient>
        </defs>
        <path d={backgroundArc} fill="#dbdbe7" />
        <path d={filledArc} fill="url(#Gauge__gradient)" />
        <circle
          cx={markerLocation[0]}
          cy={markerLocation[1]}
          r="0.2"
          stroke="#2c3e50"
          strokeWidth="0.01"
          fill={colorScale(percent)}
        />
        <path
          d="M0.136364 0.0290102C0.158279 -0.0096701 0.219156 -0.00967009 0.241071 0.0290102C0.297078 0.120023 0.375 0.263367 0.375 0.324801C0.375 0.422639 0.292208 0.5 0.1875 0.5C0.0852272 0.5 -1.8346e-08 0.422639 -9.79274e-09 0.324801C0.00243506 0.263367 0.0803571 0.120023 0.136364 0.0290102ZM0.1875 0.381684C0.221591 0.381684 0.248377 0.356655 0.248377 0.324801C0.248377 0.292947 0.221591 0.267918 0.1875 0.267918C0.153409 0.267918 0.126623 0.292947 0.126623 0.324801C0.126623 0.356655 0.155844 0.381684 0.1875 0.381684Z"
          transform={`rotate(${
            angle * (180 / Math.PI)
          }) translate(-0.2, -0.33)`}
          fill="#6a6a85"
        />
      </svg>

      <div
        style={{
          marginTop: '0.4em',
          fontSize: '1em',
          lineHeight: '1em',
          fontWeight: '900',
          fontFeatureSettings: "'zero', 'tnum' 1",
        }}
      >
        <h4> </h4>
        {format(',')(value) + '% faster'}
      </div>

      {!!label && (
        <div
          style={{
            color: '#8b8ba7',
            marginTop: '0.6em',
            fontSize: '1.3em',
            lineHeight: '1.3em',
            fontWeight: '700',
          }}
        >
          {label}
        </div>
      )}

      {!!units && (
        <div
          style={{
            color: '#8b8ba7',
            lineHeight: '1.3em',
            fontWeight: '300',
          }}
        >
          {units}
        </div>
      )}
    </div>
  );
}
Example #5
Source File: ErikDial.js    From Atlantis with MIT License 4 votes vote down vote up 
Dial = ({
  value,
  min = 0,
  max = 100,
  label,
  units = timeMillisecond,
  responseTime,
  setPercent,
}) => {
  const [cached, setCached] = useState(false);

  // set state to invoke getCoords

  //  || state to boolen, triggered or not triggered, if
  //if runtime > 30s, not cached yet, else, it has been cached and can set to true
  // if state false, then ! getcoords on arc
  // once setPercent invoked and changed to 99.5
  // it will invoke State since conditional will be true
  // and true invokes getCoordsOnArc

  // console.log(newVal, 'newVal is here 1'); // undef
  // const newVal = setPercent(value)  //99.5

  // let triggered;

  // console.log(triggered,' here is triggered 1');
  // if (newVal === 99.5) {

  //   if (triggered) {
  //     console.log('entered coords');

  //   }

  //   console.log('here is market');
  //   triggered = true;
  // }
  // console.log(triggered,' here is triggered');

  // console.log(newVal, 'newVal is here 2'); // 0, 99.5
  const backgroundArc = arc()
    .innerRadius(0.65)
    .outerRadius(1)
    .startAngle(-Math.PI / 2)
    .endAngle(Math.PI / 2)
    .cornerRadius(1)();

  const percentScale = scaleLinear().domain([min, max]).range([0, 1]);
  const percent = percentScale(value);

  const angleScale = scaleLinear()
    .domain([0, 1])
    .range([-Math.PI / 2, Math.PI / 2])
    .clamp(true);

  const angle = angleScale(percent);

  const filledArc = arc()
    .innerRadius(0.65)
    .outerRadius(1)
    .startAngle(-Math.PI / 2)
    .endAngle(angle)
    .cornerRadius(1)();

  const colorScale = scaleLinear()
    .domain([0, 1, 2, 3])
    .range(['#9B554E', '#67EFE5', '#A6FFF8', '#A6FFF8']);

  const gradientSteps = colorScale.ticks(10).map((value) => colorScale(value));

  const markerLocation = getCoordsOnArc(angle, 1 - (1 - 0.65) / 2);

  return (
    <div
      style={{
        textAlign: 'center',
      }}
    >
      <svg
        style={{ overflow: 'visible' }}
        width="9em"
        viewBox={[-1, -1, 2, 1].join(' ')}
      >
        <defs>
          <linearGradient
            id="Gauge__gradient"
            gradientUnits="userSpaceOnUse"
            x1="-1"
            x2="1"
            y2="0"
          >
            {gradientSteps.map((color, index) => (
              <stop
                key={color}
                stopColor={color}
                offset={`${index / (gradientSteps.length - 1)}`}
              />
            ))}
          </linearGradient>
        </defs>
        <path d={backgroundArc} fill="#dbdbe7" />
        <path d={filledArc} fill="url(#Gauge__gradient)" />
        <circle
          cx={markerLocation[0]}
          cy={markerLocation[1]}
          r="0.2"
          stroke="#2c3e50"
          strokeWidth="0.01"
          fill={colorScale(percent)}
        />
        <path
          d="M0.136364 0.0290102C0.158279 -0.0096701 0.219156 -0.00967009 0.241071 0.0290102C0.297078 0.120023 0.375 0.263367 0.375 0.324801C0.375 0.422639 0.292208 0.5 0.1875 0.5C0.0852272 0.5 -1.8346e-08 0.422639 -9.79274e-09 0.324801C0.00243506 0.263367 0.0803571 0.120023 0.136364 0.0290102ZM0.1875 0.381684C0.221591 0.381684 0.248377 0.356655 0.248377 0.324801C0.248377 0.292947 0.221591 0.267918 0.1875 0.267918C0.153409 0.267918 0.126623 0.292947 0.126623 0.324801C0.126623 0.356655 0.155844 0.381684 0.1875 0.381684Z"
          transform={`rotate(${
            angle * (180 / Math.PI)
          }) translate(-0.2, -0.33)`}
          fill="#6a6a85"
        />
      </svg>

      <div
        style={{
          marginTop: '0.4em',
          fontSize: '2em',
          lineHeight: '1em',
          fontWeight: '900',
          fontFeatureSettings: "'zero', 'tnum' 1",
        }}
      >
        {format(',')(value)}
      </div>

      {!!label && (
        <div
          style={{
            color: '#8b8ba7',
            marginTop: '0.6em',
            fontSize: '1.3em',
            lineHeight: '1.3em',
            fontWeight: '700',
          }}
        >
          {label}
        </div>
      )}

      {!!units && (
        <div
          style={{
            color: '#8b8ba7',
            lineHeight: '1.3em',
            fontWeight: '300',
          }}
        >
          {units}
        </div>
      )}
    </div>
  );
}
Example #6
Source File: Gauge.jsx    From v3-ui with MIT License 4 votes vote down vote up 
// import { format } from 'd3-format'

export function Gauge({ value = 50, min = 0, max = 100, label, units }) {
  const { theme } = useContext(ThemeContext)

  const backgroundFillColor = theme === 'light' ? '#9f82d7' : '#222B45'

  const startAngle = -Math.PI / 2 - 0.6
  const endAngle = Math.PI / 2 + 0.6

  const backgroundArc = arc()
    .innerRadius(0.85)
    .outerRadius(1)
    .startAngle(startAngle)
    .endAngle(endAngle)
    .cornerRadius(1)()

  const percentScale = scaleLinear().domain([min, max]).range([0, 1])
  const percent = percentScale(value)

  const angleScale = scaleLinear().domain([0, 1]).range([startAngle, endAngle]).clamp(true)

  const angle = angleScale(percent)

  const filledArc = arc()
    .innerRadius(0.85)
    .outerRadius(1)
    .startAngle(startAngle)
    .endAngle(angle)
    .cornerRadius(1)()

  const colorScale = scaleLinear().domain([0, 1]).range(['#EF2751', '#6CE988'])

  const gradientSteps = colorScale.ticks(10).map((value) => colorScale(value))

  // const markerLocation = getCoordsOnArc(
  //   angle,
  //   1 - ((1 - 0.65) / 2),
  // )

  return (
    <div className='text-center'>
      <svg className='mx-auto overflow-visible' width='15em' viewBox={[-1, -1, 2, 1].join(' ')}>
        <defs>
          <linearGradient id='Gauge__gradient' gradientUnits='userSpaceOnUse' x1='-1' x2='1' y2='0'>
            {gradientSteps.map((color, index) => (
              <stop
                key={color}
                stopColor={color}
                offset={`${index / (gradientSteps.length - 1)}`}
              />
            ))}
          </linearGradient>
        </defs>
        <path d={backgroundArc} fill={backgroundFillColor} />
        <path d={filledArc} fill='url(#Gauge__gradient)' />
        {/* <line
          y1="-1"
          y2="-0.65"
          stroke="white"
          strokeWidth="0.027"
        /> */}
        {/* <circle
          cx={markerLocation[0]}
          cy={markerLocation[1]}
          r='0.5'
          stroke='#2c3e50'
          strokeWidth='0.01'
          fill={colorScale(percent)}
        /> */}
        {/* <path
          d="M0.136364 0.0290102C0.158279 -0.0096701 0.219156 -0.00967009 0.241071 0.0290102C0.297078 0.120023 0.375 0.263367 0.375 0.324801C0.375 0.422639 0.292208 0.5 0.1875 0.5C0.0852272 0.5 -1.8346e-08 0.422639 -9.79274e-09 0.324801C0.00243506 0.263367 0.0803571 0.120023 0.136364 0.0290102ZM0.1875 0.381684C0.221591 0.381684 0.248377 0.356655 0.248377 0.324801C0.248377 0.292947 0.221591 0.267918 0.1875 0.267918C0.153409 0.267918 0.126623 0.292947 0.126623 0.324801C0.126623 0.356655 0.155844 0.381684 0.1875 0.381684Z"
          transform={`rotate(${angle * (180 / Math.PI)
            }) translate(-0.2, -0.33)`}
          fill="#6a6a85"
        /> */}
      </svg>

      {/* <div>
        {format(",")(value)}
      </div> */}

      <div
        className='relative'
        style={{
          top: '-5.5rem'
        }}
      >
        {label}
      </div>

      {/* {units && (
        <div style={{
          color: "#8b8ba7",
          lineHeight: "1.3em",
          fontWeight: "300",
        }}>
          { units}
        </div>
      )} */}
    </div>
  )
}