Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Processing.jsによるデータの可視化と生成的表現
Search
Atsushi Tadokoro
June 19, 2014
Technology
1
1.8k
Processing.jsによるデータの可視化と生成的表現
Atsushi Tadokoro
June 19, 2014
Tweet
Share
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.7k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
440
Tumblrを使う2 - テーマをカスタマイズする
tado
0
360
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.3k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.6k
TumblrでWebサイトを作成
tado
0
700
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.2k
Webサーバーの準備 - Github PagesでWebサイト開設
tado
0
1.5k
Other Decks in Technology
See All in Technology
AI 코딩 에이전트 더 똑똑하게 쓰기
nacyot
0
510
Part1 GitHubってなんだろう?その2
tomokusaba
1
370
正式リリースされた Semantic Kernel の Agent Framework 全部紹介!
okazuki
1
540
Part1 GitHubってなんだろう?その1
tomokusaba
2
390
Azure & DevSecOps
kkamegawa
2
110
MySQL InnoDB Data Recovery - The Last Resort
lefred
0
100
Новые мапы в Go. Вова Марунин, Clatch, МТС
lamodatech
0
1.8k
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
0
200
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
5.1k
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
3
540
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
coconala_engineer
0
200
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
460
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
52
7.5k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Transcript
ใฤू 8FC 1SPDFTTJOHKTʹΑΔσʔλͷՄࢹԽͱੜతදݱ ݄ ౦ژज़େֶܳज़ใηϯλʔ ".$ ୲ɿాॴ३
ʮՄࢹԽ 7JTVBMJ[BUJPO ʯͱ
ʮՄࢹԽ 7JTVBMJ[BUJPO ʯͱ ‣ ՄࢹԽ7JTVBMJ[BUJPO ‣ ਓ͕ؒʮݟΔʯ͜ͱͷͰ͖ͳ͍ݱࣄɺ͋Δ͍ؔੑΛɺʮݟΔʯ͜ͱͷ Ͱ͖Δͷʹ͢Δ͜ͱ ‣ ݟΔ͜ͱͷͰ͖Δͷˠը૾ɺө૾ɺάϥϑɺਤɺදͳͲ
‣ ࢹ֮Խҙ֎ͷํ๏ ‣ ՄௌԽԻʹΑͬͯௌ͘͜ͱ͕Ͱ͖ΔΑ͏ʹ͢Δ ‣ Մ৮Խ৮ΕΔ͜ͱʹΑͬͯදݱ͢Δ
ࢀߟॻɿʮϏδϡΞϥΠδϯάσʔλʯ ‣ ϏδϡΞϥΠδϯάɾσʔλʕ1SPDFTTJOHʹΑΔใࢹ֮Խख๏ ‣ #FO'SZ ஶ ૿Ҫढ़೭ ༁ म
Ճ౻ܚ ༁ ‣ ΦϥΠϦʔδϟύϯ
ใͷࢹ֮Խͷεςοϓ ‣ #FO'MZʹΑΔɺใࢹ֮Խͷεςοϓ ‣ ʮϏδϡΞϥΠδϯάɾσʔλʯΑΓ ‣ σʔλऩू BDRVJSF ‣
ղੳ QBSTF ‣ ϑΟϧλϦϯά pMUFS ‣ ϚΠχϯά NJOF ‣ දݱ SFQPSFTFOU ‣ ਫ਼៛Խ SFpOF ‣ ΠϯλϥΫγϣϯ JOUFSBDU ‣ ͍ͭɺશͯͷεςοϓ͕ඞཁͱ͍͏Θ͚Ͱͳ͍
ใͷࢹ֮Խͷεςοϓ ‣ σʔλऩू BDRVJSF ‣ σʔλΛऩू͢Δ ‣ σΟεΫ্ͷϑΝΠϧ ‣
ωοτϫʔΫ্ͷσʔλ
ใͷࢹ֮Խͷεςοϓ ‣ ղੳ QBSTF ‣ σʔλͷҙຯΛͱʹߏΛՃ͢Δ ‣ σʔλΛΧςΰϦʹ͚Δ ‣
σʔλͷݸʑͷ෦ͷܗ͕ࣜ໌֬ʹͳΔ
ใͷࢹ֮Խͷεςοϓ ‣ ϑΟϧλϦϯά pMUFS ‣ ༻్ʹ͋Θͳ͍෦Λআڈ͢Δ ‣ σʔλͷதͰඞཁͱͳΒͳ͍ϨίʔυΛআڈ ‣
ཧϞσϧΛ͋ͯΊ ‣ ਖ਼نԽ ‣ ֶతͳॲཧ
ใͷࢹ֮Խͷεςοϓ ‣ ϚΠχϯά NJOF ֶతͳॲཧʹΑͬͯɺύλʔϯΛΈ͚ͭͩ͢ ‣ සग़ύλʔϯநग़ߴසͰൃੜ͢Δಛతͳύλʔϯ ‣ ྫɿຊ̖Λങ͏ਓɺޙʹຊ̗Λങ͏͜ͱ͕ଟ͍ ‣
Ϋϥεྨ༩͑ΒΕͨσʔλʹରԠ͢ΔΧςΰϦΛ༧ଌ ‣ ྫɿༀͷԽ߹ͷσʔλ͔ΒɼͦͷԽ߹ʹༀޮ͕͋Δɾͳ͍ͱ͍ͬͨΧςΰϦΛ༧ଌ ‣ ճؼੳ༩͑ΒΕͨσʔλʹରԠ͢Δ࣮Λ༧ଌ ‣ ༵ɺ߱ਫ֬ɺࠓͷച্͛ͳͲͷσʔλΛݩʹ໌ͷച্͛ͱ͍͏࣮σʔλΛ༧ଌ ‣ ΫϥελϦϯάσʔλͷू߹ΛΫϥελͱݺͿάϧʔϓʹ͚Δ ‣ 8FCͷӾཡύλʔϯͷσʔλ͔Βɺྨࣅͨ͠ͷΛ·ͱΊΔ͜ͱͰɺӾཡͷ͕ಉ͡ར ༻ऀͷάϧʔϓΛൃݟ͢Δ
ใͷࢹ֮Խͷεςοϓ ‣ දݱ SFQSFTFOU ‣ جຊతͳදࣔͷܗࣜɺࢹ֮ԽͷϞσϧΛܾఆ͢Δ ‣ άϥϑ ‣
Ϧετ ‣ ߏFUD
ใͷࢹ֮Խͷεςοϓ ‣ ਫ਼៛Խ SFpOF ‣ άϥϑΟοΫσβΠϯͷख๏Λ͔ͭͬͯදݱΛ͞Βʹ໌շʹ ‣ ΑΓັྗతͳදݱ ‣
৭ɺܗ ‣ ಛఆͷσʔλʹҙΛҾ͖͚Δ ֊ͷಋೖ
ใͷࢹ֮Խͷεςοϓ ‣ ΠϯλϥΫγϣϯ JOUFSBDU ‣ ରతͳػೳΛՃ ‣ ϢʔβʹΑΔσʔλͷ୳ࡧ੍ޚ ‣
αϒηοτͷબ ‣ ࢹͷΓସ͑ ‣ ͜ͷतۀͰͷɺωοτϫʔΫͱͷ࿈ܞ 5XJUUFS1BDIVCF ΠϯλϥΫγϣϯͷҰ ͱߟ͑ΒΕΔ
ใͷࢹ֮Խͷεςοϓ ‣ σʔλऩू BDRVJSF ‣ ղੳ QBSTF ‣
ϑΟϧλϦϯά pMUFS ‣ ϚΠχϯά NJOF ‣ දݱ SFQPSFTFOU ‣ ਫ਼៛Խ SFpOF ‣ ΠϯλϥΫγϣϯ JOUFSBDU
༷ʑͳՄࢹԽͷख๏ʹ৮ΕΔ ‣ 7JTVBM$PNQMFYJUZҎ্ͷϓϩδΣΫτΛհ ‣ http://www.visualcomplexity.com/vc/
4JNJMBS%JWFSTJUZ ‣ 1IJMJQQ4UFJOXFCFS "OESFBT,PMMFS ‣ ੈքେफڭͷయΛੳ͠ɺफڭͱ৴ڼʹ͍ͭͯࢹ֮Խ͍ͯ͠Δ ‣ http://similardiversity.net/
7JTVBMJ[JOHJOGPSNBUJPOqPXJOTDJFODF ‣ .PSJU[4UFGBOFS ‣ จͷҾ༻ͷωοτϫʔΫΛࢹ֮Խ ‣ http://well-formed.eigenfactor.org/
0QUF1SPKFDU ‣ #BSSFUU-ZPO ‣ Πϯλʔωοτͷਤ ‣ http://www.opte.org/
5IF3FNPUFTUQMBDFPO&BSUI ‣ +PJOU3FTFBSDI$FOUSF &VSPQFBO$PNNJTTJPO 8PSME#BOL ‣ ʮ࠷ԕ͍ॴͲ͔͜ ʯ ‣ ੈքͷओཁͷࢢ͔ΒҠಈʹ͔͔Δ࣌ؒ
‣ http://www.newscientist.com/gallery/small-world
TVCCMVF 'SBDUBM-BC ‣ 5PN#FEEBSE ‣ ੜతͳख๏Λۦͨ͠ܗଶΛࢹ֮Խ ‣ http://www.subblue.com/ ‣ http://fractal.io/
1BSUJUVSB ‣ 2VBZPMB ‣ ԻڹΛࢹ֮Խ WWWW ‣ http://www.quayola.com
ੜతͳදݱ ‣ ੜత (FOFSBUJWF ͳදݱʹ͍ͭͯߟ͑Δ ‣ ੜతͳදݱ (FOFSBUJWF"SU ‣
ίϯϐϡʔλͷιϑτΣΞʹΑΔΞϧΰϦζϜ͔Βੜ͞ΕΔදݱ ‣ ͋ΔجຊݪଇࣜςϯϓϨʔτͳͲͷૉࡐΛઃఆ͠ɺͦ͜ʹແ࡞ҝ·ͨແ࡞ ҝͷϓϩηε͕࡞༻͢ΔΑ͏ઃఆ͢Δ
ੜతͳදݱ ‣ ੜతͳදݱͷྫɿϧϑϥϜͷ࣍ݩηϧɾΦʔτϚτϯ ‣ ͋Δಛఆͷ࣌ࠁ U ʹ͓͚Δɺࣗࣗͱͦͷࠨӈͷηϧͷঢ়ଶʹΑͬͯɺ࣍ͷ࣌ࠁ U ͷঢ়ଶ͕ܾ·Δ
‣ ηϧͷPOP⒎ΛɺͱͰදݱ͢ΔͱՄೳੑͭ ‣ ‣ ͦΕͧΕͷঢ়ଶͰͷ࣍ͷΛϧʔϧͱͯ͠ఆΊΔ ‣ ϧʔϧͷՄೳੑશ෦ͰݸͱͳΔ ͷɺCJU ‣ ྫɿϧʔϧ ࣍
ੜతͳදݱ ‣ 1SPDFTTJOHͰɺϧϑϥϜͷ$"Λࢼͯ͠ΈΔ ‣ 1SPDFTTJOHͷαϯϓϧ ‣ ʮ5PQJDTʯˠʮ$FMMVMBS"VUPNBUBʯˠʮ8PMGSBNʯ ‣ ϓϩάϥϜͷϧʔϧηοτΛมߋͯ͠ΈΔ ‣
TFUVQ ؔͷҎԼͰఆٛ͞Ε͍ͯΔ ‣ JOU<>SVMFTFU\ ^
ੜతͳදݱ ‣ ϧʔϧ\ ^
ੜతͳදݱ ‣ ϧʔϧ\ ^
ੜతͳදݱ ‣ ϧʔϧ\ ^
ੜతͳදݱ ‣ ϧϑϥϜͷΫϥεྨ ‣ Ϋϥεઢܗܥ ‣ ୯Ұͷฏߧঢ়ଶʹऩଋ͢Δɽͭ·Γɼશͯͷηϧ͕ɼ·ͨʹͳͬͯ͠·͏ɽ ‣ Ϋϥεඇઢܗܥ पظղ
‣ ࣶ༷ͷΑ͏ͳɼपظతʹແݶʹ܁Γฦ͢ύλʔϯʹऩଋ͢Δɽ ‣ Ϋϥεඇઢܗܥ ΧΦε ‣ ୯Ұͷঢ়ଶʹɼपظతͳঢ়ଶʹऩଋͤͣɼΧΦεతͳৼ͍Λ͢Δɽ ‣ Ϋϥεඇઢܗܥ ͦͷଞ ‣ ༧ଌ͕͍ͨ͠ɼෳࡶͳύλʔϯͰɼपظɼඇपظ͕ަޓʹݱΘΕͨΓɼύλʔϯ͕ফ͑ͨΓ͢ Δɽ
ੜతͳදݱ ‣ ίϯΣΠͷϥΠϑήʔϜ ‣ ࣍ݩͷ$"ϧʔϧ ‣ ੜ ‣ ࢮΜͰ͍Δηϧͷपғʹͭͷੜ͖͍ͯΔηϧ͕͋Ε࣍ͷੈͰੜ͖Δʢੜ͢ Δʣɻ
‣ ҡ࣋ ‣ ੜ͖͍ͯΔηϧͷपғʹ͔ͭͭͷੜ͖͍ͯΔηϧ͕͋Ε࣍ͷੈͰੜ͖Δɻ ‣ ࢮ ‣ ্Ҏ֎ͷ߹ʹ࣍ͷੈͰࢮ͵ɻ
ੜతͳදݱ ‣ ίϯΣΠͷϥΠϑήʔϜ
(FOFSBUJWF(FTUBMUVOH ‣ େͳͷੜతͳΞʔτͷ࣮ྫΛհͨ͠ॻ੶ ‣ IUUQXXXBNB[PODPKQEQ ‣ αϯϓϧશͯ1SPDFTTJOHͰ࡞͞Ε͍ͯΔ ‣ શͯμϯϩʔυՄೳ
(FOFSBUJWF(FTUBMUVOH ‣ ΦϑΟγϟϧαΠτ ‣ http://www.generative-gestaltung.de/
(FOFSBUJWF(FTUBMUVOH ‣ (FOFSBUJWF(FTUBMUVOHͷαϯϓϧΛΈͯΈΔ ‣ ͍͔ͭ͘ڥઃఆ͕ඞཁ ‣ ·ͣશͯͷαϯϓϧίʔυͷύοέʔδΛμϯϩʔυ ‣ IUUQXXXHFOFSBUJWFHFTUBMUVOHEFEPXOMPBET(FOFSBUJWF%FTJHO $PEF1BDLBHF[JQ
‣ μϯϩʔυͨ͠ύοέʔδΛల։ͯ͠ɺd%PDVNFOUT1SPDFTTJOHҎԼʹίϐʔ ͢Δ
(FOFSBUJWF(FTUBMUVOH ‣ (FOFSBUJWF(FTUBMUVOHڥઃఆ͖ͭͮ ‣ ඞཁͱͳΔϥΠϒϥϦΛΠϯετʔϧ ‣ Generative Design Lib 1.0.3
‣ controlP5 ‣ Geomerative ‣ treemap
(FOFSBUJWF(FTUBMUVOH ‣ ͭͷϥΠϒϥϦ (FOFSBUJWF%FTJHO-JCɺDPOUSPM1ɺ(FPNFSBUJWFɺ USFFNBQ ͷϑΥϧμΛɺ1SPDFTTJOHϑΥϧμͷMJCSBSZʹίϐʔ͢Δ
(FOFSBUJWF(FTUBMUVOH ‣ ΦϑγϟϧαΠτͷʮ$PEFTʯ͔ΒɺؾʹͳͬͨαϯϓϧΛબͼɺରԠ͢ΔίʔυΛ ىಈͯ͠ΈΔ ‣ IUUQXXXHFOFSBUJWFHFTUBMUVOHEFDPEF ‣ ͍Ζ͍Ζىಈͯ͠ɺࣗͷ͖ͳίʔυΛબ
(FOFSBUJWF(FTUBMUVOHͰͷੜతදݱ ‣ (FOFSBUJWFੜత ‣ (FTUBMUVOHܗଶ ήγϡλϧτ ‣ ༷ʑͳཁૉΛ༻͍ͨੜతදݱ ‣
৭ $PMPS ‣ ܗ 'PSN ‣ จࣈ 5ZQF ‣ ը૾ 1JDUVSF ‣ ཚͱϊΠζ 3BOEPN/PJTF ‣ ൃৼɺৼಈ 0DJMMBUJPOpHVSFT ‣ ৫Խ 'PSNVMBUFECPEJFT ‣ ΞτϥΫλʔ "UUSBDUPS ‣ ߏ 5SFFTUSVDUVSF
(FOFSBUJWF(FTUBMUVOH ‣ ྫɿ.@@@@500-
ࢀߟॻ੶ɺͦͷ ‣ '03. $0%&σβΠϯʗΞʔτʗݐஙʹ͓͚Δɺ͔ͨͪͱίʔυ<୯ߦຊʢιϑτ Χόʔʣ>
'03. $0%&Ͱͷྨ ‣ 'PSN $PEFͰͷཧ ‣ ෮ 3FQFBU ‣
มܗ 5SBOTGPSN ‣ ύϥϝʔλԽ 1BSBNFUFSJ[F ‣ ՄࢹԽ 7JTVBMJ[F ‣ γϛϡϨʔτ 4JNVMBUF
ࢀߟॻ੶ɺͦͷ̏ ‣ ϏδϡΞϧɾίϯϓϨΩγςΟʕใύλʔϯͷϚοϐϯά
ࢀߟॻ੶ɺͦͷ̏ ‣ ϏδϡΞϧɾίϯϓϨΩγςΟ࣍ ‣ c5IF5SFFPG-JGFੜ໋ͷथ ‣ c'SPN5SFFTUP/FUXPSLTπϦʔ͔ΒωοτϫʔΫ ‣ c%FDPEJOH/FUXPSLTωοτϫʔΫͷղಡ ‣
c*OpOJUF*OUFSDPOOFDUFEOFTTແݶͷ૬ޓଓੑ ‣ c5IF4ZOUBYPGB/FX-BOHVBHF৽͍͠ϏδϡΞϧݴޠͷߏจ ‣ c$PNQMFY#FBVUZෳࡶੑͷඒ ‣ c-PPLJOH"IFBEະདྷͷߦํ