nautilytics

<svg:g class="axis--x"></svg:g>

nautilytics

const xAxis = d3.select(‘svg’)
               .append(‘g’)
               .attr(‘class’, ‘axis--x’)
               .call(d3.axisBottom(xScale));

nautilytics

import {select as d3_select} from 'd3-selection';
...
const markerRef = useRef();

useEffect(() => {
 d3_select(markerRef.current)
  .transition()
  .duration(1000)
  .attr('cx', item.x)
  .attr('cy', item.y);

nautilytics

const markers = d3.selectAll(‘.marker’)
                  .data(data, d => d.id)
                  .enter()
                  .append(‘circle’)
                  .attr(‘class’, ‘marker’)
                  .attr(‘r’, 7.5)
                  .transition()
                  .duration(1000)
                  .attr(‘cx’, d => d.x)
                  .attr(‘cy’, d => d.y);

nautilytics

<svg:circle [attr.r.px]="item.r"
           [ngClass]="'marker'"
           [appSvgTransition]="transition"
           [d3-attr]="{cx: item.x, cy: item.y}">
</svg:circle>

nautilytics

import {quadtree as d3_quadtree} from "d3-quadtree";
import {search} from "search.js";

// ...

// Create cluster points, i.e. an array of:
// [[cluster_x, cluster_y, [points_to_cluster], ...]
const nodes = [[0, 0, {id: 1, r: 10, name: "node-1"}], [10, 10, {id: 2, r: 10, name: "node-2"}]];
const clusterRange = 80;
const quadtree = d3_quadtree().addAll(nodes);

nautilytics

const calculateLayout = (items, spacing = 0.01) => {
  // Calculate a force directed placement for each point
  const MAX_STEPS = 300,
    STRENGTH = 10,
    ALPHA = 0.3;

  if (!items.length) return [];

  const getY = d => d.y;
  const getX = d => d.x;

nautilytics

<svg width="100%" height="100%">
  <defs>
    <mask
      id='mask-for-area-chart'
      maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse">
      <path d="M0Z" style="fill: white;">
      </path>
      </g>
    </mask>

nautilytics

nautilytics

name: Deploy Staging Branch

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest