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
91
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
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
62
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
97
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297
sorami
3
150
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.5k
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
960
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
sorami
3
1k
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
1k
AIST 3DDB Client: an open-source web application for the 3D database / FOSS4G ASIA 2023
sorami
1
610
数々の多様性
sorami
2
680
Other Decks in Programming
See All in Programming
ミリしらMCP勉強会
watany
4
620
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
270
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
130
ノーコードツールの裏側につきまとう「20分岐」との戦い
oguemon
0
110
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
880
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.2k
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7k
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
5
1.5k
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
1k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
700
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Building Adaptive Systems
keathley
41
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Practical Orchestrator
shlominoach
186
10k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Docker and Python
trallard
44
3.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
A designer walks into a library…
pauljervisheath
205
24k
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