Unit 1

Introduction to Data Visualization

Index
1. What is data visualization
2. Acquiring and Visualizing Data,
3. Simultaneous acquisition and visualization,
4. Applications of Data Visualization,
5. Keys factors of Data Visualization (Control of Presentation, Faster
and Better JavaScript processing, Rise of HTML5, Lowering the
implementation Bar)
6. Exploring the Visual Data Spectrum: charting Primitives (Data
Points, Line Charts, Bar Charts, Pie Charts, Area Charts),
7. Exploring advanced Visualizations (Candlestick Charts, Bubble
Charts, Surface Charts, Map Charts, Infographics).
8. Making use of HTML5 CANVAS, Integrating SVG
Data Visualization
• It is a process of acquiring, interpreting and associating data in order
to evidently communicate complex ideas, thereby simplifying the
identification and analysis of meaningful pattern.
• Visualization is the use of computer graphics to form visual images
which benefit in the understanding of complex, repeatedly enormous
representations of data.
Acquiring the Data
• There are four methods of acquiring data:
• collecting new data;
• converting/transforming legacy data;
• sharing/exchanging data; and
• purchasing data.
• This includes automated collection (e.g., of sensor-derived
data), the manual recording of empirical observations, and
obtaining existing data from other sources.
• When your information is in the proper format, you next need to
ensure it is exactly the data you need and nothing more.
Visualization of data
• Data visualization is the acquiring data, analyzing it and graphical
representation of information and data.
• By using visual elements like charts, graphs, and maps, data
visualization tools provide an accessible way to see and understand
trends, outliers, and patterns in data.
• Additionally, it provides an excellent way for employees or business
owners to present data to non-technical audiences without confusion.
• The web designer must select the optimum representation that
communicates the data in the clearest, most desired manner with the
highest degree of impact.
Visualization formats
• Area chart
• Bar chart
• Bubble chart
• Candlestick chart
• Column chart
• donut chat
• Flow chart
• Funnel chart gauge chart
• Geographic chart
• Heat map
• Line chart
• Pie chart
• Scatter chart…
Why Data Visualization
• It makes easier for a wider audience to quickly grasp the relative
nature of selected data.
Advantages of Data Visualization
• Easily sharing information.
• Interactively explore opportunities.
• Visualize patterns and relationships.
Disadvantages of Visualization
• Biased or inaccurate information.
• Correlation doesn’t always mean causation.
• Core messages can get lost in translation.
Application of Data Visualization
• Public sector
• All levels of government
• Police
• Military
• transportation agencies
• educational and healthcare facilities
• Business to business and Intrabusiness Uses
• Annual report of the company
• Business to Consumer uses
• Infographics syndicate data and information in a visually attractive manner using
• Pie chart
• Stock chart
• Other fundamental representation
Web Professional’s responsibilities
• A web developer with server side skill is needed to handle the back end processing
of data to make it accessible.
• A JavaScript code is responsible for filtering, sorting and manipulating the data to
prepare it for representation. This role could also be handled server side or in
combination with client-side technology.
• An HTML coder builds any required forms to allow interactive data addition,
often with JavaScript library for validation.
• 1 or more web designers create the look-and-feel of all data related pages,
including styling the output of the visualized data.
• A web coder, leveraging his or her own knowledge of JavaScript, combined with
core frame works and data visualization library displays the data of a
representational format.
Required Tools/softwares
• Faster more efficient JavaScript engines in browser
• The rapid proliferation of HTML5 compatible browsers
• The increased availability of JavaScript frameworks and libraries
• Different tools are available for the data visualization
• Tableau
• Dundas BI
• JupyteR
• Zoho Reports
• Google Charts
• Visual.ly
• RAW
• IBM Watson
Why HTML5
• The<canvas>tag
• SVG
• Web fonts
• Advanced form elements
Data Visualization spectrum
• Data point
• Line chart
• Bar chart
• Pie chart
• Area chart
• Candlestick Chart
• Bubble chart
• Surface chart
• Map Chart
• Infographics
Data Point
Line Chart
Bar Chart
Pie Chart
Area Chart
Candlestick Chart
Bubble Chart
Surface Chart
Map Chart
Infographics
Basic steps for initialize the canvas
Use of <canvas>
• Designer makes a reserved open-ended area on the web page to hold
programmatically created graphics at run time.
• JavaScript API is used
• Cross browser support
Context.beginPath() //Start path
context.closePath() // close path
context.stroke() //Draw path on canvas
context.strokeRect(x,y,width,height) // rectangle without fill
context.fillRect(x,y,width,height) // rectangle with fill default black
context.fill()
context.moveTo(x,y) // Move the cursor on specific location
context.lineTo(x,y) // draw line
context.arc(x,y,r,start_angle,end_angle)
context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle)
context.quadraticCurveTo(cpx,cpy,x,y)
context.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
Draw following shapes using canvas
SVG
• Scalable Vector Graphics
• Alternative of canvas
• SVG allows run-time graphics in a format suppoeted by most
contemporary browsers.
Questions
1. Basic Building block of data visualization.
2. Discuss rise of HTML5 and what are the key feature of HTML5 for data
visualization
3. What are the key factor for data visualization
4. Explain the type of charts? Explain any two of them.
5. Difference between following
1. xy chart and pie chart
2. Line chart and bar chart
3. Map graph and infographics
4. SVG and Canvas
6. Explain candlestick, bubble ,surface and map chart with example