Structure and Representation

Global Population Density 3D Bar-Chart Map

Thu, 08 Jan 2026 00:00:00 +0900

An interactive 3D map of worldwide population density data.

n1n9-jp.github.io

Global Population Density 3D Bar-Chart Map

n1n9-jp.github.io

Publication Date

January 11, 2025

Project Client

Personal project

Project Description

An interactive 3D map of worldwide population density data.

The full dataset is about 7 GB, but because only what is needed is fetched on demand from the backend, the map stays responsive.

Prefecture-Level Cartograms of Japan

Sat, 22 Nov 2025 00:00:00 +0900

A browser for uploading data and rendering it as prefecture-level cartograms of Japan.

n1n9-jp.github.io

Prefecture-Level Cartograms of Japan

n1n9-jp.github.io

Publication Date

November 22, 2025

Project Client

Personal project

Project Description

A cartogram tool — data is reflected in the area of each region on the map — that lets users upload various datasets at the Japanese-prefecture level for visualization.

A ranking mode is also available. It automatically computes ranks from 1 through 47 and colors them with a diverging palette centered on the 24th rank, visually producing a kind of above/below opposition around the median.

University of Tokyo Exhibition — The Potential of Urban Science: The Current State of Science and Technology in the City

Tue, 01 Mar 2022 00:00:00 +0900

Participated in the University of Tokyo New York Office event “The Potential of Urban Science: The Current State of Science and Technology in the City.”

Publication Date

March 1 – 13, 2022

Project Client

Associate Professor Yuji Yoshimura, Research Center for Advanced Science and Technology, the University of Tokyo

Project Description

From the official site:

“The development of technology and its penetration into daily life is making it possible to collect urban activity at an unprecedented granularity. Human behavior, which architects and planners once could only imagine in their heads, can now be analyzed as big data — making ‘architecture, urban planning, and city-making driven by data,’ which was previously impossible with just the eye and the hand, finally within reach. Through the projects on display, this exhibition looks at the city through the lens of ‘science.’ We hope visitors will sense the possibilities of this new field of Urban Sciences.”

“It asks how big data in cities — and its analysis, including with AI — can be leveraged for urban analysis, urban design, and architectural design. Precisely because we live in an era dominated by the web, we placed importance on the experience of ’things,’ on a sense of touch, and on the experience of space.”

Project Role

Exhibiting artist

[Urban Diversity in Tokyo]

Tama Art University Exhibition — Visible × Invisible: Big Data and the Next Generation of Information Representation

Fri, 28 Jan 2022 00:00:00 +0900

Participated in TUB’s 12th exhibition, “Visible × Invisible — Big Data and the Next Generation of Information Representation,” at Tama Art University’s TUB.

Publication Date

January 28 – February 12, 2022

Project Client

TUB (Tama Art University Bureau)

Project Description

From the official site:

“With the spread of the internet and advances in technology since the beginning of the 21st century, it has become possible to gather vast amounts of information. Today, the downsides are becoming apparent, and concerns about the impact on society are growing, with legal frameworks being developed in Europe and the US. ‘Big data’ gives us more information than humans can grasp on their own — but visualizing it can also help support social activity.

Data journalism, which developed through the 2010s, is perhaps the clearest example. The COVID-19 pandemic that began at the end of 2019 accelerated the shift from shoe-leather reporting to news analyzed from data. Collaboration with AI is also advancing. This exhibition presents the leading edge and current state of that kind of information visualization.”

Project Role

Exhibiting artist

Urban Diversity in Tokyo

Fri, 28 Jan 2022 00:00:00 +0900

A visualization of urban-science research that quantified the concept of “urban diversity” using the biological “species diversity index” and examined its economic impact on urban environments.

Publication Date

January 28, 2022

Project Client

Associate Professor Yuji Yoshimura, Research Center for Advanced Science and Technology, the University of Tokyo

Project Description

A web-based outreach piece built around research by Associate Professor Yuji Yoshimura’s group at the Research Center for Advanced Science and Technology, the University of Tokyo.

The research quantifies the concept of “urban diversity” using the biological “species diversity index” and examines its economic impact on urban environments; a positive correlation was found between areas of high urban diversity and retail and restaurant sales — a result likely to be widely cited in future work on urban science.

For the content, a 3D map was built from full building-footprint data across Tokyo, with the biodiversity index used as the thematic layer. The city can be explored in either autopilot or interactive modes.

Project Role

Art direction, coding, processing of building and thematic data for delivery.

[University of Tokyo Exhibition — The Potential of Urban Science: The Current State of Science and Technology in the City]
[Tama Art University Exhibition — Visible × Invisible: Big Data and the Next Generation of Information Representation]

NHK Special: Verifying the 77 Trillion Yen COVID-19 Budget (Companion Content)

Wed, 29 Dec 2021 00:00:00 +0900

Companion content to the NHK Special “Verifying the 77 Trillion Yen COVID-19 Budget,” visualizing the subset of administrative program review data that can be called the “COVID-19 budget” from a variety of angles.

Contents Links

Your “COVID-19 Budget”: verifying how 77 trillion yen was spent — NHK

Publication Date

December 29, 2021

Project Client

NHK (Japan Broadcasting Corporation)

Project Description

#1 By ministry and policy (stacked bar chart)

Shows the rough content of each program and the ministry in charge.

#2 What outcomes for what budgets? (slope chart)

Shows the budget size, the amount actually spent, and program activity outcomes.

#3 A “COVID-19 budget” before COVID-19? (beeswarm)

Shows the timing and duration of programs.

#4 The mystery of the 100%-achievement-rate (small multiples)

Shows the performance indicators and goal-achievement status used to evaluate programs.

#5 Where did the money go? (Sankey diagram)

Shows payees and payment amounts for each ministry that disbursed the budget.

Project Role

Art direction (partial), front-end coding (partial).

Judgit!

Wed, 10 Jul 2019 00:00:00 +0900

Co-developed a website that allows users to easily search national government programs and tax expenditures by keyword.

judgit.net

Judgit!

judgit.net

Contents Links

Publication Date

July 10, 2019

Project Client

Judgit! Project Team

Project Description

Judgit! is a website that lets users easily search national government programs and tax expenditures by keyword. It was co-developed with the policy think tank Koso Nippon, the NPO Waseda Chronicle (now Tansa), and the Onoue Yosuke Laboratory at Nihon University.

Project Role

Top page design; coding of the program search and chart search features.

Your Foreign Neighbors (Tokyo Edition)

Sat, 22 Jul 2017 00:00:00 +0900

tokyo-cartography.structure-and-representation.com

Your Foreign Neighbors (Tokyo Edition)

tokyo-cartography.structure-and-representation.com

Publication Date

July 22, 2017

Project Client

Personal project

Project Description

Driven by a personal curiosity — whether there is any geographic skew in where foreign residents of Tokyo come from by region of origin — I obtained population data of foreign residents in Tokyo and visualized it on a map. Population numbers are reflected in both color intensity and area, so that regional skew is intuitively grasped and the familiar map appears pleasingly distorted.

Project Role

Art direction, design, front-end coding, and data processing — all handled personally.

Cartogram for AERA Magazine

Mon, 20 Feb 2017 00:00:00 +0900

A cartogram visualization of “vote-value disparity” data, created for the magazine AERA.

Publication Date

February 20, 2017

Project Client

AERA

Project Description

Visualized “vote-value disparity” (ippyō no kakusa) data as a cartogram. Multiple algorithms were evaluated; data was processed in QGIS, rendered in D3.js, and finalized in Adobe Illustrator as print-ready artwork.

Project Role

Data processing, figure production, preparation of print-ready artwork.

Open Data Day Official Generative Logo

Tue, 14 Feb 2017 00:00:00 +0900

Designed the official generative logo for Open Data Day, an annual event held simultaneously in cities around the world to promote awareness and use of open data.

Contents Links

Publication Date

February 14, 2017

Project Client

Open Knowledge Japan

Project Description

Open Data Day is an annual event promoting awareness and use of open data, held simultaneously in cities around the world. In Japan, Open Knowledge Japan organizes it, with events in locations across the country.

The original request from Open Knowledge Japan was for a static logo for the event, but I proposed the concept and implementation of a dynamic logo instead. It was subsequently adopted officially and is now used for events held around the world.

As a tool, entering a city name generates a local logo with an original composition derived from the city’s name and latitude/longitude. The generated logo can be used for both print and web.

Project Role

Art direction, design, front-end coding, and data processing — all handled personally.

Voices of Nuclear Evacuees — NHK Fukushima Station Survey

Tue, 16 Feb 2016 00:00:00 +0900

A word cloud based on a survey of residents evacuated from Okuma, Futaba, Namie, and Tomioka — four towns within the Fukushima Daiichi evacuation zone.

nhk-wordcloud.structure-and-representation.com

Voices of Nuclear Evacuees — NHK Fukushima Station Survey

nhk-wordcloud.structure-and-representation.com

Publication Date

February 16, 2016

Project Client

NHK (Japan Broadcasting Corporation)

Project Description

Based on a survey conducted by NHK Fukushima station of residents evacuated from the four towns of Okuma, Futaba, Namie, and Tomioka within a 10 km radius of the nuclear plant, we created word clouds and designed a UI that allows users to get an overview of responses by attribute and drill down from any word of interest.

From the official site:

“The survey was conducted by NHK Fukushima station from November through December 2014, targeting 5,000 residents evacuated from the four towns of Okuma, Futaba, Namie, and Tomioka within a 10 km radius of the Fukushima Daiichi nuclear plant. 1,154 responses were collected.

A free-response section was placed at the end of the survey, asking about residents’ hopes and opinions regarding their future homes and their towns. Responses are published as faithfully as possible to the original, with punctuation added in places for readability. For the word cloud, word forms were standardized to NHK’s editorial conventions (e.g. 子供 → 子ども).”

Project Role

Design, coding, data processing.

A Pattern Language

Tue, 20 Jan 2015 00:00:00 +0900

Architect Christopher Alexander’s “A Pattern Language” — the connections between the patterns, expressed as a network.

Contents Links

Static image only.

Publication Date

February 27, 2018

Project Client

Personal project

Project Description

Built with D3.js.

A Visual Representation of the World Values Survey

Fri, 03 Jan 2014 00:00:00 +0900

Inspired by Akira Tachibana’s book “The Japanese,” this project visually represents Japan’s position within the World Values Survey.

wvs.structure-and-representation.com

A Visual Representation of the World Values Survey

wvs.structure-and-representation.com

Publication Date

February 20, 2015

Project Client

Personal project

Project Description

Inspired by Akira Tachibana’s book “The Japanese,” this project visually represents Japan’s position within the World Values Survey. For example, the two axes of the Inglehart–Welzel cultural map:

“Traditional” vs. “Secular”
“Survival” vs. “Self-expression”

The officially published Inglehart–Welzel map was only available as a hand-drawn illustration, so I rebuilt it as a data-driven, time-series visualization and considered Japan’s position within it.

Project Role

Art direction, design, front-end coding, and data processing — all handled personally.

reactive grid

Sat, 10 Jan 2026 00:00:00 +0900

An experiment to turn motion patterns for reactive grid motion design into a pattern language.

n1n9-jp.github.io

reactive grid

n1n9-jp.github.io

Publication Date

January 10, 2026

Project Client

Personal project

Project Description

Inspired by Yugo Nakamura’s “Nervous Matrix on Mona Lisa” and the Tokyo Dome City logo, this project explores a pattern language for motion design using a reactive grid.

COVID-19 Budget: Visualizing Central Government Payees

Fri, 28 Jan 2022 00:00:00 +0900

A network visualization of payees receiving funds from Japan’s central government ministries under the FY2020 “COVID-19 budget.”

COVID-19 Budget: Visualizing Central Government Payees

Publication Date

January 28, 2022

Project Client

Personal project

Project Description

Produced on my own initiative alongside the NHK Special “Verifying the 77 trillion yen COVID-19 Budget” companion content.

Exhibited at the Tama Art University exhibition “Visible × Invisible — Big Data and the Next Generation of Information Representation.”

As an exhibition piece, rather than examining each data point in detail, it is designed to convey a sense of the whole and its sheer scale when viewed from a distance.

Project Role

Art direction, design, front-end coding, and data processing — all handled personally.

Listed Company Directory

Sat, 25 Aug 2018 00:00:00 +0900

An explorable view of Japan’s publicly listed companies, by prefecture, industry classification, market segment, and fiscal year-end month.

Publication Date

August 25, 2018

Project Client

Personal project

Project Description

Data as of July 31, 2017.

Yahoo! Minna no Seiji — Is Important Information Getting Through? The Information Gap Today

Fri, 06 Oct 2017 00:00:00 +0900

A visualization, drawn from official statistics, of how different internet devices are adopted across generations.

Yahoo! Minna no Seiji — Is Important Information Getting Through? The Information Gap Today

Publication Date

October 6, 2017

Project Client

Yahoo Japan Corporation

Project Description

A piece produced through the “Social Issues Ideathon” organized by Yahoo! Minna no Seiji, timed with the lowering of Japan’s voting age to 18.

Titled “Is Important Information Getting Through? The Information Gap Today,” the piece visualizes, from statistical data, how different internet devices are adopted across generations. The rapid shifts in internet devices themselves made it difficult to maintain a consistent time-series.

The concept came from an idea presented by a high-school student group at the ideathon, which we then realized as this work.

Project Role

Design and coding.

Yahoo! Minna no Seiji — Visualizing Diet Members' Speaking Time

Fri, 06 Oct 2017 00:00:00 +0900

An explorable visualization of aggregate speaking time by Diet members during Japan’s 2015 ordinary Diet session.

Yahoo! Minna no Seiji — Visualizing Diet Members' Speaking Time

Publication Date

October 6, 2017

Project Client

Yahoo Japan Corporation

Project Description

A piece produced through the “Social Issues Ideathon” organized by Yahoo! Minna no Seiji, timed with the lowering of Japan’s voting age to 18.

Titled “Visualizing Diet Members’ Speaking Time — What do Diet members actually do in the Diet?”, it aggregates and presents speaking time during the 2015 ordinary Diet session in an explorable form.

The concept came from an idea presented by a middle-school student group at the Tankyu Gakusha ideathon, which we then realized as this work.

Project Role

Design and coding. Idea facilitation during the ideathon.

Black Black Corporations

Mon, 07 Aug 2017 00:00:00 +0900

An explorable search interface for the “List of Cases of Labor-Related Law Violations” published monthly by Japan’s Ministry of Health, Labour and Welfare.

Black Black Corporations

Publication Date

August 7, 2017 (Monday)

Project Client

Personal project

Project Description

Data was extracted from the PDF-format “List of Cases of Labor-Related Law Violations” published monthly by Japan’s Ministry of Health, Labour and Welfare, and stored in a database broken down by prefecture, year/month of publication, and law violated. Users can see the number of companies for a given region (e.g. Osaka), year/month (e.g. Heisei 29, March), or law (e.g. Industrial Safety and Health Act, Labor Standards Act) in a chart, or view the list of company names.

Because the data is raw and should not become something people can safely attack people over from behind a screen, the contrast is deliberately pushed to the edge of legibility, making it almost unreadable under normal conditions.

FY2016 Japanese Government Draft Budget — General Account

Mon, 25 Jul 2016 00:00:00 +0900

A relative-size visualization of Japan’s FY2016 general-account draft government budget, broken down by line item.

FY2016 Japanese Government Draft Budget — General Account

Publication Date

July 25, 2016

Project Client

Personal project

Project Description

A relative-size visualization of Japan’s FY2016 general-account draft government budget, broken down by line item. Uses a treemap, which simultaneously expresses relative magnitude and hierarchical structure.

Purple Music Browser

Wed, 15 Jun 2016 00:00:00 +0900

A browser for finding songs similar in BPM, key, and length across the catalog of musician Prince.

purple.structure-and-representation.com

Purple Music Browser

purple.structure-and-representation.com

Publication Date

June 15, 2016

Project Client

Personal project

Project Description

A browser limited to Prince’s studio-recorded, officially released, self-composed songs, letting you find similar songs by BPM, key, and length. You can find similar songs, the longest tracks, and newer tracks. Remix versions of earlier songs, live takes, and unreleased tracks are excluded.

Yokohama City — Population Transitions

Sun, 24 Apr 2016 00:00:00 +0900

An intuitive view of how Yokohama’s population has changed and is projected to change over the long period from 1955 to 2035, showing a population pyramid and a map side by side.

Yokohama City — Population Transitions

Publication Date

April 24, 2016

Project Client

Yokohama Community Design Lab

Project Description

Produced as contributed content for “LOCAL GOOD YOKOHAMA,” operated by the Yokohama Community Design Lab. An intuitive view of how Yokohama’s population has changed and is projected to change over the long period from 1955 to 2035, showing a population pyramid and a map side by side.

Comparing Prime Ministerial Statements

Tue, 26 Jan 2016 00:00:00 +0900

Prompted by the prime minister’s statement issued on a postwar anniversary, a word-cloud comparison of the Abe, Koizumi, and Murayama statements.

Comparing Prime Ministerial Statements

Publication Date

January 26, 2016

Project Client

Personal project

Project Description

Prompted by the prime minister’s statement issued on a postwar anniversary, a word-cloud comparison of the Abe statement (70th postwar anniversary), the Koizumi statement (60th), and the Murayama statement (50th).

Frequent terms were computed via morphological analysis and frequency counts using Python and MeCab, and rendered with D3.js. For the MeCab dictionary, mecab-ipadic-neologd was used.

Migration Flows Between Japan's Three Major Metropolitan Areas

Sat, 22 Aug 2015 00:00:00 +0900

Visualization of migration flows between Japan’s three major metropolitan areas as a network diagram.

Migration Flows Between Japan's Three Major Metropolitan Areas

Publication Date

August 22, 2015

Project Client

Personal project

Project Description

To intuitively grasp population movement within Japan — which is usually visualized as a map or a table — I adopted an arc diagram to represent the data as a network. For each of the three major metropolitan areas, selecting a from/to origin filters the data on the fly.

Project Role

Art direction, design, front-end coding, and data processing — all handled personally.

d3.js — Random Value Generator

Tue, 20 Jan 2015 00:00:00 +0900

A side-by-side viewer for the random-number generators implemented in D3.js, applied to changes in size, direction, and color.

structure-and-representation.com

d3.js — Random Value Generator

A side-by-side viewer for the random-number generators implemented in D3.js, applied to changes in size, direction, and color.

Publication Date

January 20, 2015

Project Client

Personal project

Project Description

A side-by-side viewer for the random-number generators implemented in D3.js, applied to changes in size, direction, and color.

Household Budgets and Prices, at a Touch

Sun, 11 Jan 2015 00:00:00 +0900

After Japan’s consumption tax rose from 5% to 8%, did it affect wages, prices, and household spending?

Household Budgets and Prices, at a Touch

Publication Date

January 11, 2015

Project Client

NHK (Japan Broadcasting Corporation)

Project Description

Produced as news content for NHK. After Japan’s consumption tax rose from 5% to 8%, did it affect wages, prices, and household spending? Titled “Household Budgets and Prices, at a Touch,” it presents the data with restrained animation. Best viewed on a desktop.

Source data:

Wage data: Monthly Labour Survey (Ministry of Health, Labour and Welfare)
Price data: Consumer Price Index (Ministry of Internal Affairs and Communications); Nissay Basic Research Institute
Spending data: Family Income and Expenditure Survey (Statistics Bureau, Ministry of Internal Affairs and Communications)

iPhone 5S: Carrier Connection-Speed Comparison

Fri, 20 Sep 2013 00:00:00 +0900

When all three Japanese carriers started offering the iPhone for the first time in 2013, I visualized and compared the actual connection quality of each carrier on a map.

n1n9-jp.github.io

iPhone 5S: Carrier Connection-Speed Comparison

n1n9-jp.github.io

Publication Date

September 20, 2013

Project Client

Personal project

Project Description

The iPhone 5S launched on September 20. With all three carriers carrying the iPhone for the first time, which carrier would actually connect best — alongside the pricing plans — became a widely shared concern. Media outlets ran speed tests on launch day and I referred to them, but the results were published only as tables of numbers, which are neither intuitive nor easy to combine across sources to see any pattern. That was the motivation to try visualizing them.

About Yuichi Yazaki

Mon, 01 Jan 0001 00:00:00 +0000

Yuichi Yazaki (矢崎裕一) is a data visualization specialist and founder of Notation LLC. After seven years as a UI designer and art director at Business Architects, Inc., he became independent and has been active in the practice and promotion of data visualization through corporate training, university teaching, community building, and publishing.

He is the author of The Complete Guide to the Fundamentals of Data Visualization (ja: データ可視化の基本が全部わかる本) and co-author of The RESAS Textbook (Nikkei BP, 2016). He holds a Master’s degree in Design Science from Chiba Institute of Technology. He is the founder of Data Visualization Japan and a Yahoo! News Expert.

Activities

Corporate Training: Data visualization workshops for Japanese enterprises
University Teaching: Tama Art University, Musashino Art University, Digital Hollywood University Graduate School, Nihon University, Bunkyo University, Tokyo City University
Writing: Book author, technical blog at Visualizing.JP
Tools: dataviz.jp — a collection of practical tools for data visualization work
Lectures: data-viz-lectures.com — online courses on data visualization

Contact

For inquiries regarding corporate training, speaking engagements, or collaboration, please reach out to info@notation.co.jp.

Structure and Representation

Global Population Density 3D Bar-Chart Map

Publication Date

Project Client

Project Description

Prefecture-Level Cartograms of Japan

Publication Date

Project Client

Project Description

University of Tokyo Exhibition — The Potential of Urban Science: The Current State of Science and Technology in the City

Publication Date

Project Client

Project Description

Project Role

Related Links

Tama Art University Exhibition — Visible × Invisible: Big Data and the Next Generation of Information Representation

Publication Date

Project Client

Project Description

Project Role

Related Links

Urban Diversity in Tokyo

Publication Date

Project Client

Project Description

Project Role

Related Links

NHK Special: Verifying the 77 Trillion Yen COVID-19 Budget (Companion Content)

Contents Links

Publication Date

Project Client

Project Description

#1 By ministry and policy (stacked bar chart)

#2 What outcomes for what budgets? (slope chart)

#3 A “COVID-19 budget” before COVID-19? (beeswarm)

#4 The mystery of the 100%-achievement-rate (small multiples)

#5 Where did the money go? (Sankey diagram)

Project Role

Related Links

Judgit!

Contents Links

Publication Date

Project Client

Project Description

Project Role

Related Links

Your Foreign Neighbors (Tokyo Edition)

Publication Date

Project Client

Project Description

Project Role

Cartogram for AERA Magazine

Publication Date

Project Client

Project Description

Project Role

Open Data Day Official Generative Logo

Contents Links

Publication Date

Project Client

Project Description

Project Role

Voices of Nuclear Evacuees — NHK Fukushima Station Survey

Publication Date

Project Client

Project Description

Project Role

A Pattern Language

Contents Links

Publication Date

Project Client

Project Description

A Visual Representation of the World Values Survey

Publication Date

Project Client

Project Description

Project Role

reactive grid

Publication Date

Project Client