D3.js Data Visualization Fundamentals - Hands On

Color your bar chart by applying fill, using rgb or hex codes, and color by data with a dynamic color picker and a multi value map for cleaner code.

Demonstrates adding data-driven label text to each bar of a d3.js bar chart by binding data, appending text elements, and positioning labels with x and y calculations.

Build a scatter plot in D3.js to visualize two measures like monthly sales and profit, color-code points by a KPI, and add dynamic labels for interactive data insights.

Build and customize bar charts with coloring and labels, explore line charts using path to draw polygons and lines, and create scatter plots with dynamic label visibility and color adjustments.

Explore external data sources and the main data formats used in JavaScript, including CSV and JSON, and prepare to fetch real-time data via web APIs.

Discover how to source external data for D3.js visualizations from file-based formats like csv, tsv, json, and excel, and from dynamic Ajax data via web APIs, including XHR requests.

Learn to load external csv data in d3.js within a cloud nine workspace, then build line and bar charts and display totals and averages in a table using modular functions.

Explore external data sources, including flat files and local server data, and API data via Ajax, then dive into csv and json formats as core web data for d3.js visualizations.

Explore how to retrieve data from a web API with JavaScript, feed it into D3.js, and visualize it, while learning a 50000-foot overview of web APIs and decode techniques.

Explore web api overview with examples from data.gov, learning how to access rest apis, send get requests, and retrieve json data using xhr, while inspecting documentation and datasets.

Decode base64 encoded data using a Mozilla Developer Network example, then fetch JSON via web APIs and pass the decoded content to functions that draw two line charts.

Discover how public data APIs—data.gov, Twitter, GitHub, and Coinbase—fuel dynamic, real-time d3.js visualizations, from streaming tweets to historical pricing and secure data hosting.

Explore web API overview and options. Practice calling a web API with get hubs API to access and decode data stored in a repository in your app, examine data APIs.

Explore scaling and axes in D3 to enhance your visualizations. Build and reference axes with practical, functional examples, then fine-tune visuals to present to end users.

Discover how D3 scales map an input domain to an output range and convert data values into pixels with a scale function.

Demonstrate creating and applying D3 scales to map data values to screen coordinates, using a dynamic domain and range with a zero baseline on x and y axes.

Create axes in D3 by defining an axes function, reference the SPG, and attach a scale with orientation (bottom for x, left or right for vertical) to the SPG.

Demonstrates adding and styling axes in d3 charts, including y and x axes. Learn to implement time scales, date parsing, and formatted ticks for clear, readable visuals.

Explore scaling with domain and range to fit charts within the window, learn about axes, format date values, and control tick labels, then discover making visuals interactive for users.

Explore how to enhance your D3 visualizations with interactivity by adding filters, animating changes for smooth, natural transitions, and displaying tooltips on hover for more detail.

Learn to add a dropdown filter in a D3.js visualization and see how an event listener updates the chart when users select last year, last six months, or last quarter.

Demonstrate animating transitions in D3.js by updating paths and lines with duration and easing options like linear, elastic, circle, and bounce for smooth data redraws.

Demonstrates adding tooltips in d3.js, from native title tooltips to custom div tooltips controlled by mouse events. Learn positioning, styling, and transitions for hover interactions on bar and line charts.

Explore mapping with D3.js, draw maps using geo data, add color to the map, and place city points on states through live demos.

Learn how GeoJSON structures geographic data with feature collections, features, geometry types, and coordinates, and generate shapes and maps in D3 using the path operator.

Learn to draw maps with d3.js by converting shapefiles to geo json, loading state boundaries, and applying a projection to render readable svg maps.

Demonstrate coloring the map by sales data using a color scale, joining sales by state with the state shapes, and rendering with a USA projection.

Plot city sales on a map with d3 by placing circles sized by sales via sqrt radius, using latitude and longitude from a csv for precise positioning.

Explore dashboards in D3 data visualization fundamentals, learning how to present the most important information at a glance for a single-screen business view, with clean design and sparing color.

Apply color principles: hue, lightness, intensity, and chroma to clarify dashboards and visualization. Use analogous, complementary, and diverging color scales, annotate data effectively, and design for f-shaped viewing.

Explore dashboards—what they are, why they matter, and examples of good and bad designs; learn design considerations like color and flow, then see an interactive demo of building one.

Wraps up the hands-on d3.js data visualization fundamentals course with a thank you. The lecture title signals closure and appreciation for learners.