# Render Any Polygon in a React Component

I am writing this because I could not find anything adequate in my interweb searches for how to draw a hexagon using a svg polygon

What I wanted to do was create an svg hexagon in the guise of a react component. I wanted to supply a size property and the component would magically know how to create the coordinates that are be used for the points attribute of the hexagon.

## Hexagon Maths

In the figure above, the angles a, b, c, d,e and f are the central angles of a hexagon. The number of central angles of a polygon is always the same as the number of sides.

As you can see above all the central angles of the polygon will always form a complete circle. Hence the central angles will always add up to 360∘. Since a regular polygon has all equal sides, then the central angles of the polygon are equal.

To find the central angles of a polygon:

1. First identify the number of sides n.
2. Then divide by 360∘.

The central angle of a hexagon is therefore 360 / 6 = 60∘.

If I create coordinates at 0, 60, 120, 180, 240 and 360 and all of the same length, then the <polygon /> component will join the vertices to create a hexagon.

I can use the trigonometry functions of cos and sin to set a coordinate if I know the central angle of the polygon and the length of each side of the polygon. cosine can give me the x coordinate and sine can give me the y coordinate.

## But wait, we can do better

But why stop at a hexagon? The same maths should apply to any equal sided polygon. If I want to render an octagon then the same maths applies, all I need to do is 360 / 8 to get the central angle. If I want a pentagon, then I just need to 360 / 5 The number of sides could be a prop to the component.

## Show me the code

Armed with this knowledge I can now work out the points by just knowing the central angle and the length of a side and an optional central point object that gives me a starting position to center the polygon.

The function takes a sides argument which is the number of sides in the polygon, for example a hexagon has 6. The size or length of each side, an optional center argument which is the x and y coordinates of an optional offset to move the polygon and a rotate argument which will roate the polygon by a number of degrees, more on this laer.

Line 12 - const degrees = (360 / sides) * n - rotate; will get the central angle of the polygon which will be used to ascertain each point in the polygon.

Line 14 - const radians = (Math.PI / 180) * degrees; converts degrees into radians. Both Math.cos and Math.sin expect the number argument to be in radians and not degrees. I initially got this wrong and ended up with something very far removed from a hexagon.

The code below will work out the x and y coordinates of each of the six points.

Here is a jsfiddle with a plain js version, you can just change the sides variable to create a different polygon.

Below is the react component in it’s entirety:

The points are transformed into a string on line 47 which is what the polygon expects. Below is the rendered output:

## The infamous hexagon

I decided to make a more specialised Polygon component called Hexagon to satisfy my original need:

The component takes a HexagonType prop which is a typescript enum and on line 19, I create a turnHexagon variable that adds an rotate value (or not) to have the hexagon rotated. This rotate prop is passed to the Polygon component.

This means the hexagon can be pointy:

or flat

# Narrowing a Union Type in Typescript and a Gotcha With Callbacks

## Narrowing a union type

In typescript, a union type describes a value that can be one of several types separated by the vertical | bar, for example:

In the above code text can either be a string or an array of strings.

Problems arise in union types because you can only access members that are common to all types in the union.

I have recently been commiting code to afterjs to add better type safety to the existing code.

On one of my PRs I created the following union to model all the component types that afterjs might have to deal with when deciding whether or not the component is loaded via a dynamic import. The compponent might be an AyncComponent that knows how to load itself via a dynamic import or it might be a react-router aware component or just a plain old react component. I created the following union:

An AsyncRouteableComonent will have the following interface that gets added in a previous type.

## Type Guards

There is also in typescript the concept of Type Guards. A type guard is an expression that performs a runtime check that guarantees that you have the requested type. I came up with this type guard to ensure I am dealing with an AsyncRouteableComponent:

Any time isAsyncComponent is called, typescript will narrow the specific variable to that specific type:

## Gotcha

There is a gotcha though and I encountered it with this code:

Typescript narrows the scope in all cases due to the isAsyncComponent type guard on line 4 apart from in the anonymous function resolve handler of the load promise on line 7:

The route.component in the anonomus function that resolves after load gives the following compiler error:

Property ‘getInitialProps’ does not exist on type ‘AsyncRouteableComponent’. Property ‘getInitialProps’ does not exist on type ‘ComponentClass<RouteComponentProps<any, StaticContext>>’.

Typescript has not narrowed the scope because it cannot find a getInitialProps member on all types of the union.

It turns out narrowing for a mutable variable such as route.component does not apply inside callbacks such as the anonymous function resolve handler because typescript does not trust that the local variable will not be reassigned before the callback executes. There is a whole big thread about it here.

The workaround is to copy route.component to a local variable before the route guard is called.

Here is the working solution:

The copy happens on line 11 with const used to ensure the local variable cannot be reassigned, typescript is satisfied that it cannot be reassigned and the scope is narrowed for the union and the correct scope is applied.

# Higher Kinded Types in Typescript

Higher kinded types are not currently possible in typescript but let us start by explaining why they exist.

In functional programming there is the concept of a functor. A functor is simply something that can be mapped over. In OOP speak, we’d call it a mappable or some sort of container such as Array that contains a map function.

A very simple javascript example would be:

The above example is mapping over an Array and it is mapping from an array of int to an array of bool. In this example, the Array is the functor. The functor keeps its shape meaning the same number of elements exist after the mapping operation but each element could potentially change.

A functor can be thought of as a container with a map function. A functor is mapping between categories, meaning that it can map from type a to type b. The functor in the above example is the array and the type a would be int with type b the bool.

In haskell, functor has the following type signature:

You can think of fmap as functor map.

If we consider the type signature for fmap again:

What might not be obvious is that f, a and b from the above are actually type parameters. Any lowercase type in haskell is a type parameter.

The more specialised Functor instance for lists looks like this:

The existing list map function is used for the fmap implementation. map has the following signture:

If we now start filling in the type parameters for functor, then the f type parameter is the type constructor [] or would be the array in the javascript example above. Remember the functor is the box or container that contains the fmap function.

The functor mapping function (a, b) -> f a -> f b defines the mapping of a functor of type a to a functor of type b. Another way to think of this is an f of a and f of b or in this case a list of a or a list of b.

The more specialised version of fmap for list looks like this:

Hopefully it is clear that f is the container or list in this specific instance that maps a list of a to a list of b.

In the above example f is the higher kinded type and both a and b are both type parameters.

A higher kinded type (HKT) is simply a type parameter that takes a type parameter. The equivolence with higher order function HOF is that an HOF can take a function as an argument.

## Kinds

In haskell, there are types and there are kinds. You have concreate types like Int, Bool and String. All of these are the kind *. Why? Because they cannot take any type parameters.

[a] is a parameterised type because it takes one concrete type and has the form * -> * and is called a first order type.

A higher kinded type abstracts the parameterised type [] and has the form (* -> *) -> *.

In functor, f is of kind (* -> *) -> * and a or b are of kind * which is often referred to as the ground type.

## Where is the typescript?

Now when we try and define functor in typescript, we quickly come unstuck trying to define an f of a to an f of b because typescript does not support higher kinded types or type parameters that take type parameters.

A number of the functional typescript libraries like fp-ts have come up with a similar work around for the lack of higher kinded types.

They all have a similar interface:

HKT takes 2 type parameters F and A. Thinking in terms of kinds, F represents the first class parameterised type (* -> *) and _A represents the ground type *.

We can now define functor like this:

The above code is now equivalent to the haskell version, we have a map function that maps over a container or box of A and returns a container or box of B.

Hopefully higher kinded types will land in typescript soon but until then I think this is a very inventive solution to a difficult problem.

# Creating an Accessible React Website

I’ve recently been working on an online application form in the form of a multistep wizard that had strict accessibility requirements. I’ve never worked on a project with such strict requirements before. I’ve also heard rumblings that it was not possible to make a SPA accessible. It turns out that there is not that much work involved in making your site accessible and I am going to ensure that any work I do from now on has an accessible first approach. I’m now going to outline in no particular order what I have learned over the past few months.

## Use a router

The initial appeal of the SPA was that it negated the need to go to the server to render new content. An SPA that does not transition to different views with different urls makes it not a great experience for any decent sized SPA. The problem is that a newly server rendered page works great with a screen reader but when you change routes in an SPA, the screen reader does not know that there is new content.

One solution is to have a container component that checks for changes in the react-router location property and focus on an element at the top of the viewport each time the location changes.

Below is an example of such a container component:

The above container checks location prop changes in componentDidUpdate and will focus on the ref element tagged in line 33 if a location change is detected. A tabIndex of -1 is set on the ref which does not add the element to the natural tab order but does allow you to progrmmatically set focus on an element that would not normally receive focus.

As we now have a router and a container component that detects route changes, we should ensure that we can tab up and down the page on all elements that require focus.

There really is not a lot to this if you use sensible html element choices for buttons and links. You should not make a span tag or a div a button or a link for example. I’m sure I’ve been guilty of making a span clickable in the past but that is now firmly on the banned list.

One gotcha is links, if you have a link with no href then you need to give it a tbIndex of 0.

Below is a cut down example of a Link component.

## Use a component library

Using a component library that is outside of the context of the business rules is a great choice. I have controlled components for even simple html elements like input, label etc. This allows me ensure that I am consistent about things like aria attributes. Somebody remarked in a code review that React was broken if I needed to create components for things like an input but they missed the point. Below is a simple input component that I use instead of the default react element:

It is also great to think about components in isolation or out of the context that they will be used. Working in the context of a component library without redux, mobx etc. leads to better generic components.

## Label all Form Controls

All form or input controls should have labels that describe the purpose of the form control.

A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.

With the above in mind, I have the following higher order componet that wraps anything needing a label and tags it appropriately.

• Line 15 assigns an id for the passed in wrapped component by first of all checking the props or defaulting to a generated id from the prefixId function.
• Line 29 assigns the htmlFor attribute of the label to the id member variable.
• line 36 sets the id of the passed in wrapped component to ensure they are properly assigned.
• The correct aria tags are also set for things like aria-invalid on line 39 in the wrapped component. The beauty of higher order components is that the wrapped component is loosely coupled from the hoc allowing them to be developed orthogonally with each having little knowledge about each other.
• Line 41 uses the aria-describedby attribute to connect any validation messages that might occur. A correctly tagged error message element is displayed on lines 45-55 if the invalid prop is true.

With this higher order component in place, I can now add the correct labelling to any component such as the Input component previously described:

## Validation

The higher order component above takes care of displaying an error below each invalid field but a screen reader will not automatically pick this up unless the user tabs onto the form control.

To counteract this we supply a validation summary. Below is an exmple of such a validaion summary from gov.uk that I based our validation summary on:

At first glance this is complete overkill for 2 fields but in the context of a screen reader, this is a great practice. In the event of an error, focus is placed on the h2 element in the ValidationSummary component and a link is created for each validation error. The link’s href is a bookmark link to the invalid element. When the user tabs off the h2, they get an explanation of the error and a chance to jump to the form element and fix the problem.

We used redux-form and the following component was used to create a validation summary for all redux-form errors:

## Aria tagging

When going for an accessibility review of the website, a knowledgable person said that the first rule of aria is to not use aria. I might have been guilty of going overboard with my aria tagging and would welcome any feedback explaining if I have done this.

One definite place to use aria is to inform the screen reader that invisible content is now visible.

Below is a help container that expands and contracts when a link is clicked:

A combination of aria-expanded, aria-controls and aria-live are used to correctly instruct the screen reader that new content is toggled between visible and invisible states.

## Epilogue

I think we can make all our work much more accessible if we put just a little bit of effort in. At the very least we should ensure we are keyboard accessible and let the screen reader know that new content is avilable.

# Instance Reducers

I recently came across a situation with redux that I had not considered before. I had created an autocomplete component that was using redux to store its internal state. This was all well and good when there was only one autocomplete component per page but when I have multiple autocomplete components on a given page then a change to one component was reflected in every component as you can see in the screen shot below where selecting a value in one component instance is reflected in all component instances:

The problem is that every component is reading and writing to the same redux store state element.

If you look at the code below that uses combineReducers, there is only one key for the autocomplete state on line 7:

For the record, I am now firmly of the opinion that using redux to store a component’s internal state is actually a bad idea. If I was to code the autocomplete component again then I would store the state internally in the component. I still think there is a place though for an instance reducer.

My autocomplete reducer was working as I would expect with one component so I just needed to ensure that any code change would work with multiple components without changing the working reducer code. I also wanted to make this reusable for other situations. I just needed some layers of indirection in my mapStateToProps and any redux reducer that I wanted to ensure was segrating its global state by instance.

The steps I needed to complete this task would be:

1. Ensure that any connected component subscribing to redux store state change events had its own unique id.
2. mapStateToProps subscribes a component to redux store updates. I would create a mapStateToProps that would retrieve the relevant state that would be tagged with the unique identifier mentioned in step 1.
3. mapDispatchToProps wraps action creators in a dispatch function which sends an action to a reducer and updates the global store. I could hijack this functionality to send a component identifier with each dispatched action.
4. I would need some capability to wrap any reducer and only mark the state in the store by the unique identifier mentioned in step 1.

For the above requirements, I would create a custom connect function that would call the real connect and add some code to ensure that state was retrived by unique identifier. I would also need a function that added some functionality around calling a reducer.

connect connects a component to the redux store. It does this by returning a higher order component which abstracts away the internals of subscribing to store updates. Higher order components are one of the many things I love about react.

Below is the function that is returned from what I ended up calling instanceConnect that in turn calls react-redux’s connect.

The above code is what is returned from my instanceConnect function, I will supply the full listing later in the post or you can view it all here.

• Line 3 calls the react-redux connect function with a modified mapStateToProps and mapDispatchToProps, I will discuss this later. The returned function accepts a component as an argument which will be the component that receives store update notifications. This connected component which is assigned to the finalWrappedComponent variable will be used in the render function of the higher order component.
• Lines 4 - 20 define a component class named InstanceComponent that will be the result of calling instanceConnect.
• The main reason for being of the InstanceComponent class is to add a unique id to each instance and also to return the connected component that is constructed on line 3.
• An instance id is generated using lodash’s uniqueId utility.
• An instanceId property is assigned to a member variable in the constructor on line 9 and this is added to the props on line 18 of the render funtion of the InstanceComponent.
• InstanceComponent renders the connected component with the instanceId appended to the props on line 18.

Now that I can identify each component instance with an instanceId property that now exists in the props, I somehow need to communicate this unique id to the reducer so I can only pull back the state that is relevant to each component instance.

Below is my modified mapDispatchToProps that will call the passed in user supplied mapDispatchToProps that wraps each action creator with dispatch:

• Line 2 pulls the instanceId from the props.
• Lines 6 - 23 iterates over each key in the supplied object and lines 14 - 22 create a modified version of the action creator.
• When the action creator is called by the client code, the instanceId is appended to the meta property of the action on lines 17 and 19. The meta property of an action is just a plain object where additional properties can be added without polluting the original payload.
• The newly appended action is dispatched on line 21.

Now that I can identify a component instance from the action, I need to use this identifier to pull the relevant redux store state information when state changes are published via mapStateToProps. Below is the modified mapStateToProps that pulls out the instance state information:

The reducerName argument should marry up to the value you give to the key that is supplied to combineReducers.

• The instanceId is pulled from the props on line 2.
• The observant of you will will notice that I am using immutablejs to store the state.
• Lines 4 - 5 use the getIn function of the immutablejs Map which is excellent for dealing with nested values in a state hash. The state either returns the state for that instance if one exists or tries to retrieve data for a property named initialState for this particular slice of the store state pie.

The reducerName property on lines 4 -5 is passed in as an argument from the instanceConnect function that returns the higher order component, you can see the full listing here:

The modified mapStateToProps and mapDispatchToProps are passed to react-redux’s connect.

All that needs to be done is provide a function that can wrap a reducer with some indirection that ensures the state is modified with respect to the instanceId.

Below is the reducer that accepts another reducer as an argument and ensures that the new version of the state is marked with the instanceId.

• The instanceId property is retrieved from the meta property that was appended with the instanceId in the modified mapDispatchToProps.
• Lines 5 - 9 handles the case when redux invokes the @@init action. There will be no state at this stage and so we call the reducer with undefined on line 6, this will give the reducer the opportunity to supply some initial state. We then append this to a property we will name initialState. This property can then be retrieved in our modified mapStateToProps when there is no instance state.
• Lines 11 - 13 simply return the state when there is no instanceId in the props.
• Line 15 retrieves any instance state.
• Line 17 calls the reducer and passes in any instance state that might already exist. The fact that a reducer is a pure function is critical to this working correctly.
• Line 19 updates the state hash with respect to the instanceId by calling the immutablejs setIn function. This update only happens if the state has actually changed.

## Usage

With the instanceConnect function ready to use, then it is simply a matter of calling it like so:

You also need to wrap the appropriate reducers with the reducersByInstance function:

I think what is missing would be to remove the component’s state when the component is unmounted and you could also create the slice when the component is mounted. I’ll possibly look at adding that.

Here is a full listing of the code file that contains both the reducerByInstance and instanceConnect functions.

Here is a test I wrote to drive out the functionality.

# Streams and Async Await in Nodejs

Dealing with asynchronicity in nodejs has been a challenge from day one due to its non blocking nature. The evolution has been slow and the node world has moved from callback hell to promises and from promises to generators.

Transpilers such as babel allow developers to use tomorrow’s unratified features of javascript today and ecmascript7’s async and await could prove to be a game changer.

I’ve used async and await in c# where its addition is still great but its impact is not quite as dramatic.

With async and await, you can write asynchronous code that for all intensive purposes looks synchronous by marking functions as async and and prefixing function invocations with await to indicate execution will be deferred until a promise is returned from the function call after await.

Below is a very simple async function:

The function is marked as async with the async keyword on line 1. Any function that will await on the result of a function that returns a promise must be marked as async.

The await keyword allows you to await on the result of a promise. The getJSON function that is called on line 5 returns a promise and any function that is called with await must return a promise to ensure execution is returned to the calling code in the event of a resolved promise just as if the function had been called synchronously. In the event of a promise rejection, the rejection is thrown allowing you to deal with it just like you would with a normal catch handler. This is as close as javascript has ever become to having normal looking code for non blocking asynchronous function calls.

It is worth pointing out that promises are the glue that makes all this possilbe and they are still one of the most important primitives in node.

## Setup

Babel transpiles function calls marked with await in async functions to generators.

In order to transpile async and await to javascript generators, you will need to npm install the babel-plugin-transform-async-to-generator package and add a reference to the package in your .babelrc.

Below is my .babelrc that allows me to use async await and other features:

## Streams and Async..Await

I recently wrote this csv parser that applies transformations from a csv file input to a destination database table using the excellent knexjs query builder package.

The package uses csv-parse which transforms the csv file of delimitted rows and columns into arrays or objects. CSV-Parse implements the node stream.Transform API.

Csv-parse creates a readable stream that emits data events each time it encouters a chunk of data. CSV-Parse allows me to bind to a readable event that gets passed a row of a csv file for each row in that particular file.

The package I wrote allows the user to specify transformations from a source csv file to a destination table. Some of these transformations might involve one or more asynchronous actions that could end up as some pretty messy code if I just used promises so async and await seemed like a great fit. I will post the original code at the end of the post that used promises and it is very hard to follow and deeply nested.

Below is the code that hooks up the csv-parse stream events to member functions in the class that will handle the events:

Line 6 specifies that the onReadable is bound to the readable event of the stream.

My first attempt at using async and await with the stream is below where I marked the onReadable function that gets rows of csv data passed to it as an async function:

The code calls createObjectFrom on line 12 which is itself an async method that returns a promise and adds it to the this.records array that will be used to persist the transformed values to the database.

Below is a scaled down version createObjectFrom which transforms the csv record into a JavaScript hash of values:

The code loops over an array of transformations, one of which might be an async call to knex on line 9 to retrieve a value from the database.

A promise is returned on line 23 to allow this function to be called with async and await.

I wrote a test to test this function in isolation and I was buoyed when it passed but when running the code for real with stream readable events being raised, the this.records array was empty when it the end event of the stream was reached:

This is because the onReadable function is not being called async from the csv-parse module that raises the evnets.

After much head scratching the answer was to return a promise from createObjectFrom. But the interesting part of this solution was that I was able to mark the function that gets passed to the Promise constructor as async on line 2 of the code below:

On line 2, I mark the anonyous function that gets passed to the Promise constructor as async and this allows me to invoke functions with await and only resolve the promise on line 24 when all the processing has finished.

The onReadable event that calls this function now looks like this and is no longer async:

createObjectFrom now returns a promise that will resolve later and onReadable works as advertised.

Lines 12 and 13 simply add each promise that is returned from createObjectFrom to the this.promises array that can be processed later.

The onEnd event now uses Promise.all to wait for all the promises to resolve before inserting the resolved values into the database:

This works nicely and is much better than the Promise handling code at the bottom of this post.

## async and await in tests

Async and await can also be utilised to make your testing code much simpler and synchronous looking.

Below is my test to ensure that the records are being inserted into the database:

Normally when testing promises from mocha, you have to return a promise from the mocha it function in order for execution to wait until the promise has resolved but as I have marked the anonymous function on line 2 as async, I can simply await (line 6) for the asynchoronous csv parsing code to finish before testing the results.

I can also make further asynchronous calls in the anonymous function like I am on line 14 and await their results before asserting expectations.

This is flatter and synchronous looking code that we all know well.

Below is the code I mentioned previously which used promises instead of async await and is pretty damn nasty.

The async await version is considerably cleaner.

Feedback is welcomed in the comments below.

# Animated 3D Pyramid With CSS3 and SASS

Below is the end result of this post or you can see a live demo here. This will not work for IE11 or before.

The sass/css of this post can be found on github here.

In the dark ages of at least 4 years ago, jQuery used to be the defacto way of creating smooth transitions between elements but now css animations and their promise of hardware accelaration are becoming a standard in all modern browsers. Vendor prefixed css rules are now disappearing into the ether with the usual exception of internet explorer as the standard becomes ratified.

I’ve only just recently discovered the 3D qualities of css3 and I found it pretty easy to cobble together this rotating cube. You can find the css/sass here.

I then created a hexagon which was pretty similar. Here is the sass.

I then tried to create the pyramid in the screenshot above which took me considerably longer to acheive the end result.

## CSS Coordinate System

Before diving into the code, it is important to realise that the coordinate system used by css transforms to position elements is slightly different than the 3D coordinate system you may have previously learned in geometry. In the css coordinate system, the y-axis and the z-axis are the positioned the other way round from what I learned in maths with the y-axis acting as the vertical axis and the z-axis acting as the guage to slide elements forwards or backwards from the user.

## Pyramid Container

The pyramid will be constructed of five divs with four divs making up the triangular faces and a rectangular div for the base.

Below is the markup of the pyramid structure:

Line 6 contains the opening tag for the pyramid-parent div that will act as a container for the pyramid structure.

The css for the pyramid-parent is below:

The perspective rule on line 2 defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. If you apply 3D transforms without setting the perspective, elements appear flattened.

The pyramid-parent element encloses a further div with an id of pyramid that has the following css rules assigned to it:

The transofrm-style rule on line 6 specifies how the children of an element are positioned in 3D space or are simply flattened. The default is flat and a value of preserve-3d instructs the browser to position the elements in 3D-space. Without this property set, the pyramid would appear as a 2d triangle. The screenshot below shows how the pyramid looks without the preserve-3d value set:

## CSS Triangles

The first challenge was how to create triangles using only css. Some slight of hand and a bit of css skullduggery is required to create an equilateral triangle like below:

Below is the css that creates the effect:

The secret to these triangles is creating giant borders to the two perpendicular sides to the direction you would like the triangle to point. Make the opposite side’s border the same size and background colour. The larger the border, the larger the triangle.

## Pyramid Maths

Unsurprisingly, positioning elements in 3D is considerably more difficult than in 2D and thankfully, the trigonomic ratios came to the rescue to correctly judge both the length of the elements and the angles of the pyramid.

Below is an image that labels the important parts of the pyramid:

All positioning takes place around the yellow right angle triangle in the above diagram. I first of all determined that I would like an angle of 60° for the slant angle of the triangle or the angle between the apothem and the base. The apothem is the slant height of a lateral face of the pyramid. With this angle and assigining a width to the base of the triangle, I could work out both the height of pyramid and the apothem height.

Once I know this, I can determine the lengths:

• apothem = (½ Base) / cos(α)
• height = (½ Base) * tan(α)
• apex angle = 180 - 90 - α Where α = 60° and I took the Base = 270px.

One of the nice features of sass is that we can use variables like you would in a normal programming language to stop repeating the same values in css and also mean I can calculate other values from existing variables, something very lacking in current css.

I am using node-sass and I could not find a way of using the trig functions in the sass. This is possible with compass in ruby sass but I don’t know of a way in node-sass of achieving this so I had to calculate the value of the apothem height in a calculator first.

What I wanted to achieve with these vaiables was to be able to only set the $base width variable and every other value would be derived from that. Sadly as I cannot reference the trigonomic cosine trig function from the sass, I had to manually set the $apothem or slant height variable.

The $apex-angle on line 4 is the angle each triangle will be rotated along the x axis in order to tilt each triangle into the centre or apex. ## Constructing the pyramid I will now break down the steps I took to arrange the base and four sides of the pyramid. I will omit the many wrong turns I took in getting here. Below is another view of the markup that makes up the pyramid: Below are the css rules that are assigned to the base div or rectangular base of the pyramid: The width and height of the div are set on lines 3 and 4 and the transform property on line 6 is arguably the most important css3 property when it comes to positioning elements in the 3D space. This property allows you to rotate or move elements in each of the x, y or z 3D coordinate axes. With the base div, I use rotateX to rotate the element 90° along the x or horizontal axis axis to give the impression the div is lying flat and viewed at an angle. The translate3d property is also used to move the div along the z axis. The translate3d property takes 3 values that can be used to move the element along the x, y or z axis respectively. In this example I am using the $base-move variable that was derived from the base div width to shift the div away from the user along the z axis.

This shifts the div along the z axis or appears to move the div away from the user. This value is important when it comes to positioning the four bases of the triangle divs. Below is how the base looks with these rules applied:

The following generic rules are applied to the triangle divs:

The transform-origin property on line 6 provides a convenient way to control the origin about which transforms using the css transform are applied.

Below is how the front face of the pyramid looks without the transform-origin property set:

And below is a screenshot with it set:

Each face will be moved along the x or horizontal axis by half the base width and will be moved down the y axis by the apothem or slant height. transform-origin must be used with the transform property as it only changes the positioning of transformed elements.

Each triangle will be rotated by a multiple of 90° to orient each triangle for a different face of the pyramid (respctively 0°, 90°, 180°, 270°).

With this in mind, each triangle will have its own rules to set this, in the case of the front face, the following css properties are set:

The next face has the same rules except the rotateY property which is increased by 90°.

Until all triangles are positioned:

### Animating the pyramid

The keyFrames rules allows you to gradually change one set of css rules for another which is specified in the from and to properties in the code below:

In the above code the a gradual rotation around the y axis is specified by starting at 0 degrees and completing at 360 degrees. Once the keyframes rules are specified you then need to associate it with an element via the animation property.

The name of the keyframes animation is specified along with the length of the animation. The infinite values states that the animation will continue infinitely and linear specifies that the animation speed is constant throughout the animation.

# Animating Paths and Arcs With d3.js

You can see a working example of the end result of this post here and above is a screenshot.

The full and current source can be found here.

Following up from my last post, I have created yet another sine wave animation (YASWA) and I want to blog about how I achieved a smooth animation for the svg path shapes and arcs with d3.js.

I am not going to go over how to set up the basic shapes in the animation, you can find out how that is done by referring to my last post.

The 3 path shapes that I found challenging to animate are the red sine wave that is progressively added and removed from the document as the unit circle rotates along the x axis and the two blue angled arcs that form the small angled arc at the centre of the centre of the larger circle and the blue arc that expands around the circumference of the larger unit circle.

The first step is to append the paths to an svg group element. Their initial position is not important at this stage.

There is a state object (line 1) that is used as a container to hold a reference to all the svg shapes that will be transformed on each tick of the animation. The shapes are added as properties of the state object. The sine curve path shape is added to the state object on line 10 and the two path shapes that will render the arcs are bound as properties of the state object on lines 13 and 17 repectively.

Line 3 creates a d3.js line function that will be used to generate the rather cryptic svg path mini language instructions for the d attriute of the svg path shape that will plot the points of the sine curve.

A sineData array is initialised on line 8 and the line function will be executed for every element in the array and the x and y accessor functions on lines 5 and 6 will be executed exactly once for each element in the array. Obviously as the array is initially empty, these functions will not be invoked until there actually is some data.

Now that the the svg shapes are on the document, the next step is to kick off the animation function:

line 3 initialises a state.time variable that will be incremented on each tick of the animation. This variable is central to all calculations that will be used to position.

The body of the animate function that is called on line 5 of the above code snippit takes the following form:

The state.time counter is either incremented or decremented on each tick of the animation depending on whether the animation is moving forwards or backwards.

Lnes 11 to 18 make a simple check of whether the time is greater than 2π, in which case it is time to start animating backwards or if the animation is moving backwards and time is less than 0 then the shapes need to move forward. The current direction is passed into the animate function with each call to requestAnimationFrame.

Line 20 calls requestAnimationFrame to progress the animation each time.

### Animating the sine wave

My first attempt at incrementally drawing the sine wave was to add and remove the sinewave on each call to animate but this led to a very jerky horrible visual effect as the browser struggled to recreate the curve each time from the origin.

The solution was incredibly simple and I simply make a call to a function called progressSineGraph that is listed below:

The state object that contains references to all the shapes and properties that are needed to perform the animation is passed into the function along with the direction argument that specifies whether the shapes are animating forwards or backwards.

The code between lines 2 and 6 either adds the current value of the time variable to the sineData array if the animation is progressing forward or removes the current head of the array if the animation is moving backwards. The elements of this array will be used to plot the sine graph.

On line 8 the d attribute of the path shape is set to the state.sine function that is listed below. As mentioned earlier, the d attribute contains the mini language instructions to plot the curve. The line function will generate the instructions by calling the function below for each element in the array:

The line function will be called for each element int the array and x and y coordinates will be created by calling the x and y accessor functions that accept the current element as an argument.

I was pretty amazed how easy this technique is to animate shapes progressing or regressing.

The d3.js line function is a great abstraction and you can see what the generated output of the line function looks like below. The state.sine function has created the d attribute of the path shape that contains the instructions to draw the sine curve. I know which I would rather work with:

It is also worth noting that montone interpolation is set to ensure a smooth curve is drawn.

### Animating the Arcs

All of the shapes in the animation are interlinked in some certain way and all the calculations of where to place the shapes on each tick of the animation are based on the incrementing state.time counter.

The black line that rotates from the centre of the circle to the circumference can be thought of as the hypotenuse of a right angle triangle. The hypotenuse in this document is an svg line shape with x1, y1, x2 and y2 properties that are set using cartesian coordinates to position the shape.

The two arcs that form the angle at the centre of the circle and at the circumference will also use the hypotenuse coordinates once they have been calculated.

Below is the code that positions the svg line shape on each tick of the animation:

Once the x1, y1, x2 and y2 corrdinates have been calculated, they are bound as properties of a hypotenuseCoords object that can be referrenced later. Lines 15 to 18 positions the shape.

We can now use basic trigonometry and the d3.js arc function to create the arcs. The arc function is also a to the d3.js svg line function as it also generates instructions for the path shape’s d attribute but it also has some additional properties such as the innerRadius, outerRadius, startAngle and endAngle properties that are specific to generating arcs.

Below is the code that sets the properties pf the two arcs:

The main calculation takes place between lines 1 and 10 and I would love somebody to tell me there is a better way than this. I always find that if I have used let to declare a variable and later reassign the variable after initialisation, this usually tells to me that I have got something wrong or I have taken the wrong path.

In order to set the angle each time, I need a to give the d3.svg.arc function a startAngle and an endAngle each time the function is called.

The startAngle properties of the 2 arcs are set on lines 15 and 20 and I am using a static value of PI \ 2 which is 90 degrees in radians. This is because a startAngle of 0 will position the startAngle at 12 o’clock on the circle and I want it to be at 3 o’clock or 90 degrees.

On line 1 the atan2 function is called to find the angle that the hypotenuse makes with the startAngle of the arc or 0 on the y axis property.

Arctan2 is different than arctan because it takes 2 arguments and returns an angle in the correct quadrant. If you are unfamiliar with the 4 trigonometric quadrants, you can read about it here.

The atan2 function takes into the account the two signs of the arguments that are passed in and places the angle in the correct quadrant. In this example the angle of the hypotenuse is found by subracting the y2 and y1 properties and subtracting x2 and x1 of the hypotenuse and passing them into atan2. atan2 returns the angle in radians between π and -π. Thus, atan2(1, 1) = π/4 and atan2(−1, −1) = −3π/4.

My first attempt at drawing the arcs did not contain the readjustment of the angle variable below;

Without this readjustment, the arcs where being rendered like this:

This is because atan2 returns the angles between π and -π and the angle was being calculated correctly for rays in quadrant 1 and 2 but not what was required for quadrants 3 and 4. The readjustment of (-2 * (Math.PI) + angle) gives same ray but in the correct direction when in quadrants 3 and 4 by adding the angle onto -2π.

### Epilogue

I am very happy with the end result. If you can suggest a better way for any of the above then please a comment below.

I think I need to move on from sine waves.

# Animating a Sine Wave With d3.js and MathJax

Below is an animated gif of the end result of this post or you can see the real page here.

The full and current source can be found here.

I have spent the last year learning some of the maths I should have learned about 27 years ago. One of the things that I have found interesting while learning maths is the relationship between the unit circle and a sine wave graph of y = sin(x).

A sine wave is a mathmatical curve that describes a smooth repetitive oscillation and the unit circle is a circle of radius 1 centred at the origin (0, 0). The unit circle can be used to find special trigonometric ratios as well as aid in graphing. There is also a real number line wrapped around the circle that serves as the input value when evaluating trig functions such as sine and cosine.

A sine wave is a periodic function or a function that repeats itself at regular intervals. The most important examples of periodic functions are the trigonometric functions that repeat themselves over intervals of . One journey around the unit circle is 360 degrees or in radians. A sine wave shows the excursion around the circle happening in time and is ultimately a circle expressed in time. I have used d3.js to illlustrate how the journey around the circle corresponds to the sine wave movement over time.

There are a number of concepts that I wanted to capture in the animation:

1. Illustrate where the input value of the unit circle corresponds to the (x, y) coordinate on the horizontal axis of the sine wave.

2. Demonstrate how the right angle is formed by the angle of the radius moving counter-clockwise around the unit circle.

3. Show the number scale of the unit circle in radians as ratios in proper mathmatical notation in the browser in both the unit circle and the x axis of the sine graph. MathJax appears to be the only show in town that fits this requiremnt.

This process of creating graphs from the unit circle is often called unwrapping the unit circle.

### Unit Circle Setup

The first step is to create the basic shapes that will illustrate the unit circle and use cartesian coordinates to position them. D3.js has an excelent scale abstraction that allows you to deal in a finer grained scale than pixels. I can now think of the dimensions of the svg document as a 20 x 20 grid which makes positioning things easier to reason about.

On lines 6 and 10 of the above code, horizontal x and vertical y scales are created and bound to two variables. These d3 scale functions take the input domain of 0 to 20 and map it to an output range of either the viewport width for the horizontal x axis or the viewport height for the vertical y axis. It is much easier to think of cartesian coordinates ranging from 0 to 20 than the very fine grained pixel scale.

With the scales in place, it is much easier to start positioning the elements:

An svg group element or a g element is created on line 5. All elements will be added to this group or container. Transformations applied to an svg group or g element are applied to all elements in the group which makes it extremely useful.

The three lines that will form the right angle triangle are created and bound to the adjacent, opposite and hypotenuse variables using the d3.js svg line shape. The initial values of the triangle line’s x1, x2, y1 and y2 coordinates are irrelevant at this stage, they will be set on each tick of the animation. It is just important to get them onto the document during the initialisation phase.

The larger unit circle is created and appended onto the group on line 10 of the above snippet and another smaller circle is added on line 38 which will be positioned counter-clockwise around the large circle by setting its cx and cy coordinates on each tick of the animation. This will give the impression that the small circle is rotating around the larger circle.

Below is how things look so far:

The next stage is to add the number line in radians of the unit circle:

### Number Scale

In order to divide the circle into 8 lines and position the labels, I can kill two birds with one stone by creating an array of objects which have label and angle properties that I can iterate over and create the lines and labels:

Lines 2 to 11 define the array of objects to iterate over. Each object contains a val property that can be thought of as an angle to move counter-clockwise around the unit circle for each element in the array. There is also a label property which is the text of the angle in radians. The cryptic syntax of the label is written in LaTex, which allows you to define mathmatical notation that can be displayed in the browser. Mathjax will later parse these labels into authentic looking math symbols in the browser. More on my difficulties with MathJax at the end of the post.

On lines 12 and 13 the x and y coordinates are determined for each angle value in the array. By finding the cos(x) * radius and sin(x) * radius of each angle in the iteration of objects, I can ascertain the (x, y) coordinates of the point on the circumference of where to position the radian label and of where do draw the dividing line that will show the number scale on my unit circle.

Lines 15 to 16 add offset values for each x and y coordinate to ensure the labels all appear outside of the circle and not flush on the circumference.

Line 18 adds a new svg group element and the textual label is added to this newly created group.

Line 24 simply adds a line from the centre of the circle to the x and y coordinates on the circumference.

Before MathJax does the parsing, the circle looks like this:

A similar approach is used to create the sine graph axis but instead of iterating over an array, a pair of d3.js axis are created and latex syntax is used for the tickValues of the x-axis.

The basic setup is now complete:

### Animating the unit circle

My first step is to create a hash of values that I have unimaginatively called state that serves as a container for all the elements and dimensions that I am going to need to transform the svg elements on the documents. I am going to pass this state object into the animation function that will set the new position of the elements on each tick of the animation. After that, the animation is kicked off with a call to drawGraph:

Arguably the most important value in the above is the time property on line 15 which will provide the x value of the horizontal value of the sine graph. This will be incremented on each tick of the animation.

The drawGraph function is below:

Every time the drawGraph function is called, the time property of the state variable is incremented by roughly 1 degree on line 4 to simulate time moving along the x axis. I do the same on line 5 for the circle that travels along the x axis. I have a separate counter as I need to reset it to zero each time the xIncrement variable exceeds .

Line 7 calls the drawSine function that draws the sine wave on each tick of the animation. More on this later.

Lines 9 to 17 positions the small circle that traverses along the horizontal x. The counter for this coordinate is reset each time it exceeds .

The rest of the code in this function takes care of finding and positoning the shapes on the unit circle to simulate the small circle rotating counter-clockwise on the unit circle and constructing the right angle triangle.

Lines 19 and 20 find the next x and y coordinates of the next point on the circumference to position the small circle that rotates the larger circle and bind them to the variables dy and dx. I use minus in the expression radius * -Math.sin(state.time) because we want to simultate rotating back counter-clockwise. Once we have this coordintate it is easy to position the three lines that make up the right angled triangle on lines 26 to 38.

Line 49 calls requestAnimationFrame which tells the browser that you wish to perform an animation and requests the browser call a specific function, drawGraph in this instance, before the next browser repaint.

I am also using a lesser known overload of bind on line 37 that creates a new partially applied function with some or all of the arguments already bound each time it is called. I have blogged about this previously here. In this case, the state hash will be bound every time the function is called because I am passing it into bind as an extra argument after this. I use this technique a lot in javascript land.

### Animating the Sine wave

Now to the meat and potato of the piece, namely animating a smooth sine wave. The sine wave is mathmatically a very simple curve and a very simple graph. It is a simple x-y plot with the x-axis representing time and the y-axis representing angular displacement around the unit circle.

Below is the drawSineWave function that is called on each tick of the animation:

The fist step on line 2 is to remove the previously plotted curve before recreating it on each tick of the animation.

Lines 4 to 8 creates the points that will be used to plot the sine graph against.

One Line 4 the an array of integers is initialized using the d3 range function, this will create an array of 54 elements ranging from 0 to 53:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13...etc...53]

The upper bound of the array which is 53 is chosen to fill the available width in the viewport

I will come back to why the calculation on line 5 is needed but on line 6 I do a further map of the array that was initialised on line 4 to create an x and y coordinate for each element in the array that can be used to plot the sine wave. The x coordinate is simply the element of the array and y is calculated by getting the negative sine of x because we are simulating the sine wave moving counter-clockwise. For each tick of the animation we simply subtract the state.time variable that we have used previously from x. If you look at the animation, you can see how the small circle in the middle of the unit circle moves up and down at exactly the same rate. Maths in action!

Below is how the sine wave looks without the transformation .map(x => x * 10 / 84) applied to the original array:

If we just use integers to plot the points we get the rough sine wave but if we use floats, we get a much smoother flowing sine wave. I multiply each value by 10 to space it out across the width and then divide by 84 to ensure I get a float back. 84 was arrived at by trial and error to ensure the wave spans across the graph.

Once I have my coordinates to plot the curve, the following code takes care of creating the curve on each animation tick:

Lines 7 to 10 define a d3 line function that will be used by the svg path element on lines 12 to 15. The d3 line function can be thought of as a path generator for a line or in this case a curve as the interpolation mode is set to montone interpolation in order to create a smooth curve for the sine wave. The line function will take the data array (sineData) and convert it into the rather cryptic svg path mini language instructions that the svg path element on lines 12 to 15 will use to construct the curve. We define accessor functions on lines 9 and 10 that will be called for every x and y coordinate of the sineData array on line 1. A monotone interpolation will then be performed by the path function for each point. Every x and y is mapped to the correct scale on lines 3 and 4.

Lines 12 to 15 attach the path element and sets its data via the datum attribute. The d attribute sets the path data or the mini language of path commands that the line function on line 7 will generate. The x and y accessors of the line function are invoked exactly once for each element in the array.

### MathJax

All that remains is to tell MathJax to parse the latex into math symbols. I cannot believe how hard I found this. Below is how the code ended up after a lot of coffee, profanity and self doubt:

First of all MathJax did not seem to play nicely with react, I have to use a wait function to suspend execution until the MathJax is available. On lines 12 to 18 can best be desribed as extreme hackery. I have tagged any element on the svg document that contains latex with the tick css class. I add a hook to mathjax that is called whenever it has done its first parse, I then remove the svg element that was added by MathJax and re-add it again. This causes MathJax to reparse the markup and the symbols are rendered correctly. I don’t know if it was the fact that this is a react site that made this so difficult but it really did not play well with this site.

The wait function is below for completeness:

### Epilogue

I found this hugely enjoyable and I am more than satisfied with the result. This probably means I should get out more.

# Tangent to a Curve on Mousemove With d3.js and math.js

I am available for work right now, if you are interested then email me directly.

Following on from my last post on axes positioning, I have added the functionality to add a tangent to the curve on mousemove. You can see a working example here by dragging the mouse over the svg document.

Below is a screenshot of the end result:

The first steps are to create the elements that I will use to display the tangent indicator and also to hook up an event listener for mousemove on the svg document:

The above creates a circle to indicate where on the curve the mouse is relative to the x axis. A label is created to display the coordinate that the mouse is currently on with respect to the curve and lastly I create a line that will display the tangent.

Line 19 adds a mousemove handler to the svg element that has been previously created with the code below:

The goal of the mousemove handler is to draw the tangent of the curve with respect to the x axis as the mouse moves over the svg document.

In geometry, the tangent line to a plane curve at a given point is the straight line that just touches the curve at that point.

I can get the x for the tangent line from the mouse coordinates of the mousemove function:

With this, I can use mathematical differential calculus to work out the tangent line. If I was to perform these steps with pen and paper, I would take the following steps:

• Find the derivative of the curve
• Substitute the x retreived from the mousemove event into the derivative to calculate the gradient (or slope for the US listeners) of the line.
• Substitute the gradient of the tangent and the coordinates of the given point into the equation of the line in the format y = mx + c.
• Solve the equation of the line for y.

What was surprising and enjoyable for me was that the steps on paper transferred into machine instructions quite well which is not always the case.

Before I plot the line, I want to position my circle and label onto the curve. I am already using the excellent mathjs library to get the coordinates to draw the curve:

Line 2 of the above code uses mathjs’s parse function to create an expression from the string input of the form:

Once I have the expression, I can evaluate it with different values. Lines 5 and line 9 evaluates the expression for each x value in a predetermined range of values. Line 19 plots the line.

As I know what x is from the mouse event, I can use mathjs to parse my expression with respect to x and get the y coordinate to position my label on the curve:

Lines 2 and 4 retrive x from the mouse event and line 6 evaluates y by parsing and evaluating the equation of the curve with respect to x. I then use the x and y coordinates to position my label elements.

Mathjs does not come with its own differentiation module to work out the derivative of the user entered expression but I found this plugin that seems to work out well for this task.

Armed with this module, it was plain sailing to create an equation for the tangent line that I could use to find out y values for the tangent.

• Line 1 creates a derivative function from the equation of the curve.
• The derivative function is evaluted to get the gradient or slope for the US viewers on line 3.
• The c constant or y-intercept of the equation of the line y = mx + c is retrieved on line 5.
• Mathjs is employed to create an expression in the format of y = mx + c.
• A getTangentPoint function is created that will be used to get the points at either end of the function.
• Lines 24 - 26 create 2 points for x that will be far off the length and height of the svg document to give the impression of stretching off to infinity.
• Each point gets its y value by calling the getTangentPoint funtion on line 9 that in turn will solve for x for the equation of the line function previously created on line 7.
• Once we have the pair of points, the line can be plotted on lines 29 - 33.

You can see the end result here.

The following util function will return the y-intercept for a point and gradient:

I am available for work right now, if you are interested then email me directly.