Conquering JavaScript: D3.js

Cover
Half Title
Series Page
Title Page
Copyright Page
Dedication
Contents
About the Editor
Acknowledgments
Zeba Academy – Conquering JavaScript
CHAPTER 1: Introduction to D3.js
CRASH COURSE OF D3.js
SETTING UP A D3 ENVIRONMENT
ADVANTAGES OF D3.js
DISADVANTAGES OF D3.js
APPLICATIONS
CORE CONCEPT
UNDERSTANDING DATA VISUALIZATION
RAW DATA VISUALIZATION
DIFFERENT KINDS OF INTERACTIVE EXPERIENCES
WHAT IS D3.js?
SYNTAX
LOADING DATA IN D3
THE D3 SCALES
FEATURES OF D3.js
Built for the Internet
Constantly Improved
You Have Complete Control over Your Visualizations
WHY ARE WE USING D3.js?
WHEN SHOULD YOU UTILIZE D3.js?
D3 ECOSYSTEM: WHAT YOU NEED TO KNOW TO GET STARTED
HTML AND THE DOCUMENT OBJECT MODEL (DOM)
D3 GLOBAL OBJECT
SELECTION OF DOM
d3.select ()
Element Name Selection
Element Id Selection
d3.selectAll()
Selection All Elements by CSS Class Name
Nested Elements to Pick
D3 MANIPULATION OF THE DOM
Use d3.selection with text()
append()
Insert()
Remove()
html()
attr()
property()
style()
classed()
SVG – SCALABLE VECTOR GRAPHICS
Responsive SVG Container
SVG Coordinate System
Line
Rectangle
Ellipse and Circle
Path
Text
GROUPING ELEMENTS
CANVAS AND WebGL
CASCADING STYLE SHEETS
JavaScript
METHODS CHAINING
ARRAYS AND OBJECTS MANIPULATION
DATA STANDARDS
FRAMEWORKS FOR NODE AND JAVASCRIPT
LAYOUTS FOR DATA TRANSFORMATION
Stuff Stacking in Layers
D3.js-BASED DATA VISUALIZATION STANDARDS
D3-FORMATTED INFOVIZ STANDARDS
RECAP OF BASICS
TIPS AND TACTICS FOR ADVANCED D3.js
TRANSITION CHAINING
USING D3.js TO ADD WEB LINKS TO AN OBJECT
INCORPORATE HTML TABLES INTO YOUR GRAPH
WITH A CLICK, YOU MAY SHOW OR CONCEAL GRAPH PARTS
USING AN IF STATEMENT TO FILTER
USING d3.js WITH BOOTSTRAP
WHAT EXACTLY IS BOOTSTRAP?
COMPONENTS OF THE INTERFACE
LAYOUT GRID
IMPLEMENTING BOOTSTRAP IN YOUR HTML CODE
USING A WEB PAGE TO DISPLAY MULTIPLE GRAPHS
ARRANGE THE GRAPHS IN THE SAME ORDER AS THE ANCHORS
ARRANGE THE GRAPHS USING DIFFERENT ANCHORS
HOW DOES THE GRID LAYOUT IN BOOTSTRAP WORK?
CHAPTER 2: Application Development I
BUILDING APPS WITH Three.js
DESIGNING GAMES WITH Three.js
CODE TUTORIALS
Creating a Feeling of Motion
Within Bounded Constraints, Infinite Movement
CONFIGURE THE GAME PROJECT
Addition of Webpack Files
Typescript Environment Configuration
SETTING THE TONE FOR THE GAME
SETTING THE STAGE
IMAGINING THE SKY
FINAL SCENE PLANNING
INCLUDING GAMEPLAY LOGIC
Input through Keyboard
Input via Touchscreen
OBJECTS IN OUR SCENE THAT ARE MOVING
detectCollisions
addBackgroundBit
addChallengeRow
THE FINAL TOUCHES TO OUR RENDER LOOP
UI DESIGN FOR THE GAME
SUMMARY
NOTES
CHAPTER 3: Application Development II
BUILDING APPS WITH Three.js
INSTALLING AND DOWNLOADING
CODE TUTORIAL
INITIAL HTML CONFIGURATION
OUR 3D WORLD IS BEING BUILT
SETTING UP A DEVELOPMENT SERVER ON THE LOCAL MACHINE
For Windows Users
For Mac
DRAWING GEOMETRY AND RESIZING THE VIEWPORT
Resizing the Viewport Update
IMPORTING THE BUSINESS PLAN
THE STARTER PROJECT LAYOUT
SELECTING 3D MODELS
3D Models Loading
Important 3D Development Advice
SUMMARY
NOTES
CHAPTER 4: Application Development III
WHAT EXACTLY IS BitClout?
Prerequisites
SCRAPING DATA FROM BitClout HODLers
THE PYTHON SCRIPT
FLASK SERVER BACKEND DEVELOPMENT
The BitClout Network Is Imported into Memgraph
D3.js FOR FRONTEND DEVELOPMENT
GETTING YOUR DOCKER ENVIRONMENT UP AND RUNNING
STARTING UP YOUR APPLICATION
CONCLUSION
NOTE
CHAPTER 5: Code Optimization
WRITING OPTIMIZED AND EFFICIENT CODE
GET FAMILIAR WITH ASYNCHRONOUS PROGRAMMING
ANONYMOUS AND D3 FUNCTIONS
Keep Your Codes Short and Straightforward
Avoid Loops Wherever Possible
Reduce DOM Access
Object Caching Improves Efficiency
Avoid Taking Up Too Much Memory
Defer Needless JavaScript Loading
Remove Memory Leaks
HARDENING AND SECURITY
JavaScript’s PERILS
Debugging and Tampering
Client-Side Attacks and Data Exfiltration
STEPS FOR KEEPING JavaScript SAFE
Integrity Checks for JavaScript
Testing for NPM Vulnerabilities Regularly
Minor and Patch Version Updates Should Be Enabled
Establish Validations to Avoid Injections
Maintain Strict Mode at All Times
Clean Up Your Code
Uglify and Minify Your Code
GENERAL TIPS
At the Top, Declare and Initialize Your Variables
Create Specific Functions That Are Modular
Identify and Eliminate Duplicate Code
Frequently Comment Your Code
Overuse of Recursion Should Be Avoided
Use DOM Operations Efficiently
At All Costs, Stay Away from Global Variables
Shorthand Notation Should Be Used (Object Literals)
To Catch Silent Errors, Use Strict Mode
Set Default Options
To Mix Strings, Use Template Literals
Use Includes Solving Existence Testing
Conditionals with False Values Should Be Shortened
INHERITANCE AND METHOD SHARING
Use Array Techniques to Create Shorter Loops
SUMMARY
CHAPTER 6: Summary
CAREER PROSPECTS WITH D3.js
IS THERE A FUTURE FOR DATA VISUALIZATION?
UTILIZATION OF D3.js WITH OTHER FRAMEWORKS AND TOOLS
THE DOM AND D3
What Is the Process?
Data Joins
D3 Libraries
Plottable
Billboard
Vega
D3FC
Britecharts
THE DOM AND REACT
What Is the Process?
Dynamic Child Components
D3.js AND REACT
APPROACHES
D3.js WITHIN REACT
REACT FAUX DOM
LIFECYCLE METHODS WRAPPING
REACT HANDLES THE DOM, AND D3 HANDLES MATH
LIBRARIES FOR REACT-D3.Js
RECHARTS
NIVO
VX
BRITECHARTS REACT
CHOOSING A METHOD OR A LIBRARY
FINAL THOUGHTS ABOUT REACT AND D3.js
D3.js DATA VISUALIZATION WITH ANGULAR
ANGULAR AND D3 INSTALLATION
Making a Bar Graph
Making a Pie Graph
Making a Scatter Graph
DATA FROM EXTERNAL SOURCES IS BEING LOADED
CSV File Loading
Using a JSON API to Get Data
FULL STACK DEVELOPMENT – DATA EXTRACTION, D3 VISUALIZATION, AND DOKKU DEPLOYMENT
OBTAINING INFORMATION
What’s Going On?
Testing Time
VISUALIZING
BOWER
HTML
D3
Setup
MAIN CONFIGURATION
Configuration of Bubbles
SVG Configuration
Tooltips
CSS
DEPLOYING
Using D3 and d3fc to Create a Complex Financial Chart
Making a Simple Graph
Fill the Space
INTEGRATING A MOVING AVERAGE
Including a Volume Set
Inserting a Legend
Trading Hours and Axes That Aren’t Continuous
ANNOTATIONS
CROSSHAIRS
SUMMARY
NOTE
Bibliography
Index