Upload File

svg と d3.js でちょっとリッチなデータ可視化

  • Home
  • Design
  • SVG と D3.js でちょっとリッチなデータ可視化
31

Upload: yuki-matsuda

Post on 25-May-2015

2.314 views

Category:

Design


4 download

Report

DESCRIPTION

HTML,CSSに並ぶかもしれない要素、SVG（Scalable Vector Graphics）を紹介。SVGはInternetExplorer9で正式対応され、スマートフォン対応サイトなど、多種多様な画面サイズに対応しなければならない現代において活躍が期待される画像フォーマットです。このスライドでは、Code for KOSEN加盟高専一覧データや、センサデータをD3.jsを利用して可視化してみます

TRANSCRIPT

Page 1: SVG と D3.js でちょっとリッチなデータ可視化
Page 2: SVG と D3.js でちょっとリッチなデータ可視化
Page 3: SVG と D3.js でちょっとリッチなデータ可視化
Page 4: SVG と D3.js でちょっとリッチなデータ可視化
Page 5: SVG と D3.js でちょっとリッチなデータ可視化
Page 6: SVG と D3.js でちょっとリッチなデータ可視化
Page 7: SVG と D3.js でちょっとリッチなデータ可視化
Page 8: SVG と D3.js でちょっとリッチなデータ可視化
Page 9: SVG と D3.js でちょっとリッチなデータ可視化
Page 10: SVG と D3.js でちょっとリッチなデータ可視化
Page 11: SVG と D3.js でちょっとリッチなデータ可視化
Page 12: SVG と D3.js でちょっとリッチなデータ可視化
Page 13: SVG と D3.js でちょっとリッチなデータ可視化
Page 14: SVG と D3.js でちょっとリッチなデータ可視化
Page 15: SVG と D3.js でちょっとリッチなデータ可視化
Page 16: SVG と D3.js でちょっとリッチなデータ可視化
Page 17: SVG と D3.js でちょっとリッチなデータ可視化
Page 18: SVG と D3.js でちょっとリッチなデータ可視化
Page 19: SVG と D3.js でちょっとリッチなデータ可視化
Page 20: SVG と D3.js でちょっとリッチなデータ可視化

By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on webhttp://mangaonweb.com

Page 21: SVG と D3.js でちょっとリッチなデータ可視化
Page 22: SVG と D3.js でちょっとリッチなデータ可視化
Page 23: SVG と D3.js でちょっとリッチなデータ可視化
Page 24: SVG と D3.js でちょっとリッチなデータ可視化

https://github.com/mbostock/d3/wiki/Gallery

https://github.com/mbostock/d3/wiki

Page 25: SVG と D3.js でちょっとリッチなデータ可視化

http://c4k-branchmap.herokuapp.com/

http://snowboarder-gyro-graph.herokuapp.com/

Page 26: SVG と D3.js でちょっとリッチなデータ可視化
Page 27: SVG と D3.js でちょっとリッチなデータ可視化
Page 28: SVG と D3.js でちょっとリッチなデータ可視化
Page 29: SVG と D3.js でちょっとリッチなデータ可視化
Page 30: SVG と D3.js でちょっとリッチなデータ可視化
Page 31: SVG と D3.js でちょっとリッチなデータ可視化

By 「ブラックジャックによろしく」, 佐藤秀峰, 漫画 on webhttp://mangaonweb.com


HTML5 と SVG で考える、これからの画像アクセシビリティ

SVG In Motion - Sara Soueidan · PDF fileSVG In Motion SVG for Web ... SVG Sprite Animation Techniques 6. SVG Line Drawing Effects SVG for Web Designers & Developers ... — What kind

Title アドリエンヌ・リッチの詩 --広げよう 私たちの力を-- …repository.kulib.kyoto-u.ac.jp/dspace/bitstream/2433/...Title アドリエンヌ・リッチの詩

[MS-SVG]: Internet Explorer Scalable Vector Graphics (SVG ...MS-SVG].pdfGraphics (SVG) 1.1 Specification (Second Edition) [W3C-SVG1.1/2], W3C Recommendation published August 16, 2011

Protokoll - sv-gerlingen.de fileProtokoll SVG Vereinsmeisterschaft am 13./14.11.2010 Abschnitt 1 (13.11.2010) Veranstalter: SVG / KSG Ausrichter: SVG / KSG

Svg Lighting

interoperability.blob.core.windows.netinteroperability.blob.core.windows.net/web/MS-SVG/[MS …  · Web view[MS-SVG]: Internet Explorer Scalable Vector Graphics (SVG) Standards Support

Basic Witch Svg, Halloween Svg - The Hungry JPEGThe+Complete+Guide+-+Th… · kitchen witch stirring magic svg. Let's Get Sheet Faced SVG, Halloween SVG. Little Miss Scream Queen

SVG - LivelineIndia

kintone × Ignite UI ～リッチなファストアプリを～ (LT)

Sencha Touch - devfesta.jp · 対応しようとする と予算が膨らむ。 ... • リッチなコンポーネント、ウィジェット • 人気の端末向けにチューニング

Static Var Generator (SVG) - GES Group SVG Brochure.pdfFEATURES SVG Features Structural Dimensions 06 G.E.S GROUP - STATIC VAR GENERATOR (SVG) Compact Modular Design for Ultimate Flexibility

[MS-SVG]: Internet Explorer Scalable Vector Graphics (SVG ...interoperability.blob.core.windows.net/web/MS-SVG/[MS-SVG].pdf · Internet Explorer Scalable Vector Graphics (SVG) Standards

Mobile Navigation With SVG Christian Schmitt SVG Open 2005

SVG in Fritzing: A Case Study - SVG Open

Inline SVG - トラブルとその対策

SVG & Inkscape

The packages svg svg-extract - texdoc

Scalable Vector Graphics (SVG) Specification · 1999. 7. 6. · 3.4 Conforming SVG Included Documents 3.5 Conforming SVG Generators 3.6 Conforming SVG Interpreters 3.7 Conforming

SVG Wallmount SVG Cabinet Mount - Power Electronics NZ · PDF filePower Quality Static Var Generator (SVG) SVG Wallmount SVG Cabinet Mount

Die Reduktion von Zucker, Fett und Energie in ... · Family Erwachsene ≤20g/svg ≤25g/svg Family Erwachsene ≤5g/svg ≤7g/svg kcal r oP ti n Family Erwachsene ≤20g/svg ≤25g/svg

No-touch SVG の現況と課題

Introduction - interoperability.blob.core.windows.netMS-SVG...  · Web viewIf the SVG fragment identifier addresses specific SVG view (e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))),

SVG GOSPELFEST

SVG 09_Anim

SVG Valve Gate - Mastip hot runner solutions SVG Valve Gate

Scalable Vector Graphics (SVG) 1.1 Specificationsomchai/Miscellaneous/SVG/REC-SVG11... · The authors of the SVG 1.1 specification are the people who participated in the SVG Working

The packages svg svg-extract - mirror.hmc.edumirror.hmc.edu/ctan/graphics/svg/doc/svg.pdfThe packages svgand svg-extract PhilipIlten(2012–2016) FalkHanisch(2017–) [email protected]

D3.js と SVG によるデータビジュアライゼーション

The packages svg svg-extract - ibibliomirrors.ibiblio.org/CTAN/graphics/svg/doc/svg.pdf · 2.1. Generalsettings \svgsetup Allotheroptionsdescribedindetailbelowcanalsobechangedafterloadingthepackageeither

SVG Unternehmensflyer

フォントをつくるサイトで使ったCanvasとSVGの話 @HTML5飯

AndroidとSVG (ABC 2013 Spring LT)

SVG Accessibility

SVG Open 2009: SVG In Vodafone Widgets