While the use of NFC for things like contactless payments was growing steadily, it exploded early this year due to the Coronavirus pandemic.

In this article we'll go over what NFC is, what it's used for, some creative ways to use NFC, and more.

What is NFC and how does it work?

NFC stands for near-field communication. It is a standard for devices to communicate with each other wirelessly from a very close distance.

NFC is a subset of another technology called RFID, so let's dig a bit into that before circling back to NFC.

What is RFID?

Radio-frequency identification, or RFID, is a generic term for technologies that use radio waves from a reader to track specific tags. These tags all include an antenna and a tiny chip, and can come in many shapes and sizes.

Highway toll payment devices and those plastic things on clothes and other expensive items in stores are some common examples of RFID tags.

A diagram of an RFID tag. NFC tags look very similar – Source

If you've ever seen those big devices on either side of a store entrance, those are just big RFID readers. They're constantly transmitting radio waves and listening for a response.

So what happens if you try to leave a store and there's still a tag on the item you bought?

Most RFID tags are unpowered, so when the antenna in the tag picks up radio waves from the reader, it generates a small amount of electricity. That electricity activates the chip inside the tag, and it sends a signal with the information stored on the chip back to the reader.

In this case, when the reader receives a signal back from the tag on your item, it sounds an alarm.

How are RFID and NFC related?

NFC is a newer, high-frequency version of RFID, and also involves both tags and readers.

NFC's higher frequency means that, while it can transfer data much faster than RFID, it only works from a distance of about 4 cm/1.6 in or less. Meanwhile, RFID works from a distance of up to 12 m/40 ft.

What is NFC used for?

There are a lot of use cases for NFC, but here are some of the most common you'll see.

Contactless payments

These days, the most common thing that NFC is used for is contactless payment. Many newer credit and debit cards include an NFC tag, so you can just hold your card just above a payment terminal rather than swipe or insert it.

Contactless payment enabled credit and debit cards have a symbol on them similar to these:

_Most contactless payment cards will have a similar symbol on the front or back – Source_

Most modern phones include an NFC chip, which can act as both an NFC reader/writer and tag.

This chip, paired with a mobile payment app like Google Pay, Apple Pay, and Samsung Pay, means that you might not even need to take your wallet out anymore.

Instead, your phone can act as a virtual NFC tag for your credit or debit card, even if said card doesn't have an actual NFC tag inside it.

Whether you use your contactless card or a mobile payment app, every payment you make involves tokenization for extra security.

Tokenization is when your card's information is used to generate a random, temporary token for each transaction. Then, your card or mobile payment app can send that temporary token safely, rather than transmit your actual card number, name, and other sensitive information.

However you choose to pay, using a contactless payment card, a mobile payment app, or inserting your card's chip are all much safer than the old method of swiping.

Interacting with products

Traditionally RFID is used for tracking inventory in warehouses and stores. But once a product leaves the store, its RFID tag is disabled.

A lot of products now include NFC tags for additional interaction after you leave the store. Nintendo's Amiibo figures are probably the most common recent example of this:

If this isn't the cutest NFC tag, I don't know what is – Source

When you scan an Amiibo figure with your Nintendo console, you can get special characters, items, or other additional content, depending on the game and figure you use.

Your Nintendo console can also write information back to the NFC tag in your figure, again, depending on the game and figure.

Other companies like Nike have been including NFC tags in things like sports jerseys and sneakers. This allows you to get personalized content based on the product you scan (recent scores for a team, stats for a specific player, and so on), or even check that a product is genuine.

Data transfer

Unlike RFID, which is typically one-way communication between a reader and a tag, NFC allows for two-way communication.

Some phones are able to use NFC to transfer data like contacts or photos between two devices if you touch them together.

Creative uses for NFC

One of the coolest things you can do with NFC is buy a pack of tags online and program them to do different things with your phone.

For example, if you're tired of always giving your WiFi password out to guests, you could program an NFC tag to automatically connect to your network. Then, all your guests need to do is make sure NFC is enabled and hold their phones near the tag.

You could also program NFC tags to control different smart devices around your house. You could have a tag that toggles a smart lamp on or off, or one that sets the thermostat.

The commands triggered by the NFC tags can also be personalized to specific devices. For example, if you like the room a bit cooler than your partner, when you scan the thermostat tag it can lower the temperature. But when your partner scans it, it could raise the temperature to their preferred setting.

There are a lot of other interesting ways to use NFC tags to make your life just a little bit easier. Check out this video for more ideas and to see how to program your own NFC tags in both iOS and Android:

In summary

Though you might not have heard much about NFC until earlier this year (I certainly hadn't), it will likely become the standard we pay for things.

And considering all the cool stuff you can do with a phone and a pack of NFC tags, it's surprising that NFC isn't more widely adopted.

If you end up programming your own NFC tags, let me know what you did and how you did it over on Twitter.

A brief note - this article is about the theory of how to crack passwords. Understanding how cybercriminals execute attacks is extremely important for understanding how to secure systems against those types of attacks.

Attempting to hack a system you do not own is likely illegal in your jurisdiction (plus hacking your own systems may [and often does] violate any warranty for that product).

Let's start with the basics. What is a brute force attack?

This type of attack involves repeatedly trying to login as a user by trying every possible letter, number, and character combination (using automated tools).

This can be done either online (so in real-time, by continually trying different username/password combinations on accounts like social media or banking sites) or offline (for example if you've obtained a set of hashed passwords and are trying to crack them offline).

Offline isn't always possible (it can be difficult to obtain a set of hashed passwords), but it is much less noisy. This is because a security team will probably notice many, many failed login accounts from the same account, but if you can crack the password offline, you won't have a record of failed login attempts.

This is relatively easy with a short password. It becomes exponentially more difficult with a longer password because of the sheer number of possibilities.

For example, if you know that someone is using a 5 character long password, composed only of lowercase letters, the total number of possible passwords is 26^5 (26 possible letters to choose from for the first letter, 26 possible choices for the second letter, etc.), or 11,881,376 possible combinations.

But if someone is using an 11 character password, only of lowercase letters, the total number of possible passwords is 26 ^11, or 3,670,344,486,987,776 possible passwords.

When you add in uppercase letters, special characters, and numbers, this gets even more difficult and time consuming to crack. The more possible passwords there are, the harder it is for someone to successfully login with a brute force attack.

How to protect yourself

This type of attack can be defended against in a couple of different ways. First, you can use sufficiently long, complex passwords (at least 15 characters). You can also use unique passwords for each account (use a password manager!) to reduce the danger from data breaches.

A security team can lock out an account after a certain number of failed login attempts. They can also force a secondary method of verification like Captcha, or use 2 factor authentication (2FA) which requires a second code (SMS or email, app-based, or hardware key based).

Here's an article on how to execute a brute force attack.

How can you crack passwords faster?

A dictionary attack involves trying to repeatedly login by trying a number of combinations included in a precompiled 'dictionary', or list of combinations.

This is usually faster than a brute force attack because the combinations of letters and numbers have already been computed, saving you time and computing power.

But if the password is sufficiently complex (for example 1098324ukjbfnsdfsnej) and doesn't appear in the 'dictionary' (the precompiled list of combinations you're working from), the attack won't work.

It is frequently successful because, often when people choose passwords, they choose common words or variations on those words (for example, 'password' or 'p@SSword').

A hacker might also use this type of attack when they know or guess a part of the password (for example, a dog's name, children's birthdays, or an anniversary - information a hacker can find on social media pages or other open source resources).

Similar protection measures to those described above against brute force attacks can prevent these types of attacks from being successful.

What if you already have a list of hashed passwords?

Passwords are stored in the /etc/shadow file for Linux and C:\Windows\System32\config file for Windows (which are not available while the operating system is booted up).

If you've managed to get this file, or if you've obtained a password hash in a different way such as sniffing traffic on the network, you can try 'offline' password cracking.

Whereas the attacks above require trying repeatedly to login, if you have a list of hashed passwords, you can try cracking them on your machine, without setting off alerts generated by repeated failed login attempts. Then you only try logging in once, after you've successfully cracked the password (and therefore there's no failed login attempt).

You can use brute force attacks or dictionary attacks against the hash files, and may be successful depending on how strong the hash is.

Wait a minute - what's hashing?

35D4FFEF6EF231D998C6046764BB935D

Recognize this message? It says 'Hi my name is megan'

7DBDA24A2D10DAF98F23B95CFAF1D3AB

This one is the first paragraph of this article. Yes, it looks like nonsense, but it's actually a 'hash'.

A hash function allows a computer to input a string (some combination of letters, numbers, and symbols), take that string, mix it up, and output a fixed length string. That's why both strings above are of the same length, even though the strings' inputs were very different lengths.

Hashes can be created from nearly any digital content. Basically all digital content can be reduced to binary, or a series of 0s and 1s. Therefore, all digital content (images, documents, etc.) can be hashed.

There are many different hashing functions, some of which are more secure than others. The hashes above were generated with MD5 (MD stands for "Message Digest"). Different functions also differ in the length of hash they produce.

The same content in the same hash function will always produce the same hash. However, even a small change will alter the hash entirely. For example,

2FF5E24F6735B7564CAE7020B41C80F1

Is the hash for 'Hi my name is Megan' Just capitalizing the M in Megan completely changed the hash from above.

Hashes are also one-way functions (meaning they can't be reversed). This means that hashes (unique and one-way) can be used as a type of digital fingerprint for content.

What's an example of how hashes are used?

Hashes can be used as verification that a message hasn't been changed.

When you send an email, for example, you can hash the entire email and send the hash as well. Then the recipient can run the received message through the same hash function to check if the message has been tampered with in transit. If the two hashes match, the message hasn’t been altered. If they don’t match, the message has been changed.

Also, passwords are usually hashed when they're stored. When a user enters their password, the computer computes the hash value and compares it to the stored hash value. This way the computer doesn’t store passwords in plaintext (so some nosy hacker can't steal them!).

If someone is able to steal the password file, the data is useless because the function can’t be reversed (though there are ways, like rainbow tables, to figure out what plaintext creates the known hash).

What's the problem with hashes?

If a hash can take data of any length or content, there are unlimited possibilities for data which can be hashed.

Since a hash converts this text into a fixed length content (for example, 32 characters), there are a finite number of combinations for a hash. It is a very very large number of possibilities, but not an infinite one.

Eventually two different sets of data will yield the same hash value. This is called a collision.

If you have one hash and you're trying to go through every single possible plaintext value to find the plaintext which matches your hash, it will be a very long, very difficult process.

However, what if you don't care which two hashes collide?

This is called the 'birthday problem' in mathematics. In a class of 23 students, the likelihood of someone having a birthday on a specific day is around 7%, but the probability that any two people share the same birthday is around 50%.

The same type of analysis can be applied to hash functions in order to find any two hashes which match (instead of a specific hash which matches the other).

To avoid this, you can use longer hash functions such as SHA3, where the possibility of collisions is lower.

You can try generating your own hash functions for SHA3 here and MD5 here.

You can try to brute force hashes, but it takes a very long time. The faster way to do that, is to use pre-computed rainbow tables (which are similar to dictionary attacks).

It seems really easy to get hacked. Should I be concerned?

The most important thing to remember about hacking is that no one wants to do more work than they have to do. For example, brute forcing hashes can be extremely time consuming and difficult. If there's an easier way to get your password, that's probably what a nefarious actor will try first.

That means that enabling basic cyber security best practices is probably the easiest way to prevent getting hacked. In fact, Microsoft recently reported that just enabling 2FA will end up blocking 99.9% of automated attacks.

https://xkcd.com/538/

Additional Reading:

Popular password cracking tools

A step by step approach towards visualizing financial datasets

It is a challenge to communicate data and display these visualizations on multiple devices and platforms.

“Data is just like crude. It’s valuable, but if unrefined it cannot really be used.” - Michael Palmer

D3 (Data-Driven Documents) solves this age-old dilemma. It provides developers and analysts the ability to build customized visualizations for the Web with complete freedom. D3.js allows us to bind data to the DOM (Document Object Model). Then apply data-driven transformations to create refined visualizations of data.

In this tutorial, we will understand how we can make the D3.js library work for us.

Getting started

We will be building a chart that illustrates the movement of a financial instrument over a period of time. This visualization resembles the price charts provided by Yahoo Finance. We will break down the various components required to render an interactive price chart that tracks a particular stock.

Required components:

1. Loading and parsing of data
2. SVG element
3. X and Y axes
4. Close price line chart
5. Simple moving average curve chart with some calculations
6. Volume series bar chart
7. Mouseover crosshair and legend

Loading and Parsing of Data

const loadData = d3.json('sample-data.json').then(data => {
  const chartResultsData = data['chart']['result'][0];
  const quoteData = chartResultsData['indicators']['quote'][0];
  return chartResultsData['timestamp'].map((time, index) => ({
    date: new Date(time * 1000),
    high: quoteData['high'][index],
    low: quoteData['low'][index],
    open: quoteData['open'][index],
    close: quoteData['close'][index],
    volume: quoteData['volume'][index]
  }));
});

First, we will use the fetch module to load our sample data. D3-fetch also supports other formats such as TSV and CSV files. The data will then be further processed to return an array of objects. Each object contains the trade timestamp, high price, low price, open price, close price, and trade volume.

body {
  background: #00151c;
}
#chart {
  background: #0e3040;
  color: #67809f;
}

Add the above base CSS properties to personalize the style of your chart for maximum visual appeal.

Appending the SVG Element

const initialiseChart = data => {
  const margin = { top: 50, right: 50, bottom: 50, left: 50 };
  const width = window.innerWidth - margin.left - margin.right;
  const height = window.innerHeight - margin.top - margin.bottom; 
  // add SVG to the page
  const svg = d3
    .select('#chart')
    .append('svg')
    .attr('width', width + margin['left'] + margin['right'])
    .attr('height', height + margin['top'] + margin['bottom'])
    .call(responsivefy)
    .append('g')
    .attr('transform', `translate(${margin['left']},  ${margin['top']})`);

Subsequently, we can use the append() method to append the SVG element to the <div> element with the id, chart. Next, we use the attr() method to assign the width and height of the SVG element. We then call the responsivefy() method (originally written by Brendan Sudol). This allows the SVG element to have responsive capabilities by listening to window resize events.

Remember to append the SVG group element to the above SVG element before translating it using the values from the margin constant.

Rendering the X and Y Axes

Before rendering the axes component, we will need to define our domain and range, which will then be used to create our scales for the axes

// find data range
const xMin = d3.min(data, d => {
  return d['date'];
});
const xMax = d3.max(data, d => {
  return d['date'];
});
const yMin = d3.min(data, d => {
  return d['close'];
});
const yMax = d3.max(data, d => {
  return d['close'];
});
// scales for the charts
const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([0, width]);
const yScale = d3
  .scaleLinear()
  .domain([yMin - 5, yMax])
  .range([height, 0]);

The x and y axes for the close price line chart consist of the trade date and close price respectively. Therefore, we have to define the minimum and maximum x and y values, using d3.max() and d3.min(). We can then make use of D3-scale’s scaleTime() and scaleLinear() to create the time scale on the x-axis and the linear scale on the y-axis respectively. The range of the scales is defined by the width and height of our SVG element.

// create the axes component
svg
  .append('g')
  .attr('id', 'xAxis')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));
svg
  .append('g')
  .attr('id', 'yAxis')
  .attr('transform', `translate(${width}, 0)`)
  .call(d3.axisRight(yScale));

After this step, we need to append the first g element to the SVG element, which calls the d3.axisBottom() method, taking in xScale as the parameter to generate the x-axis. The x-axis is then translated to the bottom of the chart area. Similarly, the y-axis is generated by appending the g element, calling d3.axisRight() with yScale as the parameter, before translating the y-axis to the right of the chart area.

Rendering the Close Price Line Chart

// generates close price line chart when called
const line = d3
  .line()
  .x(d => {
    return xScale(d['date']);
  })
  .y(d => {
    return yScale(d['close']);
  });
// Append the path and bind data
svg
 .append('path')
 .data([data])
 .style('fill', 'none')
 .attr('id', 'priceChart')
 .attr('stroke', 'steelblue')
 .attr('stroke-width', '1.5')
 .attr('d', line);

Now, we can append the [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) element inside our main SVG element, followed by passing our parsed dataset,data. We set the attribute d with our helper function, line. which calls the d3.line() method. The x and y attributes of the line accept the anonymous functions and return the date and close price respectively.

By now, this is how your chart should look like:

Checkpoint #1: Close price line chart, with the X and Y Axes.

Rendering the Simple Moving Average Curve

Instead of relying purely on the close price as our only form of technical indicator, we use the Simple Moving Average. This average identifies uptrends and downtrends for the particular security.

const movingAverage = (data, numberOfPricePoints) => {
  return data.map((row, index, total) => {
    const start = Math.max(0, index - numberOfPricePoints);
    const end = index;
    const subset = total.slice(start, end + 1);
    const sum = subset.reduce((a, b) => {
      return a + b['close'];
    }, 0);
    return {
      date: row['date'],
      average: sum / subset.length
    };
  });
};

We define our helper function, movingAverage to calculate the simple moving average. This function accepts two parameters, namely the dataset, and the number of price points, or periods. It then returns an array of objects, with each object containing the date and average for each data point.

// calculates simple moving average over 50 days
const movingAverageData = movingAverage(data, 49);
// generates moving average curve when called
const movingAverageLine = d3
 .line()
 .x(d => {
  return xScale(d['date']);
 })
 .y(d => {
  return yScale(d['average']);
 })
  .curve(d3.curveBasis);
svg
  .append('path')
  .data([movingAverageData])
  .style('fill', 'none')
  .attr('id', 'movingAverageLine')
  .attr('stroke', '#FF8900')
  .attr('d', movingAverageLine);

For our current context, movingAverage() calculates the simple moving average over a period of 50 days. Similar to the close price line chart, we append the path element within our main SVG element, followed by passing our moving average dataset, and setting the attribute d with our helper function, movingAverageLine. The only difference from the above is that we passed d3.curveBasis to d3.line().curve() in order to achieve a curve.

This results in the simple moving average curve overlaid on top of our current chart:

Checkpoint #2: Orange curve, which depicts the simple moving average. This gives us a better idea of the price movement.

Rendering the Volume Series Bar Chart

For this component, we will be rendering the trade volume in the form of a color-coded bar chart occupying the same SVG element. The bars are green when the stock closes higher than the previous day’s close price. They are red when the stock closes lower than the previous day’s close price. This illustrates the volume traded for each trade date. This can then be used alongside the above chart to analyze price movements.

/* Volume series bars */
const volData = data.filter(d => d['volume'] !== null && d['volume']   !== 0);
const yMinVolume = d3.min(volData, d => {
  return Math.min(d['volume']);
});
const yMaxVolume = d3.max(volData, d => {
  return Math.max(d['volume']);
});
const yVolumeScale = d3
  .scaleLinear()
  .domain([yMinVolume, yMaxVolume])
  .range([height, 0]);

The x and y axes for the volume series bar chart consist of the trade date and volume respectively. Thus, we will need to redefine the minimum and maximum y values and make use of scaleLinear()on the y-axis. The range of these scales are defined by the width and height of our SVG element. We will be reusing xScale since the x-axis of the bar chart corresponds similarly to the trade date.

svg
  .selectAll()
  .data(volData)
  .enter()
  .append('rect')
  .attr('x', d => {
    return xScale(d['date']);
  })
  .attr('y', d => {
    return yVolumeScale(d['volume']);
  })
  .attr('fill', (d, i) => {
    if (i === 0) {
      return '#03a678';
    } else {  
      return volData[i - 1].close > d.close ? '#c0392b' : '#03a678'; 
    }
  })
  .attr('width', 1)
  .attr('height', d => {
    return height - yVolumeScale(d['volume']);
  });

This section relies on your understanding of how theselectAll() method works with the enter() and append() methods. You may wish to read this (written by Mike Bostock himself) if you are unfamiliar with those methods. This may be important as those methods are used as part of the enter-update-exit pattern, which I may cover in a subsequent tutorial.

To render the bars, we will first use .selectAll() to return an empty selection, or an empty array. Next, we pass volData to define the height of each bar. The enter() method compares the volData dataset with the selection from selectAll(), which is currently empty. Currently, the DOM does not contain any <rect> element. Thus, the append() method accepts an argument ‘rect’, which creates a new element in the DOM for every single object in volData.

Here is a breakdown of the attributes of the bars. We will be using the following attributes: x, y, fill, width, and height.

.attr('x', d => {
  return xScale(d['date']);
})
.attr('y', d => {
  return yVolumeScale(d['volume']);
})

The first attr() method defines the x-coordinate. It accepts an anonymous function which returns the date. Similarly, the second attr() method defines the y-coordinate. It accepts an anonymous function which returns the volume. These will define the position of each bar.

.attr('width', 1)
.attr('height', d => {
  return height - yVolumeScale(d['volume']);
});

We assign a width of 1 pixel to each bar. To make the bar stretch from the top (defined by y)to the x-axis, simply deduct the height with the y value.

.attr('fill', (d, i) => {
  if (i === 0) {
    return '#03a678';
  } else {  
    return volData[i - 1].close > d.close ? '#c0392b' : '#03a678'; 
  }
})

Remember the way that the bars will be color coded? We will be using the fill attribute to define the colors of each bar. For stocks that closed higher than the previous day’s close price, the bar will be green in color. Otherwise, the bar will be red.

This is how your current chart should look like:

Checkpoint #3: Volume series chart, represented by red and green bars.

Rendering Crosshair and Legend for interactivity

We have reached the final step of this tutorial, whereby we will generate a mouseover crosshair that displays drop lines. Mousing over the various points in the chart will cause the legends to be updated. This provides us the full information (open price, close price, high price, low price, and volume) for each trade date.

The following section is referenced from Micah Stubb’s excellent example.

// renders x and y crosshair
const focus = svg
  .append('g')
  .attr('class', 'focus')
  .style('display', 'none');
focus.append('circle').attr('r', 4.5);
focus.append('line').classed('x', true);
focus.append('line').classed('y', true);
svg
  .append('rect')
  .attr('class', 'overlay')
  .attr('width', width)
  .attr('height', height)
  .on('mouseover', () => focus.style('display', null))
  .on('mouseout', () => focus.style('display', 'none'))
  .on('mousemove', generateCrosshair);
d3.select('.overlay').style('fill', 'none');
d3.select('.overlay').style('pointer-events', 'all');
d3.selectAll('.focus line').style('fill', 'none');
d3.selectAll('.focus line').style('stroke', '#67809f');
d3.selectAll('.focus line').style('stroke-width', '1.5px');
d3.selectAll('.focus line').style('stroke-dasharray', '3 3');

The crosshair consists of a translucent circle with drop lines consisting of dashes. The above code block provides the styling of the individual elements. Upon mouseover, it will generate the crosshair based on the function below.

const bisectDate = d3.bisector(d => d.date).left;
function generateCrosshair() {
  //returns corresponding value from the domain
  const correspondingDate = xScale.invert(d3.mouse(this)[0]);
  //gets insertion point
  const i = bisectDate(data, correspondingDate, 1);
  const d0 = data[i - 1];
  const d1 = data[i];
  const currentPoint = correspondingDate - d0['date'] > d1['date'] - correspondingDate ? d1 : d0;

  focus.attr('transform',`translate(${xScale(currentPoint['date'])},     ${yScale(currentPoint['close'])})`);
focus
  .select('line.x')
  .attr('x1', 0)
  .attr('x2', width - xScale(currentPoint['date']))
  .attr('y1', 0)
  .attr('y2', 0);
focus
  .select('line.y')
  .attr('x1', 0)
  .attr('x2', 0)
  .attr('y1', 0)
  .attr('y2', height - yScale(currentPoint['close']));
 updateLegends(currentPoint);
}

We can then make use of the d3.bisector() method to locate the insertion point, which will highlight the closest data point on the close price line graph. After determining the currentPoint, the drop lines will be updated. The updateLegends() method uses the currentPoint as the parameter.

const updateLegends = currentData => {  d3.selectAll('.lineLegend').remove();

const updateLegends = currentData => {
  d3.selectAll('.lineLegend').remove();
  const legendKeys = Object.keys(data[0]);
  const lineLegend = svg
    .selectAll('.lineLegend')
    .data(legendKeys)
    .enter()
    .append('g')
    .attr('class', 'lineLegend')
    .attr('transform', (d, i) => {
      return `translate(0, ${i * 20})`;
    });
  lineLegend
    .append('text')
    .text(d => {
      if (d === 'date') {
        return `${d}: ${currentData[d].toLocaleDateString()}`;
      } else if ( d === 'high' || d === 'low' || d === 'open' || d === 'close') {
        return `${d}: ${currentData[d].toFixed(2)}`;
      } else {
        return `${d}: ${currentData[d]}`;
      }
    })
    .style('fill', 'white')
    .attr('transform', 'translate(15,9)');
  };

The updateLegends() method updates the legend by displaying the date, open price, close price, high price, low price, and volume of the selected mouseover point on the close line graph. Similar to the Volume bar charts, we will make use of the selectAll() method with the enter() and append() methods.

To render the legends, we will use.selectAll('.lineLegend') to select the legends, followed by calling the remove() method to remove them. Next, we pass the keys of the legends, legendKeys, which will be used to define the height of each bar. The enter() method is called, which compares the volData dataset and at the selection from selectAll(), which is currently empty. Currently, the DOM does not contain any <rect> element. Thus, the append() method accepts an argument ‘rect’, which creates a new element in the DOM for every single object in volData.

Next, append the legends with their respective properties. We further process the values by converting the prices to 2 decimal places. We also set the date object to the default locale for readability.

This will be the end result:

Checkpoint #4: Mouseover any part of the chart!

Closing Thoughts

Congratulations! You have reached the end of this tutorial. As demonstrated above, D3.js is simple yet dynamic. It allows you to create custom visualizations for all your data sets. In the coming weeks, I will release the second part of this series which will deep dive into D3.js’s enter-update-exit pattern. Meanwhile, you may wish to check out the API documentation, more tutorials, and other interesting visualizations built with D3.js.

Feel free to check out the source code as well as the full demonstration of this tutorial. Thank you, and I hope you have learned something new today!

Special thanks to Debbie Leong for reviewing this article.

How you see and interact with your online bank accounts is about to change. That’s because Europe is forcing change into the financial market.

Digital transformation is a thing this decade. “Digital disruption,” startups who want to be “the Uber of X” in their industry, and going “mobile first” are not new trends. But the banking industry has been slow to move with the times.

New businesses have started to push into the European banking market. Yet progress has been slow, due to both regulation and customer inertia. Even though companies who focus on the best customer experience outperform the market.

The pace of change in the banking industry will accelerate in 2018. Some new laws coming into effect are to thank.

Why are things changing?

European governments have decided that “traditional” banks are uncompetitive and slow. New banks find it very hard to break into the market. To do something about this, they have created some new legislation. This new legislation will force all banks to share a lot more digital information when their customers ask them to.

_Open Banking Model. Image Credit: [XMLdation](https://www.xmldation.com/en/2016/rapid-development-tools-for-api-and-json-flows-becoming-competitive-assets-to-meet-psd2/" rel="noopener" target="blank" title=")

As the above diagram shows, current core banking services will have a new digital interface added. This is called an API, or Application Programming Interface. It will allow third party “fintech” (Financial Technology) apps and services to get information directly from your bank. It’ll also add a new layer of tools on top. These fintech apps may be provided by your bank, or by external companies.

All these changes must become law by January, 2018.

In addition to the European legislation (PSD2), the UK has its own version (Open Banking). So this change will affect the UK regardless of Brexit.

What differences will it make?

This piece will focus on three of the biggest, broadest changes and how they will affect consumers. I will also follow up with a deeper dive into each change. There, I’ll discuss possible side effects as well as business opportunities.

Direct bank account payments

What are they?

Right now, if you’re shopping online, you would most likely choose to pay with your debit card. The merchant (e.g. Amazon) has an acquirer (e.g. WorldPay) who coordinates with your debit card provider (e.g. Visa). They will then pull the payment out of your bank account (e.g. Barclays). That’s a lot of companies — and they’re all getting paid.

_The current payment model. Image Credit: [Mark Sherman, IBM](https://www.slideshare.net/msherman1001/mobile-money-p" rel="noopener" target="blank" title=")

The idea is that you, the consumer, can instead “push” a bank transfer direct from your bank (Barclays) to the merchant (Amazon).

How it affects you, the consumer

In the future, instead of entering all your card information, you’d grant Amazon permission to access your bank account. The user experience would be like logging into other websites with your Facebook account today. The first time, it will take you to your bank’s website and ask you to confirm your authorization. After that, the permission should stay active until you revoke it, so you can just click and buy.

_Login with Facebook example. Image Credit: [Facebook](https://newsroom.fb.com/news/2014/04/f8-introducing-anonymous-login-and-an-updated-facebook-login/" rel="noopener" target="blank" title=")That’s going to be a bit easier than entering your card details every time. But if you have your card details saved somewhere, it’s not going to make a huge difference for your ease of purchase.

It will be interesting to see how this change affects all those other companies who were playing the middlemen. That will, of course, have an indirect effect on you. But it’s hard to say exactly what. Amazon’s costs should go down. Will they pass those savings on to you, or otherwise incentivize you to pay in the way that’s cheapest for them?

Information sharing across all financial institutions

What is it?

Currently, the only way to get your bank information online is to log on to the website. Or perhaps they have a clumsily ported mobile website, packaged as an “app.” If you wanted to let another organization see your bank account, you’d have to give them your login details. This breaks the bank’s T&Cs, and would cause all kinds of issues in case of fraud or misuse.

How it affects you

By the new regulations, banks must provide a secure way for third parties to access your banking information. You will be able to consolidate all your information in one place, and see your ‘actual’ balance across all banks, accounts, and cards. Furthermore, you’ll be able to use that information in useful services.

For example, some of the new “challenger banks” like Monzo or Starling can show you a breakdown of your spending. They can do it by category (e.g. restaurants), then by store (e.g. Nandos), then by transaction. They’ll even show you the location of that pub where you bought a round last night.

_Monzo Spending Breakdown. Image Credit: [Monzo](https://monzo.com/blog/2016/11/14/spending-android/" rel="noopener" target="blank" title=")

Now imagine if you didn’t have to switch current accounts or wait for your bank to bring out something similar. You could just plug in to a service that collates it for you, from all your accounts and credit cards. After these changes, that should be possible and even simple.

There are many possible applications for this type of information. Some examples include: personalized credit or budgeting advice; easier savings; easier current account switching (based on automated, personalized advice); better terms for loans or credit (in exchange for more access to your information for underwriting); easier personal tax returns, or small business accounting; third party fraud detection services you can use across all your cards and accounts; simpler and cheaper international transfers; and the list goes on.

Let’s look at an example of the possible, unexpected side effects of the improved customer service and transparency banks can provide. There’s a great story here about how Monzo helped one customer get his stolen bag back the same night it was taken. There was even a bonus bottle of Jack Daniel’s included.

Strong authentication for online payments

What is it?

Authentication is how the bank or payment provider knows that you are who you say you are. Given how much of your financial information they’ll be able to share, it’s critical that they use it securely. This is where authentication comes in. The new regulations will require multi-factor authentication in many areas. This will include every online purchase over €30.

There are three commonly recognized methods of authentication:

• Something you know (e.g. a password or PIN number)
• Something you have (e.g. a phone number, an app, or a physical dongle)
• Something you are (e.g. biometrics like fingerprint, or facial recognition)

Using more than one of these methods together is “2-factor” or “multi-factor” authentication.

_Multi-factor Authentication. Image Credit: [NIST](https://www.nist.gov/itl/tig/back-basics-multi-factor-authentication" rel="noopener" target="blank" title=")Multi factor authentication is already common when creating new payees in your online bank account. You may have used a card reader, dongle or automated confirmation telephone call. However, this is often an awkward or off-putting user experience. The user must shift their attention away from the website, and it’s especially annoying if the user needs a physical object for the confirmation.

How it affects you

The average online retail transaction in Europe was $85.63 in 2016. This means that the majority of your online payments will need multi-factor authentication.

Purchasing things online might become harder for consumers. So having a slick, multi-factor authentication method in their payment path is going to become critical for online retailers.

Summary:

“Open Banking creates a clear motion towards customer-centricity in the UK’s financial services.” — Starling Bank

Open Banking is going to speed up the pace of change in the finance and banking industry. It’s going to open doors to new and improved customer experiences — and perhaps some bad ones in authorization.

As an online consumer, you should keep your eyes open for some slick new financial services and personalized advice platforms. Watch out for new ways to pay, and for new security checks on your existing payment methods. Expect more from your banking services (which may no longer be provided directly by your bank).

For businesses in the finance industry, and anyone who takes online payments, there are opportunities and risks. These will be highlighted further in upcoming deeper dives. It’s going to be vital that businesses look at how these changes impact each customer’s experience so they can include it in their service design. If you want to talk to some experts in customer experience design and implementation, drop us a line at DMI.

Further reading

• https://www.openbanking.org.uk/about/the-initiative-open-banking/
• https://www.starlingbank.com/explaining-psd2-without-tlas-tough/
• https://www.starlingbank.com/open-banking/
• https://transferwise.com/gb/blog/what-is-psd2
• http://www.experian.co.uk/blogs/latest-thinking/psd2-and-open-banking/
• https://www.finextra.com/blogposting/13651/angst-over-the-ebas-psd2-two-factor-authentication-directive
• https://theodi.org/blog/comment-banking-uber-moment-continued-action
• https://www.home.barclays/content/dam/barclayspublic/docs/Citizenship/Research/Open%20Banking%20A%20Consumer%20Perspective%20Faith%20Reynolds%20January%202017.pdf