Learn D3, Realm and Scss

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Convert SCSS (Sass) to CSS-in-JS

D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.

D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.

When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.

In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create A Bar Chart with React and D3

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax. SCSS borrows features from other languages to write smarter, reusable and more readable styles. This course will focus on how to use SCSS’s more useful features, compare them against each other and assess when their usage is appropriate.

Learn the Best and Most Useful SCSS

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

Techniques to improve your CSS, Sass, and HTML implementations for everyday scenarios. 

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts 

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

Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.

Mixins have some nice features:
- Arguments just like functions.
- Arguments can have default values and optional values.
- Named arguments allow us to use optional and default arguments when the mixin is included.
- Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
- The @content directive allow us to add additional styles when the mixin is included.

In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.

Reuse Styles with the SCSS @mixin Directive

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

Updating the same color or metric multiple times is no fun. SCSS variables improve maintainability by allowing one name to represent a value that can be used anywhere. SCSS variables also give us the power of creating our own naming conventions to express the intent of specific values. In this lesson we learn how to use SCSS variables to assign user friendly names to colors/metrics so one value change will update that value in all the right places.

Use SCSS Variables for Readable and Maintainable Stylesheets

SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions. In this lesson we learn how to remove the redundancy of targeting pseudo-elements/classes, and child elements by taking advantage of SCSS’s nesting and parent selectors.

Organize Styles with SCSS Nesting and the Parent Selector

In this lesson we learn how to set up SCSS  and transpile your SCSS code into CSS with node-sass.

Transpile SCSS to CSS using node-sass

Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there's only one request.

Organize SCSS into Multiple Files with Partials

We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
Extends:
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.

Mixins:
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.

In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.


Reuse Styles with the SCSS @extend Directive

Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.

Write similar classes with the SCSS @for Control Directive

The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive! In this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.

Loop Over Data with the SCSS @each Control Directive

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

Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.


Write Custom Functions with the SCSS @function Directive

We can use javascript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code. Be sure to checkout all the SCSS functions: http://sass-lang.com/documentation/Sass/Script/Functions.html

Use Standard Built-in SCSS Functions for Common Operations:

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.

Search

Search Results