Learn Axios, Cloudflare and D3

Cloudflare Workers let you write JavaScript Service Workers that run directly in Cloudflare's 200+ edge locations around the world.

With a Cloudflare Worker, you can modify your site's HTTP requests and responses, make parallel requests, and even reply directly from the edge.

Cloudflare Workers are written against a similar API to the W3C Service Workers standard. However, while Service Workers run inside the end user's browser, Cloudflare Workers run on Cloudflare's servers. This means that Cloudflare Workers can implement trusted code (which the client cannot tamper with), and will work no matter what browser the user is running.

In this course, Kristian Freeman will teach you how to build and deploy a Serverless API with Cloudflare Workers. By learning how to build your own serverless JSON APIs, you can effectively manage a highly-available backend for your projects, without needing to learn DevOps or manage services.

Cloudflare secures and ensures the reliability of your external-facing resources such as websites, APIs, and applications. It protects your internal resources such as behind-the-firewall applications, teams, and devices. And it is your platform for developing globally-scalable applications.

cloudflare

Build a Serverless API with Cloudflare Workers

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. *Need an idea?* *[Check out the suggested Portfolio Project for this course.](https://egghead.io/projects/introduction-to-cloudflare-workers)*

Introduction to Cloudflare Workers

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Build Interactive JavaScript Charts with D3 v4

This course covers D3 v3. If you'd like to learn about v4 of D3 (the latest version) [click here for the course on that](https://egghead.io/courses/build-interactive-javascript-charts-with-d3-v4).

This series will gently guide you through the first steps in getting to know D3. The curve can be steep, but with a few simple tools, you'll be charting your buns off in no time flat.

Use D3 (v3) to Build Interactive Charts with JavaScript

Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. `selection.call()` will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.

Better Code Organization with selection.call() with D3 v4

Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the `viewBox` attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visualization responsive.

Make D3 v4 Charts Responsive with the viewBox attribute

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

Animate with the General Update Pattern in D3 v4

Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.

Responsive D3 charts with the viewBox attribute

Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

Debug D3 v4 with Dev Tools

D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in new items or tweening existing shapes to display new values, adding transitions is easy. This lesson shows you how to add animations while building on your existing knowledge of D3 selections.

Animate Transitions in D3 v4

Create a line chart, then easily convert it to an area chart

Line and Area Charts with D3

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. This is usually done using pretty straightforward algorithms, but nothing is straightforward when you’re working with Date objects in JavaScript. If you’re plotting temporal data, you need to use a time scale.

Convert Dates to Numeric Values with Time Scales in D3 v4

Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of output values, like letter grades. In this lesson we’ll see how to use `d3.scaleQuantize()` to do exactly that.

Create Labels from Numeric Data with Quantize Scales in D3 v4

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.

Create a D3 Chart as an Angular Directive

As of version 4, D3 is a completely modular tool, composed of many small libraries. You can use them independently or as a whole, and even create custom builds that include only the parts you need. This lesson will review the options available for installing and using D3, and will set up a local environment for rapid experimentation.

Install and Configure D3 v4

When your data contains discrete, non-numeric property values that you need to format or convert before displaying, `d3.scaleOrdinal()` is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart? This lesson shows you exactly what to do.

Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. Turning a test score into a column height, or a percentage into an opacity requires translating from one set of possible values to another, and linear scales perform a direct, proportional conversion of inputs to outputs. In this lesson we’ll learn the basic API of D3 scales and how to use them.

Convert Input Data to Output Values with Linear Scales in D3 v4

You probably use a framework or standalone library to load data into your apps, but what if that’s overkill for your needs? What if you’re just putting together a quick demo? This lesson demonstrates D3’s APIs for loading data on its own, as well as some helpful methods for inspecting your data and preparing it for use with D3.

Load and Inspect Data with D3 v4

Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing colors, labels, or even link destinations, this lesson demonstrates the process and patterns for updating the DOM using D3’s powerful APIs.

Modify DOM Elements with D3 v4

Column and bar charts are staples of every visualization library. They also make a great project for combining the essential pieces of D3 like selections, scales, axes, and SVG elements. This lesson walks you through the process of creating an essential chart type with all the required components.

Build a Column Chart with D3 v4

D3 is capable of creating regular DOM elements like divs and buttons, and can even render to canvas, but by far the most common type of output is SVG. In this lesson we’ll convert from DOM elements to SVG elements, and make the updates necessary for maintaining a consistent appearance between the two.

Topics

Instructors

Content Type

Free or Pro