DEV Community: Bouzaine Chamsddine

#1. Building Color Wheel 🎯 visualisation (visx cookbook 📚)

Bouzaine Chamsddine — Mon, 10 May 2021 23:11:22 +0000

Hi 👋

Welcome to the data visualization cookbook here you will learn how to play with primitive SVG shapes and d3 functions to build magical visualizations.

Our new start Visx 🌟

Visx Airbnb is a collection of expressive, low-level visualization primitives for React built on top of the famous D3 library, Visx provide us with the fundamentals pieces that we need to build our data visualization, and our library their goal is to empower devs to build their data visualization component libraries.

Why I built this series 🧐 ?

I was working with d3 inside of react to build some custom charts and DataViz for my client and having the shittest experience ever trying to combine d3 and react together, and like that, I stumbled into VISX my savior this library it's all that I wanted it gave me freedom and power of d3 while keeping my boy react in charge of the dom, one problem I found with Visx there is not enough documentation and examples especially for people that don't master d3 so I took it upon my self to change this fact and create this series of 20 recipes to teach people how to use this amazing tool also while building a data viz library with 19 components, follow along with reader at the end of this series you will have learned Visx, some new charts and built a react visualization library 🥏.

Go!

#1. Building Color Wheel 🎯

In this first recipe we are going to build a Color Wheel it's simple and beginner-friendly and at the same time will help us get a good grasp of Visx and its capabilities.

This piece will be useful to those starting with Visx. We’ll be looking over methods for creating and manipulating color, with examples included. Note that no prior knowledge of Visx is required to follow this article.

Key visx ingredient of our recipe 🗝️ :

1. Prepare Data

To visualize data, we'll want to represent data points as shapes. so to start we need to look at our data first our data is a multidimensional array each array represents colors of the rainbow at a certain brightness, so to build our color wheel all we need to do is to map each array to a pie of arcs and like that we will have a wheel of multiple pies.

const data = [
// a pie  
[
    'rgb(76, 110, 219)', // a single arc
    'rgb(110, 64, 170)',
    'rgb(191, 60, 175)',
    'rgb(254, 75, 131)',
    'rgb(255, 120, 71)',
    'rgb(226, 183, 47)',
    'rgb(175, 240, 91)',
    'rgb(82, 246, 103)',
    'rgb(29, 223, 163)',
    'rgb(35, 171, 216)'
  ],
// 2 nd pie 
 [
    'rgb(76, 110, 219)', // a single arc
    'rgb(110, 64, 170)',
    'rgb(191, 60, 175)',
    ...
  ],
    .....
];

color wheel data visualization data structure /data.js

2. Build a Color Grid

Let's first build something easy to give is a better idea of our data, we are going to build a color matrix each row represents an array of our matrix and each rectangle represents a single data point with its color as that data point value.

import React from "react";
import { colorMatrix } from "./data";
import { color as d3Color } from "d3-color";

const convertRgbToHex = (rgb) => d3Color(rgb).formatHex();

export default function Example({ width, height }) {
  return width < 10 ? null : (
    <div className="chords">
      <svg width={width} height={height}>
        {colorMatrix.map((arr, id) => {
          return arr.map((color, key) => {
            return (
              <>
                <rect
                  fill={color}
                  width={width / 8}
                  x={(width / 8) * key}
                  y={50 * id}
                  height={"50"}
                ></rect>
                <text y={50 * id} fill="white" x={(width / 8) * key}>
                  {convertRgbToHex(color)}
                </text>
              </>
            );
          });
        })}
      </svg>
    </div>
  );
}

Here the code is very straightforward we are iterating over the matrix and then iterating on the individual array to build rectangles all we are manipulating is using the index to change the position of the rectangles, quite easy isn't it, I think with this we are pretty sure we understand our data structure, let's map this idea to the color wheel in the color wheel each array represents a single pie and each data point (color) represents an arc of that pie,
An Arc is a primitive shape of the Visx shapes module "@visx/shape" it's built on D3 arc shape, this arc component can build us an arc path using D3 magic.

3. Build Arcs

We can see here we can use an arc component by itself without any data and the props are pretty easy to understand bounding angles, pad between arcs, the radius of the arc corners and by the way, the arc also takes any SVG props like (fill, opacity, ....)

import React from "react";
import { Arc } from "@visx/shape";
import { Group } from "@visx/group";

export default function Example({ width, height }) {
  return width < 10 ? null : (
    <div className="chords">
      <svg width={width} height={height}>
        <Group top={height / 2} left={width / 2}>
          <Arc
            startAngle={0}
            endAngle={2}
            outerRadius={20}
            innerRadius={150}
            padAngle={0.1}
            cornerRadius={3}
            fill={"#F28F38"}
          />
          <Arc
            startAngle={2}
            endAngle={6.3}
            outerRadius={20}
            innerRadius={150}
            padAngle={0}
            cornerRadius={3}
            fill={"#F25757"}
            opacity={1}
          />
        </Group>
      </svg>
    </div>
  );
}

In our color wheel, our arcs had text in the middle of them representing the colors in HEX we need to create a custom arc component to have that capability, Visx provides a pretty reactive way of overriding the arc render using "React Render prop pattern" basically Vsix pass all the SVG path generated by d3.arc function to the children component of component as we can see here from source code.

const path = arc({
    innerRadius,
    outerRadius,
    cornerRadius,
    startAngle,
    endAngle,
    padAngle,
    padRadius,
  });

  // eslint-disable-next-line react/jsx-no-useless-fragment
  if (children) return <>{children({ path })}</>;

Build custom arc with text (render props)

const CustomArc = ({ path, color }) => {
  return (
    <>
      <path d={path()} fill={color} />
      <text
        fill="white"
        x={path.centroid(path)[0]}
        y={path.centroid(path)[1]}
        dy=".33em"
        fontSize={8}
        textAnchor="middle"
        pointerEvents="none"
      >
        {color}
      </text>
    </>
  );
};

To build our custom arc we use the path function we pass it to the path SVG element and we pass our color value to the text element we use the path.centroid to center our text on top of the arc

we use our custom arc like this :

<Arc
    startAngle={5}
    endAngle={6.3}
    outerRadius={20}
    innerRadius={150}
    padAngle={0.1}
    cornerRadius={3}
    fill={"#F25757"}
    opacity={1}
    >
    {({ path }) => <CustomArc color={"#F56754"} path={path} />}
</Arc>

Now we learned how to build an arc next is how to build a pie with arcs?

4. Build a Pie

Pie is a primitive shape of the Visx shapes module "@visx/shape" it's built on top of d3.pie shape, this pie component generates Arcs shapes data based on provided data prop

So in this example, we can see that the pie component take as prop data as an array that data will be used to create arcs and the size of the arcs will follow the data in the array

<Pie
  data={[1, 1, 2, 3, 5, 8, 13, 21]}
  cornerRadius={3}
  padAngle={0.005}
  >
  {(pie) => <PieArc {...pie} radius={radius} pieNumber={0} />}
</Pie>

const PieArc = ({ arcs, radius, pieNumber }) => {
  return arcs.map(({ startAngle, endAngle }, key) => {
    return (
      <Arc
        key={key}
        startAngle={startAngle}
        endAngle={endAngle}
        outerRadius={(radius * (pieNumber + 1)) / 3 - PIES_SPACING}
        innerRadius={radius * (pieNumber / 3)}
        fill={COLORS[pieNumber + 1]}
        padAngle={ARCS_SPACING}
        cornerRadius={5}
      />
    );
  });
};

We can also pass a prop "pieValue" that can be used as an accessor if the array contains objects we can pass a function to "pieValue" to select the value that we need for example if we have an array with

 [{name : 'beta', value:2}, {name : 'beta', value:5}]

we will need to pass this prop to Pie component

pieValue={(d) => d.value}

If we want to ignore the values inside of the data prop and have all the arcs of the same size we need to pass this prop to the component

pieValue={(d) => 1}

5. Let's build our color Wheel

Now we have all the ingredients for our main dish the color wheel let's now stir them up.

We start by creating our main component that will call the color wheel and will add to it "ParentSize" component from "@visx/responsive" module to make sure that our data visualization will be responsive.

import React from "react";
import { render } from "react-dom";
import { ParentSize } from "@visx/responsive";
import ColorWheel from "./ColorWheel";
import "./sandbox-styles.css";

render(
  <ParentSize>
    {({ width, height }) => <ColorWheel width={width} height={height} />}
  </ParentSize>,
   document.getElementById("root")
  );

Now let's create our main component the colorWheel
1. Our main component takes ** height, width** as props and use is to calculate the radius of the wheel
2. We are using the <Group/> Visx component to wrap the components in a SVG element
3. Our data is a multidimensional array with each array containing colors of a single pie, we iterate over them and we pass each array of color to a component also we are providing an accessor prop pieValue to make sure all created arcs will have the same size
4. We pass the generated data to our custom Arcs component and also we pass the length and the radius of the pies also the pieNumber (index of the current pie) to calculate the with and radiuses of each pie.

export function ColorWheel({ width, height }) {
  const radius = Math.min(width, height) / 2;

  return (
    <div>
      <svg width={width} height={height}>
        <rect width={width} height={height} fill={BACKGROUND_COLOR} rx={14} />
        <Group top={height / 2} left={width / 2}>
          {colorMatrix.map((el, key) => (
            <g key={`wheels-${key}`}>
              <Pie
                key={key}
                data={colorMatrix[key]}
                cornerRadius={3}
                padAngle={0.005}
                pieValue={d => 1}
              >
                {pie => {
                  return (
                    <ColorPie
                      {...pie}
                      pieRadius={radius}
                      currentPieNumber={key}
                      numberOfPies={colorMatrix.length}
                    />
                  );
                }}
              </Pie>
            </g>
          ))}
        </Group>
      </svg>
    </div>
  );
}

We build the component that will be responsible for passing the arcs data to the custom arcs to build each Pie
1. here we are passing a constant arc spacing to separate the arcs.
2. we are using the utility functions to calculate the arcs outer and inner radius, cause by default the pie generate arcs that will build a full pie but here we need rings so for that we need to calculate each arc outer and inner radius.

const getArcOuterRadius = ({ pieRadius, numberOfPies, currentPieNumber }) =>
          (pieRadius * (currentPieNumber + 1)) / numberOfPies - PIE_SPACING;

const getArcInnerRadius = ({ pieRadius, numberOfPies, currentPieNumber }) =>
          pieRadius * (currentPieNumber / numberOfPies)

const ColorPieArc = props => {
  const { arcs, pieRadius, currentPieNumber, numberOfPies } = props;
  return arcs.map(({ startAngle, endAngle, data }, key) => {
    return (
      <Arc
        key={key}
        startAngle={startAngle}
        endAngle={endAngle}
        outerRadius={getArcOuterRadius({
          pieRadius,
          numberOfPies,
          currentPieNumber
        })}
        innerRadius={getArcInnerRadius({
          pieRadius,
          numberOfPies,
          currentPieNumber
        })}
        padAngle={ARCS_SPACING}
        cornerRadius={5}
      >
        {({ path }) => (
          <CustomArc
            color={data}
            path={path}
            i={key}
            opacity={1}
            currentPieNumber={currentPieNumber}
          />
        )}
      </Arc>
    );
  });
};

The last step is to build our as we did before

const CustomArc = ({ path, color }) => {
  return (
    <>
      <path d={path()} fill={color} />
      <text
        fill="white"
        x={path.centroid(path)[0]}
        y={path.centroid(path)[1]}
        dy=".33em"
        fontSize={8}
        textAnchor="middle"
        pointerEvents="none"
      >
        {convertRgbToHex(color)}
      </text>
    </>
  );
};

Here it's the same component we built before the difference here is that our data is in RGB so we used a function convertRgbToHex to convert RGB to hex.

const convertRgbToHex = (rgb) => d3Color(rgb).formatHex();

Bonus :

Generate color wheel data :

Creating the color data is a fun way to learn some d3 color techniques, here we are using interpolateRainbow a function that when we provide it with a number from 0 to 1 it gives an RGB color from the rainbow so what we do is iterate over the pies and we use visx/scale to get the map for the index of the element to a number between 0 and 1.

import { scaleLinear } from "@visx/scale";
import { _arrayOf } from "./utils";
import { interpolateRainbow } from "d3-scale-chromatic";

const numberOfArcs = 10;
const numberOfPies = 8;
let pies = _arrayOf(numberOfPies, []);

for (let i = 0; i < numberOfArcs; i++) {
  let scale = scaleLinear({
    domain: [0, numberOfPies],
    range: [(i - 1) / numberOfArcs, i / numberOfArcs]
  });
  pies = pies.map((d, i) => {
    return [...d, interpolateRainbow(scale(i))];
  });
}
export const colorMatrix = pies;

Some Variation :

#1 Color wheel without using the pie component

#2 Color wheel with native SVG elements and react-spring animation

Pure Sass Isometric City

Bouzaine Chamsddine — Thu, 23 Jul 2020 09:45:58 +0000

it took me 6 hours but it's worth every second

Setup Your Private NPM Registry Using Nexus 3

Bouzaine Chamsddine — Mon, 06 Jul 2020 14:48:29 +0000

I was tasked to build a private npm Registry and maybe later I had to implement a private docker hub, so I went as asked google and tada!, I found this amazing tool "nexus3" it's a bright tool it can achieve both my goals an npm registry and a docker hub and much more, so along my journey setting up the npm registry I struggled a little with the official documentation so I thought of writing this blog to help next users of nexus3

How?

Start the docker image

Let's spin up the Nexus3 docker image

> $ docker build --rm=true --tag=sonatype/nexus3

we will be using the official docker image Here

Sign in to nexus3

Now we have our nexus3 instance running on http://localhost:8081/ Let's visit the app now we have to connect as admin the password is saved inside data-dir/admin.password so all we have to do is hook to the bash inside the nexus3 docker container and get the password.

$ cat data-dir/admin.password

now let's sign-in in the app

Note: if asked to activate the anonymous access always chose not to.

Setup the npm registries

We will need to create 3 new npm registry for our use case (a proxy registry, a hosted registry, group registry) we will need the proxy registry to link it to the public npm registry so we can fetch all the npm packages through one gateway, and we will use the hosted registry to host our npm packages, and the group registry is the one that will group the hosted and proxy registries so basically it's our npm gateway where we can fetch both public and private packages ;) so let's go to the admin panel then to "Repository Management" menu and add this three npm repositories.

Setup the roles and users

We are one step close to our goal now we need the last stones ACL we have to protect our precious packages, we have to set up two things first create two new roles :

package reader/fetcher role (so a user can npm Install our gems ) to do that we have to go to roles and create a new role "npm-fetcher" and give it the right to read and browse the npm registries
package editor/publisher role this is the role for the user that publish, update our packages so we create a new role "npm-publisher" and give it edit and create and browse and read for the npm hosted repo.

Now we have to create two users the npm-reader (Roles: "npm-fetcher") & npm-publisher (Roles: "npm-fetcher","npm-publisher")

Note: save user password in a secure vault we need them for later and enable the "npm Bearer Token Realm".

Configure npm package

Now that we have our registry setup let's configure our packages so we are gone use the npm-publisher user and the hosted npm repo to publish our package and we are gone use the npm gateway and the npm-reader user in the other packages that are going to install our package I know this may seem complicated so let's work with an example to make it easier so suppose we hade developed two projects a "fancy-UI-library" and an "e-commerce app" and now we are wanting to use the "fancy-UI-library" in our "e-commerce-app" so to do this we have to publish "fancy-UI-library" to nexus3 first let's do it =>

publish

We have to create a .npmrc file if we don't have it already and add this line so npm can communicate with our private registry

//YOUR_NPM_HOSTED_REPO_ADDRESS_HERE:_auth=${NPM_TOKEN}

Of course, we need a token to be exported as a Variable like this

> $ export NPM_TOKEN=YOUR_PUBLISHER_TOKEN

To create a publisher token all we need to do is :

> $ echo -n 'YOUR_PUBLISHER_USER:YOUR_PUBLISHER_PASSWORD' | openssl base64

Now all we have to do is run

> $ npm publish

that's it now our package is hosted in the Registry

fetch

Let's go to the other package now "e-commerce app" in this app we only want to install the "fancy-UI-library" so we will use the npm-reader user, all we have to do is to create a token for that user

> $ echo -n 'YOUR_READER_USER:YOUR_READER_PASSWORD' | openssl base64

Add the npm group repo address to our .npmrc and we export our NPM_TOKEN as we did before

//YOUR_NPM_GROUP_REPO_ADDRESS_HERE:_auth=${NPM_TOKEN}

that's it now all we have to do is to install :

> $ npm i fancy-UI-library

Tips

Every time you commit changes to your published package you have to change the version with npm version before publishing them that's how you get multiple versions package

Refrences :

Official Nexus3 Docs