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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Atsushi Tadokoro
June 19, 2014
Technology
1.9k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Processing.jsによるデータの可視化と生成的表現
Atsushi Tadokoro
June 19, 2014
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.8k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
460
Tumblrを使う2 - テーマをカスタマイズする
tado
0
380
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.4k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.6k
TumblrでWebサイトを作成
tado
0
720
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
BigQuery の Cross-cloud Lakehouse への歩み
phaya72
2
550
Agentic ERPをどう設計するか ー 受発注エージェントを動かす、現場の知見と設計思想ー
recerqainc
1
1.6k
Djangoユーザが知っ得なPostgreSQL機能 - 設計の選択肢を増やす / Djang-use-PostgreSQL
soudai
PRO
0
190
noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.
kaonavi
1
310
関西に縁あるMicrosoft MVPsが語るCopilotの未来
kasada
0
1.2k
Diagnosing performance problems without the guesswork
elenatanasoiu
0
170
GoとSIMDとWasmの今。
askua
3
510
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
visional_engineering_and_design
14
8.1k
EventBridge Connection
_kensh
4
570
サイバーセキュリティ概論 / Introduction to Cybersecurity
ks91
PRO
0
160
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
kintotechdev
2
1k
Platform Engineering as a Product: Criteria for Improvement and Multi-Tenant Design
kumorn5s
0
510
Featured
See All Featured
It's Worth the Effort
3n
188
29k
Abbi's Birthday
coloredviolet
2
7.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
410
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Chasing Engaging Ingredients in Design
codingconduct
0
210
RailsConf 2023
tenderlove
30
1.5k
Building the Perfect Custom Keyboard
takai
2
780
How to Talk to Developers About Accessibility
jct
2
220
The agentic SEO stack - context over prompts
schlessera
0
790
GraphQLとの向き合い方2022年版
quramy
50
15k
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ະདྷͷߦํ