Academy PRO: D3, part 3
•Download as PPTX, PDF•
0 likes•603 views
This document discusses using HTML5 Canvas with D3.js for data visualization. It provides an overview of Canvas, noting that it is lower level but more performant than SVG for drawing many objects on a small surface like data visualizations. It then lists 3 ways D3.js can be used with Canvas, including using D3.js for data transformation and repainting Canvas on data changes or animations. The document provides examples of drawing, data binding, axes, transitions, interactivity, and drag and drop on Canvas using D3.js and links to additional Canvas tutorials.
Report
Share
Report
Share
Recommended
Intro to Three.js
Three.js is a popular JavaScript library that makes it easier to use WebGL by abstracting away its complexity. It represents 3D objects, cameras, lights and materials as JavaScript objects that can be easily manipulated to build 3D scenes. Basic components of a Three.js scene include a camera, lights, 3D meshes to represent objects, and materials applied to meshes. Common tasks like creating a renderer, camera, scene, adding objects and lights, and implementing an animation loop are demonstrated.
WebGL - 3D programming
WebGL is a JavaScript API for rendering 3D graphics in web browsers without plugins. It is supported in modern desktop and mobile browsers depending on the graphics card. Three.js is a popular open-source WebGL framework that handles 3D scene graph management and rendering. It allows creating 3D scenes with meshes made from geometries and materials, adding cameras, and rendering with common patterns like box geometries, basic materials, and perspective cameras. Examples include simple cubes and panoramic views.
Using babylon js to create apps & games for all web gl devices
We have built in France a WebGL 3d realtime engine named BabylonJS. It has been made to support all WebGL compatible platforms such as Chrome, Firefox, Opera, IE11 on the desktop as well as on Firefox OS, Android & Windows 8.1 devices. We will see 2 main points in this session. First, we’ll share some of the things we’ve learned while building it: how to track and reduce the garbage collector, how to pay attention to the performance and how to handle touch on all devices. Then, we’ll see how to use these frameworks to build your own 3d applications & games for the web! Be ready to read some code.
Processing.js vs. three.js
Processing.js and Three.js are popular JavaScript game engines that reduce the time needed to build complex interactive 2D or 3D content for the HTML5 canvas element. Processing.js is best suited for 2D applications like data visualizations and digital art, while Three.js is optimized for 3D graphics and rendering compelling 3D scenes in web applications using JavaScript.
D3 js
This document outlines an agenda and introduction to data visualization concepts and implementation using D3. It discusses why visualization is useful, challenges with versatile data and visualization, and how D3 is different by allowing the user to choose the visualization rather than prescribing a particular visualization. It then demonstrates basic D3 concepts like binding data to DOM elements and using scales to map data values to visual properties before discussing built-in visualization types, layouts, and providing resources for additional examples.
Tools & Resources for Data Visualisation
This document provides an overview of different tools and techniques for data visualization. It categorizes visualization tools as canvas (design every element), charting (collection of fixed charts), grammar (graphical primitives for composing graphics), and visual (flexible analysis languages). Examples of tools in each category are given along with short descriptions. Foundational works, processes, storytelling techniques, blogs, courses, and resources for data visualization are also listed.
Academy PRO: D3, part 1
Data visualization is the presentation of data in a graphical format. Visuals are processed faster by the brain and help reveal patterns, trends, and correlations in the data. D3 is a popular JavaScript library for visualizing data using web standards like SVG, Canvas, and HTML. It allows powerful data-driven transformations of documents by binding data to elements. Scales map abstract data dimensions to visual representations.
Visualising Multi Dimensional Data
Even though exploring data visually is an integral part of the data analytic pipeline, we struggle to visually explore data once the number of dimensions go beyond three. This talk will focus on showcasing techniques to visually explore multi dimensional data p 3. The aim would be show examples of each of following techniques, potentially using one exemplar dataset. This talk was given at the Strata + Hadoop World Conference @ Singapore 2015 and at Fifth Elephant conference @ Bangalore, 2015
Recommended
Intro to Three.js
Three.js is a popular JavaScript library that makes it easier to use WebGL by abstracting away its complexity. It represents 3D objects, cameras, lights and materials as JavaScript objects that can be easily manipulated to build 3D scenes. Basic components of a Three.js scene include a camera, lights, 3D meshes to represent objects, and materials applied to meshes. Common tasks like creating a renderer, camera, scene, adding objects and lights, and implementing an animation loop are demonstrated.
WebGL - 3D programming
WebGL is a JavaScript API for rendering 3D graphics in web browsers without plugins. It is supported in modern desktop and mobile browsers depending on the graphics card. Three.js is a popular open-source WebGL framework that handles 3D scene graph management and rendering. It allows creating 3D scenes with meshes made from geometries and materials, adding cameras, and rendering with common patterns like box geometries, basic materials, and perspective cameras. Examples include simple cubes and panoramic views.
Using babylon js to create apps & games for all web gl devices
We have built in France a WebGL 3d realtime engine named BabylonJS. It has been made to support all WebGL compatible platforms such as Chrome, Firefox, Opera, IE11 on the desktop as well as on Firefox OS, Android & Windows 8.1 devices. We will see 2 main points in this session. First, we’ll share some of the things we’ve learned while building it: how to track and reduce the garbage collector, how to pay attention to the performance and how to handle touch on all devices. Then, we’ll see how to use these frameworks to build your own 3d applications & games for the web! Be ready to read some code.
Processing.js vs. three.js
Processing.js and Three.js are popular JavaScript game engines that reduce the time needed to build complex interactive 2D or 3D content for the HTML5 canvas element. Processing.js is best suited for 2D applications like data visualizations and digital art, while Three.js is optimized for 3D graphics and rendering compelling 3D scenes in web applications using JavaScript.
D3 js
This document outlines an agenda and introduction to data visualization concepts and implementation using D3. It discusses why visualization is useful, challenges with versatile data and visualization, and how D3 is different by allowing the user to choose the visualization rather than prescribing a particular visualization. It then demonstrates basic D3 concepts like binding data to DOM elements and using scales to map data values to visual properties before discussing built-in visualization types, layouts, and providing resources for additional examples.
Tools & Resources for Data Visualisation
This document provides an overview of different tools and techniques for data visualization. It categorizes visualization tools as canvas (design every element), charting (collection of fixed charts), grammar (graphical primitives for composing graphics), and visual (flexible analysis languages). Examples of tools in each category are given along with short descriptions. Foundational works, processes, storytelling techniques, blogs, courses, and resources for data visualization are also listed.
Academy PRO: D3, part 1
Data visualization is the presentation of data in a graphical format. Visuals are processed faster by the brain and help reveal patterns, trends, and correlations in the data. D3 is a popular JavaScript library for visualizing data using web standards like SVG, Canvas, and HTML. It allows powerful data-driven transformations of documents by binding data to elements. Scales map abstract data dimensions to visual representations.
Visualising Multi Dimensional Data
Even though exploring data visually is an integral part of the data analytic pipeline, we struggle to visually explore data once the number of dimensions go beyond three. This talk will focus on showcasing techniques to visually explore multi dimensional data p 3. The aim would be show examples of each of following techniques, potentially using one exemplar dataset. This talk was given at the Strata + Hadoop World Conference @ Singapore 2015 and at Fifth Elephant conference @ Bangalore, 2015
Intro to D3: Data-Driven Documents
Where do data visualizations come from? Flatiron students Emily Simonton and Mandy Yeung talk D3—a Javascript Library for manipulating documents based on data.
Oracle database on Docker Container
This document discusses running Oracle Database in Docker containers. It provides an overview of Docker and containers, and then describes how to run Oracle Database within a Docker container. Specifically, it outlines downloading prebuilt images from Docker Store or Oracle Store, or building a custom image using Dockerfiles in Oracle's GitHub repository. It also provides examples for running Docker commands to launch an Oracle Database container using these images.
Tecnologias Oracle em Docker Containers On-premise e na Nuvem
This document outlines Bruno Borges' presentation on technologies from Oracle in Docker containers. The presentation agenda includes discussing Docker overview, Oracle's strategy and positioning with Docker, Docker on Oracle Cloud, and Oracle technology running in Docker containers. The document provides information on Docker concepts, how Docker works, building Docker images and running Docker containers, and the Docker ecosystem. It also discusses Oracle's support for Docker and options for deploying containers on Oracle Cloud, including using Compute Cloud Service for a DIY approach or using Oracle-managed Container Cloud Service or Application Container Cloud Service.
Academy PRO: Docker. Part 1
This document provides an agenda for a Docker Academy PRO course. It introduces containers and containerization basics. It discusses how Docker works and the evolution of IT that led to its development. It compares containers to virtual machines and the advantages of containers. Key Docker concepts are explained like images, the Docker daemon, and official Docker images. The document concludes by asking if there are any questions.
Oracle Advanced SQL and Analytic Functions
Even though DBAs and developers are writing SQL queries every day, it seems that advanced SQL techniques such as multidimension aggregation and analytic functions still remain relatively unknown. In this session, we will explore some of the common real-world usages for analytic function and understand how to take advantage of this great and useful tool. We will deep dive into ranking based on values and groups, understand aggregation of multiple dimensions without a group by, see how to do inter-row calculations, and much more.
This is the presentation slides which was presented in Kscope 17 on June 28, 2017.
Docker in the Oracle Universe / WebLogic 12c / OFM 12c
This document discusses Docker and provides an overview presented by Frank Munz. Some key points:
- Docker is an open-source container technology that provides portable application isolation using Linux kernel features like namespaces and cgroups.
- Docker images contain layered filesystems for applications and dependencies. Containers run the images and provide isolated, lightweight runtimes.
- Docker solves issues around environment consistency by packaging applications and dependencies together. Images can be pulled from public registries or built locally.
- Security with Docker involves using trusted images, dropping privileges, and combining with tools like SELinux. Public clouds provide additional isolation over plain Docker containers.
- Oracle supports Docker for several of its products like Web
Academy PRO: Docker. Part 2
The document provides an overview of containerization basics using Docker. It defines key Docker terminology like images, containers, daemon, client, and Docker Hub. It explains how to run a static website in a container, view running containers and images, build and push custom images to a private registry. It also covers container logging and setting up a private Docker registry using the registry image.
Academy PRO: Docker. Lecture 3
This document provides a summary of key concepts in Docker orchestration and networking:
- It describes the default Docker networks (bridge, none, host) and how to create custom networks for containers to communicate.
- Docker Compose is introduced as a tool to define and run multi-container applications using a compose file to configure services.
- Docker Swarm mode allows deploying containers across multiple Docker hosts as a cluster, with services that can be scaled out and updated on the swarm. Managers and workers are node types in a swarm.
- Key features for swarm deployments using Docker Compose files are discussed, including resources, update configurations, and restart policies.
Making DevOps Secure with Docker on Solaris (Oracle Open World, with Jesse Bu...
Docker, the container Engine and Platform, is coming to Oracle Solaris! This is the talk that Jérôme Petazzoni (Docker) and Jesse Butler (Oracle) gave at Oracle Open World in November 2015.
Academy PRO: Docker. Part 4
The document discusses Docker and container orchestration tools. It begins with an agenda on multi-machine Docker swarms and alternatives like Kubernetes and Mesos. It then covers setting up a multi-node Docker swarm across two virtual machines, deploying an application to the swarm, and accessing the clustered application. Moby Project is introduced as the new name for Docker's open source components to distinguish them from commercial Docker products. Tools like Kitematic, Docker's Universal Control Plane, and Panamax are also briefly mentioned.
Docker 101: Introduction to Docker
This document provides an introduction to Docker. It discusses why Docker is useful for isolation, being lightweight, simplicity, workflow, and community. It describes the Docker engine, daemon, and CLI. It explains how Docker Hub provides image storage and automated builds. It outlines the Docker installation process and common workflows like finding images, pulling, running, stopping, and removing containers and images. It promotes Docker for building local images and using host volumes.
Docker introduction
Docker is a system for running applications in isolated containers. It addresses issues with traditional virtual machines by providing lightweight containers that share resources and allow applications to run consistently across different environments. Docker eliminates inconsistencies in development, testing and production environments. It allows applications and their dependencies to be packaged into a standardized unit called a container that can run on any Linux server. This makes applications highly portable and improves efficiency across the entire development lifecycle.
Alphorm.com Formation Docker (2/2) - Administration Avancée
Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-docker-2-2-administration-avancee
Aller plus loin dans le DevOps avec Docker CE. Et lancer vous le Dev et la production avec cette formation.
La révolution des environnements «virtuels » a commencé. Ludovic Quenec’hdu vous propose de participer à cette révolution.
Orchestrer des Micro-services, Manager plusieurs hôtes docker engine, déployer des services, Administrer un Cluster, déployer des stack. Voilà ce que vous allez découvrir durant cette formation
Nous verrons ensemble Docker-machine, docker-compose, docker swarm
Nous découvrirons les outils complémentaires et essentiels de l’écosystème Docker pour déployer et manager des architectures micro services Docker.
Mini-Training: JS Graphical Libraries
Overview of recent JS Graphical Libraries, based on HTML5 Canvas or SVG, such as KineticJs and Three.JS
Academy PRO: HTML5 API graphics
Lecture for Binary Studio Academy PRO course about HTML5 API by Bohdan Rusinka (JS developer at Binary Studio)
binary-studio.com
More native look and feel of mobile JS applications with HTML5 canvas
This document discusses the advantages of using the HTML5 canvas over DOM elements for rendering UI components. It notes that canvas allows rendering many objects with a single interface more easily than DOM, similar to event delegation. Typical use cases for canvas include components with transformed objects and DOM decoration with animations. However, canvas is not always preferable, such as for layouts with advanced content. Frameworks may be needed for sprite handling and other canvas tasks, and resizing assets for different screens can be an issue.
Qt and QML performance tips & tricks for Qt 4.7
The document provides performance tips for Qt/QML applications. It recommends:
1. Using C++ rather than JavaScript for business logic and long-running operations to avoid blocking the UI.
2. Loading content dynamically with Loaders and partitioning the UI into logical components to improve startup speed.
3. Caching images at their native size and resolution, loading images asynchronously, and avoiding unnecessary resizing or compositing of images to reduce memory usage and improve performance of visual elements.
4. Optimizing data models and use of cache buffers to improve the performance of scrolling in lists and grids.
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...eLuminous Technologies Pvt. Ltd.
The document discusses using the html2canvas library to capture screenshots of web pages and elements on the client side. It provides code samples for capturing a screenshot of a div element, saving it as an image file on the server, and displaying the image. The library builds a representation of the DOM, including images and CSS, and converts it to a canvas element without using screenshots. It has advantages of client-side rendering and on-demand screenshots but limitations around frames, CSS3 support, and cross-origin canvas elements.Réaliser un jeu cross plateformes avec WebGL et babylon.js
Contenu de la présentation effectuée à FranceJS le 23/11/2013 . Version étendue de la présentation effectué à ParisJS le 20/11/2013 :)
D3 Basic Tutorial
This document provides an introduction and overview of D3 (D3.js), an open-source JavaScript library for visualizing data using web standards like SVG, HTML and CSS. It discusses how to install D3, introduces common chart types like trees, networks and maps, and provides a 4-step tutorial for creating a basic bar chart from TSV data to get started with visualizing data in D3. The document recommends additional learning resources for diving deeper into D3.
Html5
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
Html5 canvas & svg 2012 dcc
This document compares Canvas and SVG for graphics on the web, providing examples of each. Canvas is best for raster graphics like games while SVG is best for vector graphics, charts, and resolution-independent interfaces. Both have advantages and disadvantages regarding performance, animation, and accessibility. The future may bring more graphic possibilities using HTML5 features like geolocation and improved cross-platform support for high quality images and content on mobile websites.
More Related Content
Viewers also liked
Intro to D3: Data-Driven Documents
Where do data visualizations come from? Flatiron students Emily Simonton and Mandy Yeung talk D3—a Javascript Library for manipulating documents based on data.
Oracle database on Docker Container
This document discusses running Oracle Database in Docker containers. It provides an overview of Docker and containers, and then describes how to run Oracle Database within a Docker container. Specifically, it outlines downloading prebuilt images from Docker Store or Oracle Store, or building a custom image using Dockerfiles in Oracle's GitHub repository. It also provides examples for running Docker commands to launch an Oracle Database container using these images.
Tecnologias Oracle em Docker Containers On-premise e na Nuvem
This document outlines Bruno Borges' presentation on technologies from Oracle in Docker containers. The presentation agenda includes discussing Docker overview, Oracle's strategy and positioning with Docker, Docker on Oracle Cloud, and Oracle technology running in Docker containers. The document provides information on Docker concepts, how Docker works, building Docker images and running Docker containers, and the Docker ecosystem. It also discusses Oracle's support for Docker and options for deploying containers on Oracle Cloud, including using Compute Cloud Service for a DIY approach or using Oracle-managed Container Cloud Service or Application Container Cloud Service.
Academy PRO: Docker. Part 1
This document provides an agenda for a Docker Academy PRO course. It introduces containers and containerization basics. It discusses how Docker works and the evolution of IT that led to its development. It compares containers to virtual machines and the advantages of containers. Key Docker concepts are explained like images, the Docker daemon, and official Docker images. The document concludes by asking if there are any questions.
Oracle Advanced SQL and Analytic Functions
Even though DBAs and developers are writing SQL queries every day, it seems that advanced SQL techniques such as multidimension aggregation and analytic functions still remain relatively unknown. In this session, we will explore some of the common real-world usages for analytic function and understand how to take advantage of this great and useful tool. We will deep dive into ranking based on values and groups, understand aggregation of multiple dimensions without a group by, see how to do inter-row calculations, and much more.
This is the presentation slides which was presented in Kscope 17 on June 28, 2017.
Docker in the Oracle Universe / WebLogic 12c / OFM 12c
This document discusses Docker and provides an overview presented by Frank Munz. Some key points:
- Docker is an open-source container technology that provides portable application isolation using Linux kernel features like namespaces and cgroups.
- Docker images contain layered filesystems for applications and dependencies. Containers run the images and provide isolated, lightweight runtimes.
- Docker solves issues around environment consistency by packaging applications and dependencies together. Images can be pulled from public registries or built locally.
- Security with Docker involves using trusted images, dropping privileges, and combining with tools like SELinux. Public clouds provide additional isolation over plain Docker containers.
- Oracle supports Docker for several of its products like Web
Academy PRO: Docker. Part 2
The document provides an overview of containerization basics using Docker. It defines key Docker terminology like images, containers, daemon, client, and Docker Hub. It explains how to run a static website in a container, view running containers and images, build and push custom images to a private registry. It also covers container logging and setting up a private Docker registry using the registry image.
Academy PRO: Docker. Lecture 3
This document provides a summary of key concepts in Docker orchestration and networking:
- It describes the default Docker networks (bridge, none, host) and how to create custom networks for containers to communicate.
- Docker Compose is introduced as a tool to define and run multi-container applications using a compose file to configure services.
- Docker Swarm mode allows deploying containers across multiple Docker hosts as a cluster, with services that can be scaled out and updated on the swarm. Managers and workers are node types in a swarm.
- Key features for swarm deployments using Docker Compose files are discussed, including resources, update configurations, and restart policies.
Making DevOps Secure with Docker on Solaris (Oracle Open World, with Jesse Bu...
Docker, the container Engine and Platform, is coming to Oracle Solaris! This is the talk that Jérôme Petazzoni (Docker) and Jesse Butler (Oracle) gave at Oracle Open World in November 2015.
Academy PRO: Docker. Part 4
The document discusses Docker and container orchestration tools. It begins with an agenda on multi-machine Docker swarms and alternatives like Kubernetes and Mesos. It then covers setting up a multi-node Docker swarm across two virtual machines, deploying an application to the swarm, and accessing the clustered application. Moby Project is introduced as the new name for Docker's open source components to distinguish them from commercial Docker products. Tools like Kitematic, Docker's Universal Control Plane, and Panamax are also briefly mentioned.
Docker 101: Introduction to Docker
This document provides an introduction to Docker. It discusses why Docker is useful for isolation, being lightweight, simplicity, workflow, and community. It describes the Docker engine, daemon, and CLI. It explains how Docker Hub provides image storage and automated builds. It outlines the Docker installation process and common workflows like finding images, pulling, running, stopping, and removing containers and images. It promotes Docker for building local images and using host volumes.
Docker introduction
Docker is a system for running applications in isolated containers. It addresses issues with traditional virtual machines by providing lightweight containers that share resources and allow applications to run consistently across different environments. Docker eliminates inconsistencies in development, testing and production environments. It allows applications and their dependencies to be packaged into a standardized unit called a container that can run on any Linux server. This makes applications highly portable and improves efficiency across the entire development lifecycle.
Alphorm.com Formation Docker (2/2) - Administration Avancée
Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-docker-2-2-administration-avancee
Aller plus loin dans le DevOps avec Docker CE. Et lancer vous le Dev et la production avec cette formation.
La révolution des environnements «virtuels » a commencé. Ludovic Quenec’hdu vous propose de participer à cette révolution.
Orchestrer des Micro-services, Manager plusieurs hôtes docker engine, déployer des services, Administrer un Cluster, déployer des stack. Voilà ce que vous allez découvrir durant cette formation
Nous verrons ensemble Docker-machine, docker-compose, docker swarm
Nous découvrirons les outils complémentaires et essentiels de l’écosystème Docker pour déployer et manager des architectures micro services Docker.
Viewers also liked (13)
Tecnologias Oracle em Docker Containers On-premise e na Nuvem
Tecnologias Oracle em Docker Containers On-premise e na Nuvem
Docker in the Oracle Universe / WebLogic 12c / OFM 12c
Docker in the Oracle Universe / WebLogic 12c / OFM 12c
Making DevOps Secure with Docker on Solaris (Oracle Open World, with Jesse Bu...
Making DevOps Secure with Docker on Solaris (Oracle Open World, with Jesse Bu...
Alphorm.com Formation Docker (2/2) - Administration Avancée
Alphorm.com Formation Docker (2/2) - Administration Avancée
Similar to Academy PRO: D3, part 3
Mini-Training: JS Graphical Libraries
Overview of recent JS Graphical Libraries, based on HTML5 Canvas or SVG, such as KineticJs and Three.JS
Academy PRO: HTML5 API graphics
Lecture for Binary Studio Academy PRO course about HTML5 API by Bohdan Rusinka (JS developer at Binary Studio)
binary-studio.com
More native look and feel of mobile JS applications with HTML5 canvas
This document discusses the advantages of using the HTML5 canvas over DOM elements for rendering UI components. It notes that canvas allows rendering many objects with a single interface more easily than DOM, similar to event delegation. Typical use cases for canvas include components with transformed objects and DOM decoration with animations. However, canvas is not always preferable, such as for layouts with advanced content. Frameworks may be needed for sprite handling and other canvas tasks, and resizing assets for different screens can be an issue.
Qt and QML performance tips & tricks for Qt 4.7
The document provides performance tips for Qt/QML applications. It recommends:
1. Using C++ rather than JavaScript for business logic and long-running operations to avoid blocking the UI.
2. Loading content dynamically with Loaders and partitioning the UI into logical components to improve startup speed.
3. Caching images at their native size and resolution, loading images asynchronously, and avoiding unnecessary resizing or compositing of images to reduce memory usage and improve performance of visual elements.
4. Optimizing data models and use of cache buffers to improve the performance of scrolling in lists and grids.
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...eLuminous Technologies Pvt. Ltd.
The document discusses using the html2canvas library to capture screenshots of web pages and elements on the client side. It provides code samples for capturing a screenshot of a div element, saving it as an image file on the server, and displaying the image. The library builds a representation of the DOM, including images and CSS, and converts it to a canvas element without using screenshots. It has advantages of client-side rendering and on-demand screenshots but limitations around frames, CSS3 support, and cross-origin canvas elements.Réaliser un jeu cross plateformes avec WebGL et babylon.js
Contenu de la présentation effectuée à FranceJS le 23/11/2013 . Version étendue de la présentation effectué à ParisJS le 20/11/2013 :)
D3 Basic Tutorial
This document provides an introduction and overview of D3 (D3.js), an open-source JavaScript library for visualizing data using web standards like SVG, HTML and CSS. It discusses how to install D3, introduces common chart types like trees, networks and maps, and provides a 4-step tutorial for creating a basic bar chart from TSV data to get started with visualizing data in D3. The document recommends additional learning resources for diving deeper into D3.
Html5
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
Html5 canvas & svg 2012 dcc
This document compares Canvas and SVG for graphics on the web, providing examples of each. Canvas is best for raster graphics like games while SVG is best for vector graphics, charts, and resolution-independent interfaces. Both have advantages and disadvantages regarding performance, animation, and accessibility. The future may bring more graphic possibilities using HTML5 features like geolocation and improved cross-platform support for high quality images and content on mobile websites.
Image video processing and canvas element by Abhay Rao
Canvas Element allows fixed element control and enables analysis of Image/Video algorithms as a part of OpenCV will be studied and implemented in JAVA Script
Canvas in html5 - TungVD
This document discusses Canvas in HTML5. It introduces HTML5 and the Canvas element, which allows for 2D graphic rendering and is useful for games. The Canvas 2D API stores image data and allows getting, creating, and putting image data. Methods like lineTo, moveTo, fillRect, arc can draw and paint lines, shapes, and ovals. Games can use intervals to move objects by drawing new and deleting old objects. A demo is provided.
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
This presentation has been prepared by Oleksii Prohonnyi for LvivJS 2015 conference (http://lvivjs.org.ua/)
See the speech in Russian by the following link: https://youtu.be/oi7JhB8eWnA
Plunge into HTML5 Canvas – Let’s begin
The document introduces HTML5 Canvas, which provides a plug-in free 2D drawing surface for creating graphics in the browser. It describes how Canvas was originally developed by Apple and became part of the HTML5 specification in 2012. It explains how to get the Canvas context and use various drawing methods like fillRect(), moveTo(), lineTo(), arc(), and fillText() to draw shapes, paths, and text. It also discusses browser support for Canvas and how to check for compatibility.
Svcc 2013-css3-and-mobile
HTML5, CSS3, and performance factors, and how to develop mobile applications using PhoneGap3.0 for mobile devices, including Google Glass.
Building a Better Web with HTML5 and CSS3
HTML5 and CSS3 provide improvements to building the web. HTML5 introduces more semantic tags that improve accessibility and cleaner code. It also provides native support for video, audio, local storage and better interactions. CSS3 enhances presentation. HTML5 is supported across modern browsers and on mobile, allowing responsive design. New features like canvas and WebGL enable graphic effects. Geolocation allows accessing a user's location with permission. HTML5 aims to make the web platform more powerful and flexible.
Practical html5
The document discusses various HTML5 features for building modern web applications, including polyfills, semantic elements, data binding, WebSockets, drag and drop, graphics, and local storage. It provides overviews of the features and considerations for support in older browsers. Libraries are recommended to make APIs easier to use, such as Knockout for data binding, jQuery UI and SignalR for drag and drop and WebSockets, and Lawnchair and db.js for local storage. While not all HTML5 features are equally useful, with polyfills many can be supported in older browsers.
Html5 Canvas and Mobile Graphics
Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.
Point cloud mesh-investigation_report-lihang
This document discusses surface reconstruction methods for point clouds captured using Kinect. It describes meshing methods used in RTABMAP and RGBDMapping including greedy projection triangulation and moving least squares smoothing. Popular surface reconstruction pipelines generally involve subsampling, normal estimation, surface reconstruction using methods like Poisson surface reconstruction, and recovering original colors. Key steps are filtering noise, estimating surface normals, reconstructing implicit surfaces, and transferring attributes back to original points.
Html5 canvas
The HTML5 Canvas element allows scripts to access a bitmap rendered surface for drawing graphics via JavaScript. It provides a simple syntax using <canvas> tags with width and height attributes. Canvas drawing is rendered as a bitmap and is resource dependent, but offers advantages like being native to browsers without requiring plugins. While purely scripted, it is a W3C standard and examples demonstrate its capabilities for animations and interactive experiences.
Presentation about html5 css3
This presentation about HTML5 and CSS3 presents with example and described valid points with simple example code and live preview.
Similar to Academy PRO: D3, part 3 (20)
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvas
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Image video processing and canvas element by Abhay Rao
Image video processing and canvas element by Abhay Rao
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
More from Binary Studio
Academy PRO: Cryptography 3
The document discusses various cryptographic concepts such as MACs, hashes, key derivation functions, and authenticated encryption. It describes techniques for constructing secure MACs like ECBC-MAC and PMAC, and explains attacks like length-extension attacks and collision attacks. The document also covers standards for authenticated encryption like GCM, CCM, and EAX that combine encryption and message authentication codes.
Academy PRO: Cryptography 1
Cryptography is used in many applications including data encryption, digital communications, digital signatures, and content protection. It relies on principles of number theory and concepts like primes and one-way functions. The one-time pad provides perfect secrecy but requires a truly random key of the same length as the message. Stream ciphers expand a small key into a pseudorandom stream using a pseudorandom generator, allowing encryption and decryption at high speeds though perfect secrecy is not achieved. Semantic security provides protection against chosen plaintext attacks by ensuring an adversary cannot determine which of two messages was encrypted.
Academy PRO: Advanced React Ecosystem. MobX
MobX is a library that uses functional reactive programming to simplify state management in applications. It uses decorators like @observable, @computed, and @action to transparently observe state changes and automatically update dependent views. MobX ensures state and views remain consistent by deriving all values and automatically running reactions when the source data changes. MobX also includes tools for debugging observable state and integrating with React applications.
Binary Studio Academy 2017: JS team project - Orderly
Database and organizing solution made by students of Binary Studio Academy 2017.
This is our take on a database platform which seeks to organize information and improve productivity, all wrapped up in a sleek and high-performance package.
ReactJS, Redux, MongoDB, NodeJS, Socket.io, JSON, Web Token, SCSS, Semantic
Binary Studio Academy 2017: .NET team project - Unicorn
A web app for matching up professionals and customers to sell and trade services - the best parts of Craiglist and Uber sharing economy features, combined!
.NET 4.7, ASP.NET Web API, MS SQL Server, Entity Framework, IIS, SignalR, TypeScript, Angular 4.0, SASS.
Academy PRO: React native - miscellaneous
This document discusses various topics in React Native including animations, notifications, storage, and push notifications. It provides code examples for using pan responders and gestures to handle touches, creating websockets using Socket.io or native code, different types of animations like timing and spring, and accessing async storage on Android and iOS. It also covers using AppState to detect app state changes and sending local and scheduled push notifications.
Academy PRO: React native - publish
This document provides an overview of React Native including building initial scenes, navigation, animations, performance optimization, building APKs, and publishing to app stores. It discusses key aspects like the main UI thread frame rate, tools for profiling performance, avoiding performance killers like console logs, and using the Animated API. It also covers building a release key, generating a signed APK, and integrating third-party libraries like Expo and CodePush.
Academy PRO: React native - navigation
This document provides an overview of navigation options and best practices for React Native applications. It discusses the Navigator API, common navigation libraries like React Navigation and React Native Router Flux, and how to structure navigation within a React/Redux project using components, actions, and reducers. It also covers animations, drawer navigation, and common caveats to consider with lists and preserving internal state.
Academy PRO: React native - building first scenes
This document provides an overview of building initial scenes in React Native, including setting up components, styles, state, props, file structure, and networking. It discusses common React Native components like View, Text, Image, ScrollView, ListView, and interaction components. It also covers more advanced topics such as maps, dates pickers, geolocation, cameras, and working with native iOS and Android modules.
Academy PRO: React Native - introduction
The document provides an overview of React Native, including its history and timeline, components, styles, performance, debugging tools, and how to set up a React Native application. Some key points covered include:
- React Native allows building native mobile apps using JavaScript and React by rendering UI components to native platform views.
- It uses the same fundamental UI building blocks as regular iOS and Android apps like Views, Text, Image, ScrollView etc. but they are implemented using JavaScript and React.
- Styles are defined using JavaScript objects with the StyleSheet.create method, allowing flexible styling similar to CSS but optimized for mobile.
- Under the hood, React Native combines the fundamental native platform APIs with
Academy PRO: Push notifications. Denis Beketsky
Push notifications allow web applications to send messages to users even when the app is not active. The document discusses the service worker API which is required to implement push notifications and receive messages asynchronously. It also covers how to use Firebase Cloud Messaging to send push notifications from a server to specific devices, topics, or multiple targets at once.
Academy PRO: Docker. Lecture 4
The document discusses Docker and container orchestration tools. It begins with an agenda on multi-machine Docker swarms and alternatives like Kubernetes and Mesos. It then provides step-by-step instructions for setting up a multi-node Docker swarm cluster on VirtualBox machines and deploying an application. The document also discusses the Moby Project for separating Docker's open source and commercial components, as well as other Docker tools for developers.
Academy PRO: Docker. Lecture 2
This document provides an overview of containerization basics using Docker. It defines key Docker terminology like images, containers, daemons, clients, and Docker Hub. It explains how to run a static website in a container, view running containers and container logs. It also summarizes common Dockerfile commands and how to build, push and pull images from a private registry.
Academy PRO: Docker. Lecture 1
This document provides an agenda for a Docker Academy PRO course. It introduces Docker and containerization basics, including what containers are, how they work, and the challenges they solve compared to traditional virtual machines. It discusses Docker specifically, how it helps build and deploy applications, and how the Docker ecosystem works with components like Containerd and runC. Overall it serves as an introduction and overview to Docker and containerization concepts.
Academy PRO: Node.js - miscellaneous. Lecture 5
Lecture for Binary Studio Academy PRO course about Node.js by Nikita Semenistiy (TechLead & JS developer at Binary Studio)
Academy PRO: Node.js in production. lecture 4
Lecture for Binary Studio Academy PRO course about Node.js by Nikita Semenistiy (TechLead & JS developer at Binary Studio)
Academy PRO: Node.js alternative stacks. Lecture 3
Lecture for Binary Studio Academy PRO course about Node.js by Nikita Semenistiy (TechLead & JS developer at Binary Studio)
Academy PRO: Node.js default stack. Lecture 2
This document provides an overview of the Node.js PRO Academy lectures, including the default backend stack with Express, routing, middleware, request and response objects, template engines like Pug, error handling, Mongoose for MongoDB ORM, Socket.io for websockets, debugging tools, and a sample app for demonstration.
Academy PRO: Node.js platform. Lecture 1
Lecture for Binary Studio Academy PRO course about Node.js by Nikita Semenistiy (TechLead & JS developer at Binary Studio)
SubmitJS: Developing desktop applications with Electron. Mykyta Semenistyi
See full record of the tals from our javascript meetup here: https://www.youtube.com/watch?v=QcSYGj4dZHo&index=4&list=PLXsWM8PhzhwRoD91MzCWn-INKkgoJBXxV
More from Binary Studio (20)
Binary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: JS team project - Orderly
Binary Studio Academy 2017: .NET team project - Unicorn
Binary Studio Academy 2017: .NET team project - Unicorn
Academy PRO: Node.js alternative stacks. Lecture 3
Academy PRO: Node.js alternative stacks. Lecture 3
SubmitJS: Developing desktop applications with Electron. Mykyta Semenistyi
SubmitJS: Developing desktop applications with Electron. Mykyta Semenistyi
Recently uploaded
20240605 QFM017 Machine Intelligence Reading List May 2024
Everything I found interesting about machines behaving intelligently during May 2024
Pushing the limits of ePRTC: 100ns holdover for 100 days
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Video Streaming: Then, Now, and in the Future
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Discover the seamless integration of RPA (Robotic Process Automation), COMPOSER, and APM with AWS IDP enhanced with Slack notifications. Explore how these technologies converge to streamline workflows, optimize performance, and ensure secure access, all while leveraging the power of AWS IDP and real-time communication via Slack notifications.
Presentation of the OECD Artificial Intelligence Review of Germany
Consult the full report at https://www.oecd.org/digital/oecd-artificial-intelligence-review-of-germany-609808d6-en.htm
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Mind map of terminologies used in context of Generative AI
Mind map of common terms used in context of Generative AI.
Climate Impact of Software Testing at Nordic Testing Days
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Microsoft - Power Platform_G.Aspiotis.pdf
Revolutionizing Application Development
with AI-powered low-code, presentation by George Aspiotis, Sr. Partner Development Manager, Microsoft
20240609 QFM020 Irresponsible AI Reading List May 2024
Everything I found interesting about the irresponsible use of machine intelligence in May 2024
Removing Uninteresting Bytes in Software Fuzzing
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
TrustArc Webinar - 2024 Global Privacy Survey
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Join us to introduce Milvus Lite, a vector database that can run on notebooks and laptops, share the same API with Milvus, and integrate with every popular GenAI framework. This webinar is perfect for developers seeking easy-to-use, well-integrated vector databases for their GenAI apps.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Recently uploaded (20)
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Academy PRO: D3, part 3
- 2. What if you have a lot of data? https://bl.ocks.org/tafsiri/b83f60f23bf4ce130ca2
- 4. Canvas HTML5 Canvas is a 2D immediate mode rendering API that is much more low level, but more performant than SVG. Canvas great at drawing a significant number of objects on a relatively small surface, e.g., non-interactive real time data visualizations like graphical representations of weather patterns.
- 5. Canvas The canvas element is the actual DOM node that’s embedded in the HTML page. The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.
- 6. Ways to use D3.js with canvas 1. You could use D3.js entirely for its functional purpose – to transform data that you can then position onto your canvas as you see fit. 2. You could also use D3.js with some dummy HTML nodes to capture lifecycle selections and then repainting the canvas when the data changes. 3. You could use D3.js with some dummy HTML nodes to capture lifecycle selections AND their animations, repainting the canvas on a draw loop.
- 13. Drag & drop https://codepen.io/sahanr/pen/vewdWb - positions https://codepen.io/sahanr/pen/WXbPZz - colors
- 14. Links HTML5 Canvas Tutorials http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ WORKING WITH D3.JS AND CANVAS: WHEN AND HOW https://bocoup.com/blog/d3js-and-canvas D3 and Canvas. The bind, the draw and the interactivity http://www.datamake.io/blog/d3-canvas-full#draw-args NEEDLES, HAYSTACKS, AND THE CANVAS API https://bocoup.com/blog/2d-picking-in-canvas
Editor's Notes
- custom element