Skip to content

JMM429_629 Syllabus - Spring 2026

Advanced Infographics and Data Visualization

  • spring 2026
  • live

Last modified:

Instructor: Michela Effendie
Email: mte42[at]miami[dot]edu
Class Meetings: Tue & Thu, 6:35 PM – 7:50 PM
Modality: Hybrid (Tue: In-Person / Thu: Online)
Office Hours: Schedule via Calendly or email for alternate times

This syllabus is subject to change. Updates will be posted in this document.

Course Description

This course is a seminar designed to introduce interactive data visualization concepts in a web environment. Students will be introduced to code libraries which assist in this task, best practices for interactivity and data visualization. The course will also briefly cover working with data (i.e., how to find sources, cleaning and preparing data for visualizations, etc.).

Graduate students are expected to exhibit more critical thinking and more complex creative projects.

Course Goals

By the end of this course, you will be able to:

  • Learn to use D3.js to make static and interactive visualizations
  • Create responsive charts with D3.js and React
  • Build interactive web-based visual stories
  • HTML & CSS best practices
  • Create a simple scrollytelling piece
  • Further develop data-driven storytelling skills

Materials

Books, articles, and other resources are recommended but not mandatory.

D3

JS & React

Scrollama

Data Visualization

Software

We will go over installing and setting up all of the following:

Assignments & Grading

Required Deliverables

Deliverable Due Date Content
Story Pitch Feb 10 A one-page proposal for your semester project data story.
1st Draft Mar 10 A minimal functioning React application with initial D3 visualization integrated.
2nd Draft Apr 7 A feature-complete project, focused on polish and user experience.
Final Project May 6 The complete, published interactive data story.
Making-of Article May 6 An article that walks through the process of your project.
Self-Reflection May 6 A short essay reflecting on your learning and process.
Weekly Blog Ongoing A weekly post on your inspiration, process, and challenges.

Grading

Weight
Blog 20%
Semester Project 40%
Making-of article about project 15%
Self-reflection 15%
Class Participation 10%

Late Submissions: Accepted with a 10% grade deduction.

Participation: Your engagement during exercises, discussions, and feedback contributes to your grade.

Grading Scale:

GradePoints
A+≥ 97
A≥ 93
A-≥ 90
B+≥ 87
B≥ 83
B-≥ 80
C+≥ 77
C≥ 70
D+≥ 65
D≥ 60
F≥ 0

I reserve the right to adjust the final grade according to class participation, attendance, overall quality of work, etc.

Class Calendar

Phase I: Introduction & Web Fundamentals

Date Topic Class Preparation Key Content
Jan 13 Course Overview & Inspiration Course expectations, tools, and viewing inspiring data stories (e.g., The Pudding).
Jan 15 The Web & Structure Submit: Expectations

Sign up for GitHub
Download GitHub Desktop
Download VS Code
Watch this, from 52:35 to 1:52:34, to better understand the potential of HTML & CSS
Start thinking about story for semester project
How the web works (Client/Server).
HTML Primer (Website structure).
Jan 20 Style & Layout Explore more HTML here (optional)

Inspiration: Find a static visualization you like.
CSS Primer (Style). Mastering responsive layout with CSS Grid and Flexbox.
Jan 22 JavaScript Basics I Explore more CSS here (optional) JS Primer 1: Variables, functions, and control flow.
Jan 27 JavaScript Basics II Watch this, from 1:50:50 to 2:25:40, to learn the basics of JavaScript (optional)

Inspiration: Find an interactive story with subtle effects.
JS Primer 2: Objects, arrays, and useful array methods (.map, .filter).
Jan 29 Storytelling Theory Begin writing weekly blog. Project Guidelines. Discussion: Principles of good data visualization and narrative design.

Phase II: Learning React, D3, & Integration

Date Topic Class Preparation Key Content
Feb 3 Intro to Modern Dev Inspiration: Read an article about design best practices. Why React for structure and D3.js for visuals. Difference between infographics and interactive stories.
Sneak peek: https://2019.wattenberger.com/blog/react-and-d3
Feb 5 React: Structure Get React environment set up (e.g., Vite/CRA). React Basics: Components, props, useState (managing data), and JSX.
Feb 10 React: Control Flow Submit Story Pitch. React Lifecycle Hooks: useEffect (side effects) and useRef (targeting elements).
Feb 12 D3: Data Binding No Class, Attend Miami XR 2026 event
Feb 17 D3: Data Preparation Recommended Exercise: Build a simple React component with state.
Browse through the D3 gallery
D3 Fundamentals: Selections and the General Update Pattern (.data, .enter, .exit, .join).
Feb 19 D3: Static Charts Inspiration: Look at different chart types. D3: Shaping Data & Scales. Loading data (e.g., .csv).
Scales (d3.scaleLinear, d3.scaleBand) to map data to pixels.
Building a basic Bar Chart with D3. Drawing SVG and adding Axis Generators.
Feb 24 D3: Complex Shapes Review D3 shape generators. Building Scatter Plots and Line Charts with D3 generators.
Feb 26 Integration Day 1: The Bridge Complete a D3-only chart exercise. Integrating D3 into React: Using useRef to pass the DOM element to D3 within a useEffect hook.
Mar 3 Integration Day 2: Dynamic Updates Inspiration: Find a chart with smooth transitions. Dynamic Charts: Making your chart update and transition when React state (data) changes.
Mar 5 Integration Day 3: Interactivity Review React/D3 interaction points. Adding Interactivity (hover, click). Creating Tooltips using either React state or D3.
Mar 10 Spring Break Submit 1st Draft (Must include functioning React/D3 integration). No class → Spring break
Mar 12 Spring Break No class → Spring break

Phase III: Advanced Concepts & Project Focus

Date Topic Class Preparation Key Content
Mar 17 Advanced Visualization Inspiration: Find examples of small multiples or maps. Working with Time Series data. Introduction to Mapping (GeoJSON and d3.geoPath).
Mar 19 Code Review & Debugging Bring specific bugs/problems from your 1st draft. Dedicated time for project Code Review and Troubleshooting best practices.
Mar 24 Theory Deep Dive Critique Session. Principles of color theory, effective labeling, and narrative structure.
Mar 26 Performance Choosing between SVG vs. Canvas. Strategies for handling large datasets.
Mar 31 Scrollytelling & UX Inspiration: Find a story that uses "scroll-driven" transitions. The Art of Scrollytelling: Using libraries like scrollama to trigger D3 transitions as the user scrolls.
Apr 2 Project Workshop: Responsiveness Inspiration: Find a strong mobile data visualization. Project Workshop: Focus on responsive design and mobile-friendly data stories.
Apr 7 Visual Story Polish Submit 2nd Draft (Feature-complete). Refining aesthetics (fonts, colors, layout). Focusing on final story flow and polish.
Apr 9 Final Project Clinic Q&A and troubleshooting complex, final-stage bugs.
Apr 14 Presentation Prep Practice Presentation Day: Present a 2-minute "teaser" of your project.
Apr 16 Presentation Prep Practice Presentation Day: Present a 2-minute "teaser" of your project.
Apr 21 Debug Day Optional attendance for last-minute project fixes.
Apr 23 Debug Day Optional attendance for last-minute project fixes.
May 6 Final Submission Submit Semester Project and Self-Reflection. No class

Policies & Resources

This section will include UM’s full policy references, unchanged, as in the reference syllabus:

Attendance Policy Class attendance is critical to the success of hands-on classes, including class participation in discussions and completion of in-class assignments. All students are responsible for material covered in the classroom regardless of their presence; therefore, check the class Blackboard for announcements, assignment requirements and due dates. Do not email your instructor to find out what has been posted to Blackboard.
Religious Holy Day Policy It is the student’s obligation to provide faculty members with notice of the dates they will be absent for religious holy days, preferably before the beginning of classes but no later than the end of the first three (3) class days. Absences due to observance of religious holy days not pre-arranged within the first three class days may be considered unexcused and there is no obligation to allow any make up work, including examinations. Missing a class due to travel plans associated with a particular religious holy day does not constitute an excused absence. The University’s complete Religious Holy Day Policy can be found in the current UM Bulletin.
Academic Integrity Students in this and all UM courses are bound by the University’s Academic Integrity Policy.
AI Use & Documentation ChatGPT and other Generative Artificial Intelligence (AI) software may be useful tools for enhancing learning, productivity, and creativity. For instance, they can assist with brainstorming, finding information, and creating materials, such as text, images, and other media. However, these tools must be used appropriately and ethically, and you must understand their limitations. In particular, it is important to realize that all AI software has the following limitations:
  • How output is arrived at is not clear as the internal processes used to produce a particular output within the generative AI cannot be determined.
  • AI output is typically based on data harvested from unknown online sources. As such, it may reflect biases that should be acknowledged. AI output may also be inaccurate or entirely fabricated, even if it appears reliable or factual.
  • AI evokes a range of intellectual property concerns; sourcing and ownership of information is often unclear and is currently the subject of ongoing litigation.

If you use AI tools in any part of your work, you are responsible for the final product of that work, both academically and in the workforce.

General AI Principles

  1. AI should help you think, not think for you. AI tools may be used to help generate ideas, frame problems, and perform research. It can be a starting point for your own thought process, analysis, and discovery. Do not use them to do your work for you, e.g., do not enter an assignment question into ChatGPT and copy and paste the response as your answer.
  2. The use of AI must be open and documented. The use of any AI in the creation of your work must be declared in your submission and explained. Your faculty can provide guidance as to the format and contents of the disclosure.
  3. Engage with AI Responsibly and Ethically. Engage with AI technologies responsibly, critically evaluating AI-generated outputs and considering potential biases, limitations, and ethical implications in your analysis and discussions. Ensure that the data used for AI applications are obtained and shared responsibly. Never pass off as your own work generated by AI.
  4. You are 100% responsible for your final product. You are the user; if the AI tool makes a mistake, and you use it, then it’s your mistake. If you don’t know whether a statement about any item in the output is true, then it is your responsibility to research it. If you cannot verify it as factual, you should delete it. You hold full responsibility for AI-generated content. Ideas must be attributed, and sources must be verified.
  5. These principles are in effect unless the instructor gives you specific guidelines for an assignment or exam. It is your responsibility to ensure you are following the correct guidelines. Not following them will result in a breach of the Academic Integrity Policy.
  6. Data that are confidential or personal should not be entered into generative AI tools. Putting confidential or personal data into these tools exposes you and others to the loss of important information. Therefore, do not do so. See point 3 above.
  7. The rules and practices on the use of AI may vary from class to class, discipline to discipline. Do not assume that what is acceptable in a Computer Science class will be acceptable in a Philosophy class. It is the student’s responsibility to stay informed as to the instructor’s expectations. When in doubt, ask.

SoC-Specific Principles for the Use of AI

Please adhere to the following overarching institutional principles for the use of AI systems in any SoC coursework:

  • Unless expressly approved by the instructor in writing, AI system outcomes should not be incorporated in final submissions or deliverables. They should solely be employed for process and research purposes.
  • Students must properly cite the AI systems and document the pertinent prompts utilized during their process and research in the final assignment outcomes.
  • Unless expressly approved by the instructor in writing, refrain from using the names of artists, designers, companies, or brands within the prompts. This is to uphold the artistic integrity of those involved.
  • The instructor must ensure equitable access to any AI systems utilized in the course. This means that platforms used by students to meet course requirements must be freely accessible or offered through a UM-provided subscription.
Respect & Civility The School of Communication is committed to providing a safe, comfortable and inclusive learning environment that promotes a culture of respect and civility for everyone. Disruptive, rude, discriminatory, or disrespectful behavior toward the instructor, guest lecturers, or your fellow students will not be tolerated. Students who exhibit disruptive or uncivil behavior will be required to leave the classroom.
Intellectual Property Pursuant to the University’s Policy on Inventions, Intellectual Property, and Technology Transfer, “courseware” includes course syllabi, assignments, assessments, software, and/or other materials that are first created and made available to students as part of the educational curriculum at the University. Courseware is owned by the faculty member, unless otherwise agreed to beforehand in a written contract between the University and the faculty member. This policy and position have not changed due to recent circumstances and this policy and definitions apply to all means by which the course material is provided.

The instructor is the copyright owner of the courseware; individual recordings of the materials on Blackboard and/or of the course sessions are not allowed; and such materials cannot be shared outside the physical or virtual classroom environments.

Plagiarism Statement Students enrolled in this course are expected to abide by the University of Miami Honor Code. The purpose of the Honor Code is to protect the academic integrity of the University by encouraging consistent ethical behavior in assigned coursework. Academic dishonesty of any kind, for whatever reason, will not be tolerated.

No honest student wants to be guilty of the intellectual crime of plagiarism, even unintentionally. Therefore, we provide you with these guidelines so that you don’t accidentally fall into the plagiarism trap.

Plagiarism is the taking of someone else’s words, work, or ideas, and passing them off as a product of your own efforts. Plagiarism may occur when a person fails to place quotation marks around someone else’s exact words, directly rephrasing or paraphrasing someone else’s words while still following the general form of the original, and/or failing to issue the proper citation to one’s source material.

In student papers, plagiarism is often due to…

  • turning in someone else’s paper as one’s own
  • using another person’s data or ideas without acknowledgment
  • failing to cite a written source (printed or internet) of information that you used to collect data or ideas
  • copying an author’s exact words and putting them in the paper without quotation marks
  • rephrasing an author’s words and failing to cite the source
  • copying, rephrasing, or quoting an author’s exact words and citing a source other than where the material was obtained (e.g., citing a primary source when you actually used a secondary source)
  • using wording that is very similar to that of the original source, but passing it off as one’s own

The last item is probably the most common problem in student writing. It is still plagiarism if the student uses an author’s key phrases or sentences in a way that implies they are his/her own, even if s/he cites the source.

Well-Being Resources As you complete your coursework, consider how you can maintain your health and well-being as a top priority. To help you become familiar with the many programs and services available on campus, review the information collected on the Division of Student Affairs Student Well-Being and Resiliency website available at [miami.edu/well-being](http://miami.edu/well-being).

Please reach out to any of the resources on the site if you need support throughout the semester.

There is a lot of learning resources out there. This course does not intend to replace any of those.

Instead, we heavily rely on them. Here are some free learning resources to look at: