DOC Data Vis Immersive

Learning Objectives

HTML

Reading:

• Shay Howe's Guide to HTML/CSS
• Slides from today

• Describe the role of HTML, CSS and JS on the web
• Describe the syntax of HTML tags / elements
• Explain the difference between the head and body of an HTML document
• List common HTML tags
• Explain the purpose of tag attributes, and list a few common ones
• Create a basic HTML document in a text editor such as 'Atom'
• Write valid, semantic HTML for a document.

CSS

• Describe the role of CSS on the Web
• Link a CSS stylesheet from an HTML document
• Describe the syntax of a CSS rule
• List common selector types
• List common css properties
• Describe the behavior of floated elements in CSS
• Explain when/how clearfixes are necessary
• Use css to layout and style a document

Git & Github

• Explain the purpose and importance of version control in web development
• Use the GitHub for Windows client to commit to a git repository
• Deploy using GitHub Pages.

Intro to Javascript

• Describe the role Javascript plays alongside HTML and CSS.
• Describe what a variable is and how it holds data.
• Give variables semantic names to provide clarity on data that is being stored.
• List and describe the primitive data types.
• Utilize mathematical operators in Javascript.
• Define type coercion.
• Use prompt to get user input
• Use console.log to display debugging information in the dev tools
• Understand booleans in JS and their use case
• Describe why control flow is utilized in computer programming
• Write an if, else if, and else statement in JS
• Write a for loop and while loop in JS and differentiate between them
• Define and use complex data types.
• Utilize loops to iterate through complex data types

Javascript Objects

• Differentiate between an object and an array
• Create an object in javascript using literal notation
• Retrieve, add, and update properties from objects
• Describe common use cases for objects and arrays
• Navigate and access properties in nested data
• Iterate over an array of objects

jQuery and the DOM

• Explain what the DOM is and how it is structured
• Define the role that jQuery serves as a library
• Define what a CDN ("Content Delivery Network") is and how to use one.
• Select and target DOM elements using a jQuery selector
• Differentiate between DOM and jQuery objects.
• Create, read, update, and delete DOM elements
• Change the attributes or content of a DOM element
• Use data to populate the DOM
• Use event listeners to respond to user actions
• Define $(document).ready() and some jQuery methods.

AJAX

• Explain the difference between synchronous and asynchronous program execution
• Explain why synchronous program execution is not conducive to the front-end.
• Use jQuery $.getJSON method to make asynchronous requests for data.
• Use jQuery's 'promise-like' methods to handle AJAX responses asynchronously.
• Render new HTML content using data loaded from an Ajax request

Charting with Highcharts and ChartJS

• leverage HTML, CSS, and JS to create a basic bar chart
• load dependencies for charting libraries to web application
• utilize highchart and chartjs libraries to create bar, pie, line graphs
• use charting functions in libraries to create charts
• input data into highchart/chartjs formats to generate data in charts.

Charting with API's

• Review basics techniques for fetching data using AJAX
• Use underscore.js to sort, filter and prepare data for presentation
• Present data using line and bar charts via highcharts.js
• Organize JS code into multiple files for reusability

Interactive charts

• render html elements with data sourced from script files
• Utilize html elements to dynamically change endpoints for $.getJSON
• render graphs based on input from html

D3

// Day 4 - tentatively, may not go over