The document discusses the process of creating charts with Raphael.js and SVG. It begins by asking why the author chose to create new charts rather than use existing ones, and why SVG and Raphael.js were selected. It then addresses challenges as this was the author's first time developing charts. Considerations around existing charting libraries and design/development processes are also mentioned.
Report
Share
Report
Share
1 of 72
Download to read offline
More Related Content
Similar to 제2회 hello world 오픈세미나 hello world-raphael차트
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽웹데브모바일
Raphaël is an open source JavaScript library for working with vector graphics on the web. It allows developers to work with SVG and VML across browsers using a single API. Raphaël provides methods for drawing shapes, setting attributes, animating elements, and interacting with the document object model. It supports common browsers including Firefox, Opera, Chrome, Safari, and IE6+.
Raphael.js is a JavaScript library for creating vector-based graphics. It allows developers to work with SVG and VML across browsers similarly to how jQuery works with the DOM. Raphael.js provides an API for drawing shapes and setting attributes on a graphical canvas. It supports events, animation, and other features while having a small file size. Raphael.js works across browsers while native SVG, VML, and Canvas have varying browser support. It allows creating scalable and accessible graphics for the web more easily compared to using images.
Canvas Based Presentation Tool
LandScape is a canvas based presentation tool that uses Scalable Vector Graphics (SVG) and JavaScript. It allows dynamic control of presentations by zooming, panning, and rotating on a large canvas without slide boundaries. Features include importing multiple media formats, templates, and motion paths for transitions. The goal is to create attractive presentations that are not too dependent on features of the viewing program and require only nominal browser resources. It integrates JavaScript manipulation of SVG objects created using the Inkscape editor.
SVG For Web Designers (and Developers) Sara Soueidan
1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages.
2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images.
3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.
This document discusses two technologies for creating charts directly in the browser: Canvas and SVG. Canvas uses JavaScript to manipulate pixel data and is best for fast rendering like games, while SVG uses vector-based markup that lives in the DOM, making it easier to interact with and support older browsers with VML. The document recommends SVG for charts since it allows dynamic tooltips and broad browser support without needing polyfills.
This document discusses web vector graphics and compares Canvas and SVG technologies. It provides examples of code for creating shapes with Canvas and SVG. It also analyzes browser support for Canvas and SVG over time, finding that support for both has increased, though SVG support levels have surpassed Canvas. The document recommends libraries like DojoX, ExCanvas, and Raphael that can help support Canvas and SVG across different browsers.
Vskills certification for SVG Professional assesses the candidate as per the company’s need for scalable vector graphics development. The certification tests the candidates on various areas in Coordinates, Document Structure, Shapes, Paths, Coordinate System, Patterns, Gradients, Clipping, Masking, Animating and Scripting SVG.
This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include:
- SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML.
- SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics.
- As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript.
- The document outlines SVG's emergence and development timeline, its structure as an XML language, and its
SVG vs Canvas - Showdown of the PaintersPhil Reither
A look at what SVG is, the similarities and differences to the HTML5 canvas element. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.
Canvas Based Presentation tool - First ReviewArvind Krishnaa
This document outlines the development of a canvas-based presentation tool using Scalable Vector Graphics (SVG) and JavaScript. It discusses exploring design possibilities like using Inkscape extensions or Apache Batik, but selects jQuery SVG due to its native SVG access and extensibility. The architecture is presented using libraries like jQuery, jQuery UI, and plugins. Partial implementation details are provided around panning, dragging, text, and context menus, with future work mentioned.
Presentation on how to use Vaadin and Scala to build web applications on top of HTML5. Most of the presentation is live coding, so you might to want to check these examples:
http://vj.jole.fi/
https://github.com/jojule/Stocks
Inkscape is an open source vector graphics editor that is scalable, stable, intuitive and ready for mainstream use. Donna Benjamin will demonstrate Inkscape's art and practical applications including vector drawing techniques. Inkscape can be used to create web graphics, logos, posters, banners, diagrams, signs, logos, trade banners, websites, and databases. It also has built-in tutorials and help menus to learn more about using the software.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
The document discusses reusable web components and designing them. It provides an agenda that covers what should be designed, technology options like HTML5, Google Web Toolkit and Vaadin, and a Q&A session. It then lists various HTML5 elements like <article>, <audio>, <canvas> and describes them. Finally, it discusses capabilities enabled by HTML5 like drag-and-drop, geolocation, multimedia and more.
The document discusses various machine learning clustering algorithms like K-means clustering, DBSCAN, and EM clustering. It also discusses neural network architectures like LSTM, bi-LSTM, and convolutional neural networks. Finally, it presents results from evaluating different chatbot models on various metrics like validation score.
The document discusses challenges with using reinforcement learning for robotics. While simulations allow fast training of agents, there is often a "reality gap" when transferring learning to real robots. Other approaches like imitation learning and self-supervised learning can be safer alternatives that don't require trial-and-error. To better apply reinforcement learning, robots may need model-based approaches that learn forward models of the world, as well as techniques like active localization that allow robots to gather targeted information through interactive perception. Closing the reality gap will require finding ways to better match simulations to reality or allow robots to learn from real-world experiences.
[243] Deep Learning to help student’s Deep LearningNAVER D2
This document describes research on using deep learning to predict student performance in massive open online courses (MOOCs). It introduces GritNet, a model that takes raw student activity data as input and predicts outcomes like course graduation without feature engineering. GritNet outperforms baselines by more than 5% in predicting graduation. The document also describes how GritNet can be adapted in an unsupervised way to new courses using pseudo-labels, improving predictions in the first few weeks. Overall, GritNet is presented as the state-of-the-art for student prediction and can be transferred across courses without labels.
[234]Fast & Accurate Data Annotation Pipeline for AI applicationsNAVER D2
This document provides a summary of new datasets and papers related to computer vision tasks including object detection, image matting, person pose estimation, pedestrian detection, and person instance segmentation. A total of 8 papers and their associated datasets are listed with brief descriptions of the core contributions or techniques developed in each.
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지NAVER D2
This document presents a formula for calculating the loss function J(θ) in machine learning models. The formula averages the negative log likelihood of the predicted probabilities being correct over all samples S, and includes a regularization term λ that penalizes predicted embeddings being dissimilar from actual embeddings. It also defines the cosine similarity term used in the regularization.
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기NAVER D2
The document discusses running a TensorFlow Serving (TFS) container using Docker. It shows commands to:
1. Pull the TFS Docker image from a repository
2. Define a script to configure and run the TFS container, specifying the model path, name, and port mapping
3. Run the script to start the TFS container exposing port 13377
The document discusses linear algebra concepts including:
- Representing a system of linear equations as a matrix equation Ax = b where A is a coefficient matrix, x is a vector of unknowns, and b is a vector of constants.
- Solving for the vector x that satisfies the matrix equation using linear algebra techniques such as row reduction.
- Examples of matrix equations and their component vectors are shown.
This document describes the steps to convert a TensorFlow model to a TensorRT engine for inference. It includes steps to parse the model, optimize it, generate a runtime engine, serialize and deserialize the engine, as well as perform inference using the engine. It also provides code snippets for a PReLU plugin implementation in C++.
The document discusses machine reading comprehension (MRC) techniques for question answering (QA) systems, comparing search-based and natural language processing (NLP)-based approaches. It covers key milestones in the development of extractive QA models using NLP, from early sentence-level models to current state-of-the-art techniques like cross-attention, self-attention, and transfer learning. It notes the speed and scalability benefits of combining search and reading methods for QA.