Scribd
Upload
12 views3 pages

Devr Frontend Assignment

The document outlines a take-home assignment for a front-end developer position, requiring the creation of an animated D3 Treemap Chart using Vue.js and provided population and region data. The assignment involves constructing the chart for 20 timestamps from 1790 to 1990, ensuring real-time updates reflect changes in the data file. Bonus tasks include implementing a slider for easier navigation through timestamps and enabling chart updates without re-rendering after data edits.

Uploaded by

vanilla020901
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views3 pages

Devr Frontend Assignment

The document outlines a take-home assignment for a front-end developer position, requiring the creation of an animated D3 Treemap Chart using Vue.js and provided population and region data. The assignment involves constructing the chart for 20 timestamps from 1790 to 1990, ensuring real-time updates reflect changes in the data file. Bonus tasks include implementing a slider for easier navigation through timestamps and enabling chart updates without re-rendering after data edits.

Uploaded by

vanilla020901
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Devr Front-end Take-home Assignment

Hi there! Congrats on making it to the take-home portion of our interview process! We aim
for this exercise to be enjoyable and brief, and welcome feedback. We also are happy to
answer questions, so please don't be shy about reaching out to us should you find any parts
of this challenge unclear or confusing.

Getting Started
In this assignment, you will need to build an animated D3 Treemap Chart based on the
following stack and data:
1. [Link]
2. [Link]. Documentation: [Link]
3. Population Data (.tsv): Download
4. Region Data (.csv): Download

Note: Please do not change the form of data file otherwise the file will be corrupted
Assignment
You will be building a simple website that visualizes raw data in the form of D3 Treemap
Chart from the provided .csv and .tsv files. The data in the .csv and .tsv file are time-series
data, so your chart needs to grow bigger as time flies.
Here is an example of how your Treemap should look like:
Specifically, you need to do these tasks:
1. Construct the Treemap Chart of the specific timestamp based on
Population & Region Data.
- There are 20 timestamps, so we expect you to render the Treemap for all these 20
timestamps: 1790, 1800, 1810, …, 1990

Example of Data Treemap in year 1790:

Example of Data Treemap in year 1950:


2. Make an animated Treemap Chart (the chart becomes bigger
gradually) as population grow bigger from 1790 to 1990:
Example video of how the chart changes: Video

3. Real-time editing data file resulting in the Treemap Chart


changes:
- You need to edit the data in the data sources (Population .tsv file)
- The Treemap Chart must reflect the changes after you edit the file
- Example: According to the Population .tsv file, the population of North Carolina in
1990 is 6,628,637. We can edit the file to increase this number to 10,000,000, and
we expect that the area of North Carolina will grow bigger on the chart!

Bonus
1. For Task 1, you can use any methods to help visualize all 20 timestamps in a faster
way. My personal recommendation is using a slider to slide over 20 timestamps
2. For Task 3, if you can change the chart after editing the data file without
re-rendering the chart, it will be a big bonus.

You might also like