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 Shiromizu
September 13, 2024
Programming
260
1
Share
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 Shiromizu
September 13, 2024
More Decks by Sorami Shiromizu
See All by Sorami Shiromizu
オープンソースとビジネス: 位置情報の世界からみえる流れ / 札幌IT石狩鍋#2
sorami
1
630
How I Got Here - NLP, Geospatial, and beyond / NAIST NLP
sorami
1
250
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
250
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
350
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297
sorami
3
360
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
2.6k
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
1.4k
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
1.8k
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
1.7k
Other Decks in Programming
See All in Programming
色即是空、空即是色、データサイエンス
kamoneggi
1
210
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
12
3.3k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
490
Inspired By RubyKaigi (EN)
atzzcokek
0
430
1人1案件のプロダクトエンジニア時代に、"プロセス監督"としてチャレンジしたこと
non0113
0
350
Zod v4 Codec でスキーマに型変換を埋め込む REST API 設計 #TSKaigi2026
ryutaro_yako
0
170
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
kentaroutakeda
1
310
Talking to terminals (and how they talk back) (KotlinConf 2026)
jakewharton
PRO
1
160
CSC307 Lecture 17
javiergs
PRO
0
270
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
170
Transactional Change Stream Processing With Debezium and Apache Flink
gunnarmorling
1
140
ECR拡張スキャンでSBOMを収集して サプライチェーン攻撃の影響調査を 爆速で終わらせてみた
akihisaikeda
2
210
Featured
See All Featured
Darren the Foodie - Storyboard
khoart
PRO
3
3.4k
ラッコキーワード サービス紹介資料
rakko
1
3.5M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Claude Code のすすめ
schroneko
67
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.1k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
590
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
The World Runs on Bad Software
bkeepers
PRO
72
12k
So, you think you're a good person
axbom
PRO
2
2k
Building Applications with DynamoDB
mza
96
7.1k
Site-Speed That Sticks
csswizardry
13
1.2k
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