This project aims to re-create a line chart depicting the price of Bitcoin from 2017-2018, along with annotations for important events. The chart is implemented using Vue.js, d3, and d3 annotations. You will be assigned bonus points if your submission is written in Vue 3 and TypeScript.
This repo contains a json of the price of Bitcoin from 2017-2018 prices.json and also data of important events within the price range annotations.json
Fig 1.0 Line Chart with Annotations
-
Simple Page Load:
- Upon loading the page, a chart similar to the provided example will be displayed.
-
Interactive Annotations:
- Annotations on the chart can be clicked and moved around, leveraging the capabilities of d3 annotations.
-
Delete Annotation:
- Functionality is provided to delete an annotation from the chart.
The submission incorporates basic and intermediate concepts of d3 for chart rendering and annotation manipulation. It also demonstrates a solid understanding of Vue.js and TypeScript for building interactive and maintainable components.
You will be assessed based on the following criteria:
-
Understanding of d3 Concepts:
- Demonstrated proficiency in basic and intermediate d3 concepts, as reflected in the implementation of the chart and annotations.
-
Understanding of Vue/TypeScript Concepts:
- Clear utilization of Vue.js and TypeScript basic and intermediate concepts to build interactive and well-structured components.
-
Meaningful Work and Exploration:
- Emphasis on meaningful work and exploration beyond the given foundation, showcasing creativity and initiative.
We appreciate your dedication and effort in contributing to this project. The evaluation criteria are designed to recognize your skills and contributions. Feel free to explore and expand upon the given foundation to create an impactful visualization.