This is a repository to learn about data visualisation repository.
Lesson 1: Day 1: Introduction to D3.js ✅
- Familiarize yourself with the basics of D3.js, its features, and its capabilities.
- Understand the core concepts of selections, data binding, and the enter-update-exit pattern.
- Follow online tutorials or video courses to learn about the syntax and structure of D3.js code.
Day 2: SVG Fundamentals ✅
- Learn about Scalable Vector Graphics (SVG) and how it is used in D3.js for creating visual elements.
- Explore basic SVG shapes such as rectangles, circles, lines, and paths.
- Understand how to manipulate SVG elements using D3.js to change their attributes and styles.
Day 3: Data Binding and Manipulation
- Dive deeper into data binding in D3.js and understand how to bind data to SVG elements.
- Learn about data manipulation techniques using D3.js, such as filtering, sorting, and transforming data.
- Practice creating simple visualizations by binding data to SVG elements and applying visual properties based on the data.
Day 4: Scales and Axes
- Explore scales in D3.js, which help map data values to visual properties like position, size, and color.
- Understand different types of scales, including linear, logarithmic, ordinal, and time scales.
- Learn how to create axes in D3.js to provide reference lines or labels for the scales.
Day 5: Interactive Visualizations
- Learn about event handling in D3.js and how to make your visualizations interactive.
- Implement basic interactivity features such as tooltips, highlighting, and filtering based on user actions.
- Explore D3.js plugins or modules that provide additional interactive functionality.
Day 6: Advanced Visualizations
- Discover advanced visualization techniques in D3.js, such as hierarchical layouts, force-directed graphs, and geographic maps.
- Explore D3.js documentation and examples to learn how to implement complex visualizations.
- Experiment with different customization options to make your visualizations more engaging and visually appealing.
Day 7: Project and Review
- Apply what you've learned throughout the week by working on a small project of your choice.
- Choose a dataset and create a data visualization using D3.js.
- Review your code, optimize it if needed, and seek feedback from others or the D3.js community.
Resources:
- https://d3js.org
- Pluralsight: D3.js Data Visualization Fundamentals