Duration
6 weeksWeekly study
4 hours100% online
How it works
Data Visualisation
Develop practical, industry-ready data skills
On this six-week course, you’ll gain strong foundational skills in data visualisation to ensure you can turn data into captivating visuals.
With expert guidance and practical exercises, you’ll explore web visualisation of arrays and JSON data using the latest tools and technologies.
Gain an introduction to bar charts and piecharts
You’ll start by understanding how to create impactful bar charts using HTML, CSS, JavaScript, and SVG, paving the way for advanced data interpretation. These foundational skills form the backbone of data visual communication.
Next, you’ll learn to design pie charts that distill complex data into intuitive, visual formats, making your information easily digestible and engaging. By mastering pie charts, you’ll open new avenues for communicating data-driven insights.
Unlock the power of WordClouds and TreeMaps
You’ll understand how to employ WordClouds and TreeMaps to highlight patterns and relationships within your datasets. You’ll be able to effectively visualise hierarchical data and text frequency with these dynamic tools.
Then you’ll learn to utilise SVG charts and the powerful D3.js library to craft sophisticated visual representations like force-directed graphs and treemaps. This skill set is essential for any aspiring data visualisation professional, ready to tackle complex datasets.
Finish with advanced data visualisation skills
Finally, you’ll learn to push beyond 2D visuals by venturing into 3D histograms and scene rendering with Three.js, enhancing your toolkit and enabling you to present data in captivating ways that engage your audience.
By the end of this course, you’ll have the knowledge and confidence to turn data into compelling visual stories and be empowered to rapidly disseminate information in today’s data-driven world.
Syllabus
Week 1
Introduction of Data Visualization and Bar Chart
1-Introduction of Data Visualization
This is an introductory video that encompasses all 10 types of charts covered in this course.
2-BarChart
This histogram is created using JavaScript, CSS, SVG, and HTML. No third-party APIs are involved, with the aim of illustrating the principles of 2D visualization. ----- Have a go at re-creating your own version. =^_^=
3-Quiz-BarChart
This is a problem about implementing a 2D coordinate axis visualization using SVG in JavaScript.
Meet the Team
Welcome to Week 1 of our Data Visualization course!
Wrapping up Week 1
This week, we explored the 10 key charts that form the foundation of this course, demonstrating the breadth of data visualization. We implemented a JavaScript-based histogram using CSS and SVG for dynamic rendering.
Week 2
BinTree D3BarChart
BinTree
In this video, we first drew a binary tree and then made a small modification. These small changes will make a big difference for the visual learning experience.
D3BarChart
This video provides an overview of D3 and histogram plotting.
Wrapping up Week 2
This week, we explored the foundational techniques for web-based visualization, including: Core SVG elements (<rect>, <line>, <text>) D3.js as the standard library for datav.
Week 3
PieCharts ForceDirectedGraph
PieCharts
Let's learn about pie charts together; they can be easily adapted into donut charts and rose diagrams.
ForceDirectedGraph
This is a force-directed graph that represents relational data. It can be utilized in various domains such as character relationships, social networks, and knowledge graphs.
Wrapping up Week 3
d3.pie and d3.forceSimulation
Week 4
TreeMap WordCloud
WordCloud
Word clouds are widely used in big data and data analysis posters. Font size shows the quantity each word represents.
TreeMap
Tree maps are great for showing hierarchical data like categories, org charts, and more. Give it a try! The site has 7 types of tree maps. Visit https://cuc.yingshinet.com/v7/ch6/.
Wrapping up Week 4
d3.tree and d3.hierarchy. d3.layout.cloud.js and d3.layout.ruyicloud.js.
Week 5
Conture-Density Threejs-Intro
Conture-Density
This video, we'll learn about contour and density plots. Contour plots are great for geographic data. Density plots show non-parametric density estimates and look like contour plots. The input data for both is different.
Threejs-Intro
This is a quick intro to Three.js. 3D graphics look amazing, but they’re a bit trickier to create than 2D and can make web pages load slower.
Wrapping up Week 5
(1) d3.conture and d3.conture-density (2) Three.js
Week 6
ThreeJS-BarCharts Flask+MySQL+D3JS
ThreeJS-BarCharts
Let's create a scene combining various basic 3D shapes. In 3D visualization, data can be mapped to the height of cylinders, the radius of spheres, and other attributes.
Flask+MySQL+D3JS
Flask+MySQL+D3JS
Wrapping Up Week 6
About Three.js and Data Visualization in Software.
A summary about D3.js.
D3.js is the JavaScript library for bespoke data visualization, allowing you to create custom dynamic visualizations with unparalleled flexibility. Let's do a small exercise to see if you've understood D3.js. Congratulations!
Check your knowledge
As we summarize this course, test your understanding with these interactive multiple-choice questions.
When would you like to start?
Start straight away and join a global classroom of learners. If the course hasn’t started yet you’ll see the future date listed below.
Available now
Learning on this course
On every step of the course you can meet other learners, share your ideas and join in with active discussions in the comments.
What will you achieve?
By the end of the course, you‘ll be able to...
- Certification in Data Visualization: Demonstrates your proficiency in web-based interactive data visualization. You are skilled in creating histograms, pie charts, force-directed graphs, tree maps, word clouds, contour maps, and simple 3D barcharts.
- You can proficiently use D3.js to create visualizations for web pages, which can be embedded into software projects or used to develop interactive data journalism pages.
- Use color and layout to design visually appealing and effective visualization pages.
Who is the course for?
This course is designed for anyone interested in data visualisation with knowledge of at least one programming language.
It will be particularly useful for undergraduate and graduate students in Computer Science, Data Science, Data Journalism, Computational Advertising, Digital Media Technology, Digital Media Art, or related professionals.
What software or tools do you need?
D3.js, JavaScript, SVG, CSS, HTML
Who will you learn with?
Associate Professor at the School of Computer and Cyber Sciences, Communication University of China, holds a Ph.D. from Beihang University. Her research interests include data visualization and AIGC.
Who developed the course?
Communication University of China
The Communication University of China (CUC) is one of the China’s key universities included in 211 Project and “985 Project Innovation Platform” under the Double First-Class Initiative, which is directly administered by the Ministry of Education. CUC was the first communication university founded in 1954 . In August 2004, it was renamed from Beijing Broadcasting Institute to Communication University of China.
Ways to learn | Subscribe & save | Buy this course | Limited access |
---|---|---|---|
Choose the best way to learn for you! | $349.99 for one year Automatically renews | $79/one-off payment | Free |
Develop skills to further your career | Fulfill your current learning need | Sample the course materials | |
Access to this course | tick | tick | Access expires 30 May 2025 |
Access to 1,000+ courses | tick | cross | cross |
Learn at your own pace | tick | tick | cross |
Discuss your learning in comments | tick | tick | tick |
Tests to check your learning | tick | tick | cross |
Certificate when you're eligible | Digital only | Printed and digital | cross |
Cancel for free anytime |
Ways to learn
Choose the best way to learn for you!
Buy this course
$79/one-off payment
Fulfill your current learning need
- Access to this course
- Learn at your own pace
- Discuss your learning in comments
- Tests to boost your learning
- Printed and digital certificate when you’re eligible
Subscribe & save
$349.99 for one year
Automatically renews
Develop skills to further your career
- Access to this course
- Access to 1,000+ courses
- Learn at your own pace
- Discuss your learning in comments
- Tests to boost your learning
- Digital certificate when you're eligible
Cancel for free anytime
Limited access
Free
Sample the course materials
- Access expires 30 May 2025
Find out more about certificates, Unlimited or buying a course (Upgrades) |
Find out more about certificates, Unlimited or buying a course (Upgrades)
Learning on FutureLearn
Your learning, your rules
- Courses are split into weeks, activities, and steps to help you keep track of your learning
- Learn through a mix of bite-sized videos, long- and short-form articles, audio, and practical activities
- Stay motivated by using the Progress page to keep track of your step completion and assessment scores
Join a global classroom
- Experience the power of social learning, and get inspired by an international network of learners
- Share ideas with your peers and course educators on every step of the course
- Join the conversation by reading, @ing, liking, bookmarking, and replying to comments from others
Map your progress
- As you work through the course, use notifications and the Progress page to guide your learning
- Whenever you’re ready, mark each step as complete, you’re in control
- Complete 90% of course steps and all of the assessments to earn your certificate
Want to know more about learning on FutureLearn? Using FutureLearn
Do you know someone who'd love this course? Tell them about it...
More courses you might like
Learners who joined this course have also enjoyed these courses.
Browse more in IT & Computer Science