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
Scrollytelling the 53 Stations of Tōkaidō: An I...
Search
Sorami Hisamoto
September 13, 2024
Programming
1
110
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / BUILD with Mapbox 2024
BUILD with Mapbox 2024 - Developer Show & Tell
https://www.mapbox.com/build
Sorami Hisamoto
September 13, 2024
Tweet
Share
More Decks by Sorami Hisamoto
See All by Sorami Hisamoto
オープンソースとビジネス: 位置情報の世界からみえる流れ / 札幌IT石狩鍋#2
sorami
0
240
How I Got Here - NLP, Geospatial, and beyond / NAIST NLP
sorami
0
76
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
100
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
150
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297
sorami
3
180
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.7k
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
1k
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
1.2k
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
1.2k
Other Decks in Programming
See All in Programming
Datadog RUM 本番導入までの道
shinter61
1
130
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
Use Perl as Better Shell Script
karupanerura
0
680
生成AIで日々のエラー調査を進めたい
yuyaabo
0
460
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
720
漸進。
ssssota
0
1.7k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
180
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
190
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
180
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
110
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
Featured
See All Featured
Speed Design
sergeychernyshev
30
980
Rails Girls Zürich Keynote
gr2m
94
14k
A designer walks into a library…
pauljervisheath
206
24k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
For a Future-Friendly Web
brad_frost
179
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Music & Morning Musume
bryan
46
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
54
6.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
Scrollytelling the 53 Stations of Tōkaidō "O*OUFSBDUJWF+PVSOFZ5ISPVHI+BQBO`T)JTUPSJD3PVUF !TPSBNJ #6*-%XJUI.BQCPY
!TPSBNJ )*4".0504PSBNJ ‣ !.*&36/&*OD BHFPTQBUJBMDPNQBOZJO+BQBO ‣ &YQMPSJOH5PPMTGPS5IPVHIUXJUIDPNQVUFST ‣ l5PLBJEP4DSPMMZUFMMJOHzJTNZTJEFQSPKFDU )FMMP
.BQCPYEFWFMPQFST
IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH
IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH
IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH
IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH
The 53 Stations of the Tōkaidō ౦ւಓޒेࡾ࣍, Tōkaidō Gojūsan-tsugi ‣
*DPOJDSFTUBSFBTPOUIFIJTUPSJDDPBTUBMSPBECFUXFFO5PLZPBOE,ZPUP ‣ 3FOPXOFEGPS6LJZPFQSJOUT B+BQBOFTFQBJOUJOHTUZMFGSPNUIDFOUVSJFT 6UBHBXB)JSPTIJHFʠ5IF'JGUZUISFF4UBUJPOTPGUIF5⒕LBJE⒕ʡ )⒕FJE⒕FEJUJPO r 4UBSU/JIPOCBTIJ 5PLZP 4BLBTIJUB &OE4BOK⒕⒚IBTIJ ,ZPUP
4$30--:5&--*/(
4$30-- 4503:5&--*/( ʴ
8IZ 4DSPMMZUFMMJOH
4DSPMMJTFBTJFSUIBODMJDLJOH+PTIVB1PSUFS IUUQCPLBSEPDPNBSDIJWFTTDSPMMJOHFBTJFSDMJDLJOH lTDSPMMJOHJTBDPOUJOVBUJPODMJDLJOHJTBEFDJTJPOz
5IF3IZUINPG:PVS4DSFFO$ISJTUPQIFS#VUMFS IUUQTXXXDISCVUMFSDPNUIFSIZUINPGZPVSTDSFFO ‣ &WJEFODFUIBUQFPQMFXPO`UTDSPMM EPFTO`UFYJTU ‣ 5IFRVFTUJPOJTOPU l8JMMUIFVTFSTDSPMM z
CVU l8JMMUIFZTDSPMMTMPXMZFOPVHI z
5IF3IZUINPG:PVS4DSFFO$ISJTUPQIFS#VUMFS IUUQTXXXDISCVUMFSDPNUIFSIZUINPGZPVSTDSFFO ‣ 4DBOOJOHJTSFBDUJPO 3FBEJOHJTBDIPJDF ‣ "ODIPSJNQPSUBOUJOGPJOBDPOTJTUFODFQMBDF ‣ 3FQFUJUJPOJTJOGPSNBUJPO
‣ &NQUZTQBDFJTOPUOFVUSBM l4USVDUVSFzBOEl3IZUINz -FOHUIJTOPUUIFQSPCMFN -BDLPGSIZUINJT
5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH#JMM4IBOEFS IUUQTOJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH l5IFSFJTBUPOPGSFTFBSDIPOIVNBOT`MJNJUFEBCJMJUZ UPSFUBJOJOGPSNBUJPO DPHOJUJWFMPBE BOEIPXUIBU BGGFDUTQSPDFTTJOHJOGPSNBUJPO<ʜ>4DSPMMZUFMMJOH
IFMQTTPMWFUIJTQSPCMFN &WFSHSFFOTBZT CFDBVTF JU`TBCPVUTQPPOGFFEJOHPVSBVEJFODFl*UTPVOET MJLFJOGBOUBMJ[JOHUIFNCVUJU`TOPU zTIFBEET TBZJOH XFOFFEUPVOEFSTUBOEUIFNBOEUIFJSOFFET BOE BDLOPXMFEHJOHPVSDPHOJUJWFMJNJUBUJPOTBMMPXTVTUP DIPPTFNFUIPETPGDPOUFOUEFMJWFSZUPNBYJNJ[FPVS SFTVMUTz
5IF1BTU 1SFTFOU BOE'VUVSFPG4DSPMMZUFMMJOH#JMM4IBOEFS IUUQTOJHIUJOHBMFEWTDPNUIFQBTUQSFTFOUBOEGVUVSFPGTDSPMMZUFMMJOH l4DSPMMZUFMMJOHJTBDUVBMMZBQFSGFDUNJNJDSZPGWJEFP XJUIUIFBEEFEBCJMJUZUPTMPXJUEPXOPSTQFFEJUVQ BMMXIJMFTFFJOHFWFSZGSBNFBMPOHUIFXBZ*U`TMJLF IJHIMZQFSGPSNBOUWJEFPTDSVCCJOHXIFSFXFEPO`U
NJTTBCFBU5IJOHTIBQQFOJOBMJOFBSXBZ PWFSUJNF POFUIJOHBUBUJNF KVTUMJLFSFBMJUZCVUCFUUFS CFDBVTFXFIBWFTPNFDPOUSPMPWFSUIFQBDFBOE EJSFDUJPOl
)PXUPJNQMFNFOU 4DSPMMZUFMMJOH
*OUFSTFDUJPO0CTFSWFS"1* .POJUPSTUBSHFUFMFNFOUTFOUFSJOH JOUFSTFDUJOH UIFTQFDJ fi FESBOHF .PSFEJSFDUBOEFBTJFSUIBOUIFQSFWJPVTNFUIPEVTJOHTDSPMMFWFOUT
4DSPMMBNB "MJCSBSZGPS4DSPSZUFMMJOHXJUI*OUFSTFDUJPO0CTFSWFS"1* 4QFDJGZDMBTTOBNFUPUIFFMFNFOU BOEFYFDVUFXIFOUIFZFOUFSTFYJUT IUUQTQVEEJOHDPPMQSPDFTTJOUSPEVDJOHTDSPMMBNB IUUQTHJUIVCDPNSVTTFMMTBNPSBTDSPMMBNB CZ3VTTFMM4BNPSB !5IF1VEEJOH
':*0MEMJCSBSJFT "SUJDMFDPNQBSJOHWBSJPVTMJCSBSJFTCZUIFBVUIPSPG4DSPMMBNB +BOVBSZ ˠ5IFO 4DSPMMBNB /PWFNCFS IUUQTQVEEJOHDPPMQSPDFTTIPXUPJNQMFNFOUTDSPMMZUFMMJOH 8BZQPJOUT 4DSPMM4UPSZ
4DSPMM.BHJD HSBQITDSPMMKT JOWJFXKT *NQMFNFOUCZZPVSTFMGXJUIXJOEPXBEE&WFOU-JTUFOFS TDSPMM
(4"1CZ(SFFO4PDL "+BWB4DSJQUBOJNBUJPOMJCSBSZ 5IFSFJTBQMVHJOUIBUNBLFTUIFBOJNBUJPOXPSLXJUITDSPMMJOH IUUQTHSFFOTPDLDPNTDSPMMUSJHHFS IUUQTHJUIVCDPNCBTFNFOUTUVEJPTDSPMMZUFMMJOH 4DSPMM5SJHHFSQMVHJO 4DSPMM5SJHHFSGPS3FBDU
4WFMUF1BUUFSOT %BUBWJTVBMJ[BUJPOQBUUFSOTXJUIB8FCGSBNFXPSLl4WFMUFz *OUSPEVDFTlTWFMUFTDSPMMFSzBOElTWFMUFJOUFSTFDUJPOPCTFSWFSz IUUQTSFVUFSTHSBQIJDTHJUIVCJPFYBNQMF@TWFMUFHSBQIQBUUFSOT CZ%FB#BOLPWB !3FVUFST
.BQCPYlTUPSZUFMMJOHzUFNQMBUF "UFNQMBUF OPUMJCSBSZ GPS.BQCPY(-+4 :PVDBOJNQMFNFOUBTDSPMMZUFMMJOHXJUIMJUUMFDPEJOH IUUQTHJUIVCDPNNBQCPYTUPSZUFMMJOH IUUQTXXXNBQCPYDPNCMPHIPXUPCVJMEBTDSPMMZUFMMJOHNBQ
$BTF4UVEZ 5PLBJEP4DSPMMZUFMMJOH
IUUQTTPSBNJEFWUPLBJEPTDSPMMZUFMMJOH
%BUB KBXJLJQFEJBPSHXJLJ౦ւಓޒेࡾ࣍@ ුੈֆ HJUIVCDPNKBQBOSPBEKQ(PLBPEP.BQ HJUIVCDPNTPSBNJUPLBJEPTDSPMMZUFMMJOH 1BJOUJOHT CZ6UBHBXB)JSPTIJHF 1VCMJDEPNBJO )PFJEPFEJUJPO 3PBET
lKBQBOSPBEKQ(PLBPEP.BQzEBUBTFU $$#:/$4" 4FBXBZIBOEESBXOJO2(*4 4UBUJPOT .BOVBMMZQSFQBSFEGSPN8JLJQFEJBBSUJDMF %FTDSJQUJPOGFUDIFEXJUI8JLJQFEJB"1* 1SFQSPDFTTJOHJO+VQZUFS/PUFCPPL
$PEF 4DSPMMBNB 4WFMUF 5PNBOBHFUIF6*DPNQPOFOUT .BQCPY(-+4 5IFNBQ 6OP$44 6UJMJUZGJSTU$44GSBNFXPSL 5VSGKT 5PDBMDVMBUFUIFEJSFDUJPOPGUIFOFYUTUBUJPO
BOETFUUIFDBNFSBBOHMF
None
$PEF%BUBQVCMJDMZBWBJMBCMF IUUQTHJUIVCDPNTPSBNJUPLBJEPTDSPMMZUFMMJOH
‣8FCIUUQTTPSBNJEFW ‣&NBJMIJ!TPSBNJEFW ‣.BTUPEPOTPSBNJ!WJTTPDJBM ‣9!TPSBNJ