Tinyclues frontend test

instructions.md

Tinyclues frontend test

Our datascientists are working on improving Tinyclues' customer targeting machine learning algorithm. They need you to help them analyse the behavior of different versions of the model.

Your goal is to plot several KPIs by score quantile, which gives us a first insight on a model. By clicking on a list, the user can switch from a model to another.

The chart explained

A pure activity based segmentation would consume all recent buyers, then recent clickers, then older buyers and clickers. On the other hand, if you observe a peak of a given kpi on the right hand side of the chart (high quantiles, low scores), it means either that your model found a very strong anti correlation between your target and this kpi (think wine vs “buyers less than 20y old”), or that something is going wrong.

The datasets

The datasets contains the number of recent clickers, recent buyers, deep clickers and deep buyers by score percentile.

Links: https://gist.githubusercontent.com/zallek/e7a9c6915c6bf04c4171e1defd5c2eab/raw/a4823f32a894e910f652053a00bd7422fc379e7b/datasetA.json https://gist.githubusercontent.com/zallek/a3beaba11b02e026844efd60cb9ee77b/raw/4244e730f438056f13ae933e0280045ce3b9a41f/datasetB.json

Libraries

• React (required): The JS framework
• Echarts (optional): The data visualization library

Final word

Note that it doesn't have to look like the exemple above if you think there is a better way to use the data (type of vizualisation, colors, sliced view, list, etc).

Good luck!

BTW, we like unit tests :)

Help (optional reading)

Preparation

• Install node and npm https://nodejs.org/en/
• Install React create app: https://github.com/facebook/create-react-app

Create and start your app

create-react-app tinyclues-test
cd tinyclues-test
npm start

Use the dataset

• Download the dataset using the link above
• Use it in your application. For example:

import dataset from './dataset.json'

class App extends Component {
  render() {
    return (
      <div className="App">
        {dataset.forEach(item =>
          <span>{item.buyers}</span>
        )}
      </div>
    )
  }
}

Use echarts (optional)

• Stop the development server
• Add echarts for react

npm install --save echarts-for-react
npm install --save echarts

• Start back the development server

npm start

• Use it in your application

import ReactEcharts from 'echarts-for-react';

<ReactEcharts option={options} /> // Options allow you to define what the charts should look like.

More info: https://github.com/hustcc/echarts-for-react https://ecomfe.github.io/echarts-examples/public/index.html