3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization...
Transcript of 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization...
![Page 1: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/1.jpg)
Kwan-Hee YooChungbuk National University
Byounghyun YooKorea Institute of Science and Technology
July 31 2017Web3D Consortium
3D DATA VISUALIZATION
![Page 2: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/2.jpg)
Introduction• Big Data Generation
Web3D Meeting2
Social DataSocial Data
IoT / M2MGeospatioal Data
IoT / M2MGeospatioal Data
Business DataBusiness Data Bio DataBio Data
Video-CCD CameraVideo-CCD Camera
![Page 3: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/3.jpg)
Data Life Cycle
3
StreamData
Hadoop
DataSources
Mining
Data Processing
VisualizationSupport Decision
Making
Web, SNS DataSystem Log Data
Big Data Store
Big Data Analysis
Search engine
Graph/chart
ETL engine
Analysisresult
SearchDB
Information Store/
Distributed Processing
filtering
Real timeanalysis
File store
Structured data
![Page 4: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/4.jpg)
Big Data Processing System
2017-08-08 4
![Page 5: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/5.jpg)
Visualization template design
![Page 6: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/6.jpg)
HTML5/X3D integration
![Page 7: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/7.jpg)
Geospatial mashups
![Page 8: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/8.jpg)
Spatiotemporal visualization
![Page 9: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/9.jpg)
Data-driven visualization
![Page 10: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/10.jpg)
Mixed and Augmented Reality
![Page 11: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/11.jpg)
DDV.js based Bigdata visualization
- Apply Many Model Objects (Machines)
- Processing Machine Description- Analytic Results Visualization on
each process
3D Manufacturing Process Visualization based on Big Data
![Page 12: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/12.jpg)
R 3D visualization
12
![Page 13: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/13.jpg)
13
![Page 14: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/14.jpg)
14
![Page 15: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/15.jpg)
3D Data Visualization
• Time series visualization– Stick graph, cumulative graph, polyline, curve,
points
• Distribution visualization– Chart
• Comparison visualization– Different stick graphs
• Correlation visualization– Tree, Graph
• Spatial visualization– Map, Mark
![Page 16: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/16.jpg)
3D Data Visualization using HTML5/X3D
• Define drawing primitives for five kinds visualizations of big data analytics results
• Classify the primitives into five kinds, time-series, distribution, comparison, correlation, spatial visualizations
• Integrating HTML5 (SVG) and X3D based big data visualization
• The work will be done similar to Medical WG
![Page 17: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/17.jpg)
3D Data Visualization using HTML5/X3D
Can X3D/HTML5 nodes support functions to visualize analytics results of big data ?
• Time series visualization– Stick graph, cumulative graph, polyline, curve, points
• Distribution visualization– Chart
• Comparison visualization– Different stick graphs
• Correlation visualization– Tree, Graph
• Spatial visualization– Map, Mark
![Page 18: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/18.jpg)
§ 3D Data Visualization
§ Machine Information
§ Product Information
Environment
Method
Man
Material
Machine
§ Component
§ Machine problem
§ Material problem
§ Plane
§ Scene
§ Worker information
§ Work time
Sensor
§ temperature
Database
Analysis results
Raw data
x3d
X3D Viewer
![Page 19: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/19.jpg)
Big Data Visualization using HTML5/three.js
X3D
ChartsBox, Pie, Venn
Stick MapTableSymbol
Pairs
Distribution ComparisonTimeSeries
Correlation Spatial
3D Layout
![Page 20: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/20.jpg)
§ x3d3.js
framework
Data Driven Visualization
BIG DATA (ANALYTICS DATA) (JSON & DB & QUERY RESULTS)BIG DATA (ANALYTICS DATA) (JSON & DB & QUERY RESULTS)
Database
json
csv, tsv, txt
html, xml
Geometry 2D
Arc2DCircle2D
……
Geometry 3D
BoxCone
Cylinder….
Geometry 3D
ConeCylinder
d3.js
Input DataDistribution
3D Pie Chart
Shape
….
x3dom.js
node……
Relation
3D Bar Chart
X3D Viewer
![Page 21: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/21.jpg)
21
Visualization library
Time series
Bar GraphStacked Bar GraphTime series Graph
Big Data Visualization Primitive
Distribution
Pie ChartDonut ChartTree map
Correlation
Hit mapChernoff Face
Star Chart
Comparison
Scattered GraphBubble chartHistogram
GeoSpatial
Map mappingChoropleth map
Data Driven Visualization (DDV)Web 3D Visualization Tool
Data source
Database
json
csv, tsv, txt
html
![Page 22: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/22.jpg)
22
DDV
DDVMachine
DDVMeterial
DDVMan
DDVMethod
DDVEnvironment
DDVSensor
![Page 23: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/23.jpg)
§ 3D Environment
3D
Data
Visualization
DDV.js + html5 + DDV
=> 3D Object + 3D Properties
Data
Txt
Array
json, csv, tsv
Database Query
§ 3D Layout
LayoutCoordinates
Properties
![Page 24: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/24.jpg)
§ Components
Class Detail
Component
s
DDVEnvironment
DDVMachine
DDVMeterial
DDVMan
DDVMethod
DDVSensor
Plane
Scene
Layout
Menu(DDV manu)
3D Model Object(Machine, Conveyor …)
Temperature
Error Information
Database(data gathering)
Data 3D visualization
Label
DDVaddControls
Animation
Popup menu
Edit model option
Add new model
![Page 25: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/25.jpg)
25
Use Case
![Page 26: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/26.jpg)
§ DDV3Dbar graph for (x age, y men, z women)
![Page 27: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/27.jpg)
§ DDV3Dscatter plot visualization for (x:murder,y:thief,z:population)
![Page 28: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/28.jpg)
§ DDV3DPieChart
![Page 29: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/29.jpg)
§ DDV3DHeatmap
![Page 30: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/30.jpg)
§ DDV3DGeo Visualization
![Page 31: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/31.jpg)
§ DDV3D Histogram from Database
![Page 32: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/32.jpg)
Load Model object and mtl file
Colortexture
![Page 33: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/33.jpg)
DDVTween.js Animation
Pre1 Pre2
![Page 34: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/34.jpg)
DDVTween.js interpolation Animation
Finish
Pre1 Pre2 Pre3
Balancer
Feeder
![Page 35: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/35.jpg)
DDVLabel
![Page 36: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/36.jpg)
DDVMenu onmodels
![Page 37: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/37.jpg)
DDVClick Menu Item
![Page 38: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/38.jpg)
DDVPosition/ DDVRotation
![Page 39: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/39.jpg)
Add 3D Object
3D Model Object
![Page 40: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/40.jpg)
Authoring tool UI
![Page 41: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/41.jpg)
Demo
![Page 42: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/42.jpg)
§ 3D Components
Class Detail
3D
Components
3D Treemap
3D Tree
3D Pack
3D Partition
3D Force
3D Bundle
3D Chord
3D Cluster
3D Stack
3D Hierarchy
3D Graph
3D accumulation stick graph
3D Point Graph
3D Time Series Graph
3D Stage Graph
3D Pie Chart
3D Donut Chart
3D accumulation stick graph
3D accumulation continuous graph
3D Scatter Plot
3D Bubble Chart
3D Histogram
3D Density Graph
3D Heatmap
3D Chernoff Face
3D Star Chart
Various Visualization on 3D Map
Charts on 3D Map
![Page 43: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/43.jpg)
Class Description
DDVTimeseries
3D Graph
3D accumulation stick graph
3D Point Graph
3D Time Series Graph
3D Stage Graph
DDVDistribution
3D Pie Chart
3D Donut Chart
3D accumulation stick graph
3D Tree map
3D accumulation continuous graph
DDVRelation
3D Scatter Plot
3D Bubble Chart
3D Histogram
3D Density Graph
DDVComparison
3D Heatmap
3D Chernoff Face
3D Star Chart
3D parallel coordinates
DDVSpatialVarious Visualization on 3D Map
Charts on 3D Map
![Page 44: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/44.jpg)
Future Plan• Design Database(Store 3D Object information)• Data gathering( apply into 3D manufacturing animation)• Remake layout and default model Object(When startup program)• Animation (When products or machines have problem alert message)• Live data (Label) on each machines• Apply 3D visualization (3D Bar chart, 3D Histogram)• Add functions(Environment, Machine, Material, Man, Method, Sensor)• Design hand robot (Pressure1,2,3 …)• Update UI authoring tool• Users select specific location in scene and than add 3D object
44
![Page 45: 3D DATA VISUALIZATION Chapter Meeting SIGGRAPH 2017/9...Jul 31, 2017 · 3D Data Visualization using HTML5/X3D •Define drawing primitives for five kinds visualizations of big data](https://reader033.fdocuments.in/reader033/viewer/2022041820/5e5d37d601b5e718d7191994/html5/thumbnails/45.jpg)
Thank You!
45