can you say “charticulator”? - wordpress.com · design process 1. generate/provide sample...
TRANSCRIPT
![Page 1: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/1.jpg)
Can You Say “Charticulator”?… I K N E W YO U C O U L D
PA U L T U R L E YP r i n c i p a l C o n s u l t a n t , P r a g m a t i c Wo r k sM i c r o s o f t D a t a P l a t f o r m M V P
D e m o & s a m p l e f i l e s :
T i n y u r l . C o m / c h a r t i c u l a t o r - d e m o s
D o w n l o a d a n d e x t r a c t :D o w n l o a d T h i s F i l e . Z i p
![Page 2: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/2.jpg)
Paul Turley
Principal Consultant, Pragmatic Works
linkedin.com/in/pturley
SqlServerBi.blog
@Paul_Turley
2
![Page 3: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/3.jpg)
Power BI Visuals
Standard Visuals
Mainstream, “out of the box” charts & visuals
Easy to design & use
Supported
Not always flexible
Custom Visuals
Highly-customizable
Very flexible
Programming expertise:C#, JavaScript libraries
Long & complex development cycle
Charticulator
No code
Web-based designer
Flexible drag-and-drop tool
Detail properties
Compiles & exports to custom visuals
![Page 4: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/4.jpg)
Charticulator is:
• A Microsoft Research Project
• Open source
• The goodness of custom visuals without all the work
• Built on durable technologies & API architecture
• Wicked-cool Visuals
Made by really smart people at Microsoft Research
…using really advanced web development libraries that are integrated Power BI components
![Page 5: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/5.jpg)
Basic Chart Types
• Radial charts
• Linear charts
• Segmented series
• Continuous series
• Banding & links
• Relationships & transitions
• Bubbles
• Infographics
• Multiples
![Page 6: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/6.jpg)
Charticulator Concepts• Glyph
• Mark
• Shape
• Text
• Image
• Data Axis
• Links
• Guides
• Plot segment
• Scaffold
• Legends, titles, misc Nearly all properties & attributes may be bound to a field or expression
![Page 7: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/7.jpg)
Design Process
1. Generate/provide sample dataset
2. Create glyph with marks, text & shapes
3. Create plot segment
4. Define axes
5. Set field bindings & properties
6. Save chart (optionally download)
7. Export custom visual, set data mapping slots
8. Import custom visual, set fields & properties
![Page 8: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/8.jpg)
Something Simple
Two Measure Bar Chart
• Data Axis
• Glyph contains rectangle marks
• Width bound to field values
• Text marks bound to field values
• Static text marks
• Marks aligned to guides
![Page 9: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/9.jpg)
Let’s Do It!B UIL D T HE T WO ME A SURE B A R CHA R T
![Page 10: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/10.jpg)
Building on the same theme as the two measure bar chart, a variety of bar chart and bullet graph visualizations are possible
![Page 11: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/11.jpg)
And Now for Something Completely Different
![Page 12: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/12.jpg)
Chart Components
Glyph with one rectangle mark
Rectangle height bound to Qty Sum field
Rectangle color bound to Category Name field
Link on Category Name using Bezier curve
X-axis on Month
Radial scaffold
![Page 13: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/13.jpg)
Let’s Do It Again!UNT IL WE R UN O UT O F T IME
![Page 14: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/14.jpg)
Resources
• Charticulator galleryhttps://charticulator.com/gallery
• YouTube demos published by Bongshin Leehttps://youtu.be/5EZq4QolNy4
• Demo by Leila Etaatihttps://www.youtube.com/watch?v=eC0L3Q373lw
• Research paper from development teamDonghao Ren, Bongshin Lee, and Matthew Brehmerhttps://www.microsoft.com/en-us/research/uploads/prod/2018/08/Charticulator-InfoVis2018.pdf
• Materials for this sessionhttp://tinyurl.com/Charticulator-Demos
![Page 15: Can You Say “Charticulator”? - WordPress.com · Design Process 1. Generate/provide sample dataset 2. Create glyph with marks, text & shapes 3. Create plot segment 4. Define axes](https://reader034.vdocument.in/reader034/viewer/2022042300/5ecb70d20746fe023043997a/html5/thumbnails/15.jpg)
Thank You
linkedin.com/in/pturley
SqlServerBi.blog
@Paul_Turley
Please connect with me using one of these mediums