Interactive data visualizations with D3.js

D3.js Course

D3.js is the most versatile and powerful data visualization tool on the market. It is behind some of the most stunning and informative interactive dashboards, journalistic stories, responsive scrollytelling pieces, and even static visualizations published in magazines like Scientific American and National Geographic.

Although D3.js is infamous for its steep learning curve, once you understand a few key concepts, your only limit is your imagination. In this course, you will learn how to create D3 interactive visualizations, from basic to advanced charts, and integrate them into an existing website or web application. You will also discover data visualization best practices and create your own project.

Course fee / Application

330 000 HUF + VAT

Apply Now Business inquiry

Application deadline: 2023-04-10
Start date: 2023-04-21

If you want a personalised offer for your team, ask for a special offer!

What will you learn?

  • Understand good practices around data visualization. 
  • Create unique interactive visualizations and integrate them into existing websites or web applications. 
  • Implement customized and fully explorable dashboards optimized for mobile, tablet, and desktop. 
  • Export D3.js visualizations from the browser to a vector graphics editor to generate static visualizations for posters, magazines, etc. 

What makes this course special?

  • D3.js is the most versatile and powerful data visualization tool on the market. 
  • D3 is behind almost all JavaScript data visualization tools but doesn’t share their limitations. 
  • With D3, you can create interactive business dashboards or animated scrollytelling pieces that adapt seamlessly to mobile, tablet, and desktop screens. 

This course is for you if

  • If you are interested in creating data visualizations. 
  • If you have a basic knowledge of HTML, CSS, and JavaScript. 
  • If you want to work together with others in a collaborative environment. 
  • If you want the freedom to create unique pieces. 

This course is not for you if

  • If you don’t know HTML+CSS+Javascript at all. 
  • If you would like to use prebuilt data visualization templates. 
  • If you don’t want to get your hands dirty and code. 

Topics covered:

  • Getting started with data visualization:
    • Going from data to visualization.
    • The theory behind data visualizations.
    • Chart types, from basic to advanced.
    • Storytelling with data.
    • Good practices.
  • The ecosystem of D3.js projects
    • Understanding the D3 ecosystem (HTML, CSS, JavaScript).
    • The key JavaScript concepts for D3 projects: Object manipulation, method chaining, etc.
    • Setting up a development environment for D3 projects.
    • Working in a collaborative development environment.
    • Publishing your work.
    • Integrating D3 projects into existing websites and web applications.
  • Learning D3.js
    • Introduction to D3 visualizations (showcase existing D3 projects).
    • Understanding and creating SVG elements.
    • Manipulating the DOM: selecting and appending elements with D3.
    • Working with data: loading a CSV and a JSON dataset into a project and binding data to DOM elements.
    • Using scales to translate data into visual attributes and generate axes.
    • Drawing line charts, areas, and arcs with D3’s shape generators.
    • Creating pie charts, stacked bar charts, and streamgraphs with D3’s layout generators.
    • Adding interactions and animating visualizations.
    • Visualizing distributions.
    • Refining animations with the enter().update().exit() pattern.
    • Advanced visualizations: hierarchies (circle pack, tree chart, etc.), networks, and maps.
    • Responsive considerations.
    • Improving accessibility.
    • Combining D3 with React.

Schedule and location

The course spans 6 weeks, 2 times a week.

Fridays – 16.00-19.00
Saturday – 10.00-17.00 

Location: MOME Campus
1121 Budapest, Zugligeti út 9-25.

Schedule

Weekly homeworks and a collaborative project at the end to reinforce learning. 

Mentors

  • Anne-Marie Dufour

    course leader, front-end developer

    Anne-Marie is an independent front-end developer specializing in data visualization. She has a computational fluid dynamics and mechanical engineering background and loves breaking down complex subjects into digestible and applicable bits.

    →

  • Mihály Minkó

    data visualization expert

    Mihály is a data visualization expert with passion for every form of visualization, be it digital or physical. He studied philosophy at the University of Szeged and currently works at MOME Innovation Center as a researcher. He has been teaching data visualization in MOME Open for several years now.

    →

  • Nándor Dévai

    Creative developer

    Creative developer and technologist with a deep interest in data visualization, immersive technologies, AR, generative algorithms, and non-traditional user interfaces and interactions, and a solid background in web development. Currently a contributor to various projects at MOME, with topics ranging from UI design to 3D data visualization.

    →

Useful information

If you are not familiar yet with HTML, CSS, and JavaScript, we recommend you learn the basics before joining this course. Here are a few recommended resources: 

Apply Now