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
- https://www.d3indepth.com/
- https://yangdanny97.github.io/blog/2022/08/07/d3-resources
- https://www.dashingd3js.com/d3-tutorial
- D3 documentation
- Fullstack D3 and Data Visualization by Amelia Wattenberger
- Interactive Data Visualization For the Web by Scott Murray
- D3.js in Action: Data Visualization with JavaScript, 2nd Edition by Elijah Meeks
JS & React
- React tutorial
- JavaScript tutorial
- Learn React from Documentation
- Eloquent JavaScript, 3rd Edition by Marijin Haverbeke
Scrollama
- https://pudding.cool/process/introducing-scrollama/
- https://github.com/russellsamora/scrollama
- Learning Scrollama for Interactive Data Visualizations
Data Visualization
- The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures by Dona M. Wong
- The Functional Art, The Truthful Art, How Charts Lie, The Art of Insight by Alberto Cairo
Software
We will go over installing and setting up all of the following:
- GitHub + GitHub Desktop + GitHub Pages
- Visual Studio Code
- Adobe Suite: It is free for students, check this page to set it up.
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:
| Grade | Points |
|---|---|
| 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 & CSSStart 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Recommended Learning Resources:
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:
- W3Schools – beginner-friendly references
- MDN Web Docs – advanced documentation
- freeCodeCamp – coding tutorials
- Codecademy JS Cheatsheet – quick reference