Posts on 構造と表現

人口密度 3D棒グラフマップ

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

全世界分の人口密度データをインタラクティブ3D地図化。

n1n9-jp.github.io

人口密度 3D棒グラフマップ

n1n9-jp.github.io

Publication Date

2025年1月11日

Project Client

自主制作

Project Description

全世界分の人口密度データをインタラクティブ3D地図化。

データサイズは全体で7GBと巨大ですが、バックエンドから必要なだけを都度読み出しているので動作は軽快です。

都道府県カルトグラム

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

全世界分の人口密度データをインタラクティブ3D地図化。

n1n9-jp.github.io

都道府県カルトグラム

n1n9-jp.github.io

Publication Date

2025年11月22日

Project Client

自主制作

Project Description

データを地図の面積に反映させるカルトグラムという手法を用いて、日本の各都道府県別に、さまざまなデータをアップロードして利用可能。

ランキングモードも整備しています。自動的に1位〜47位を算出して分岐的カラーで着色することで、24位を基準としたある種の対立構造を色で作り出してくれます。

東京大学展示アーバン・サイエンスの可能性：都市の科学と技術の現在地

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

東京大学ニューヨークオフィスイベント「アーバン・サイエンスの可能性：都市の科学と技術の現在地」へ出展しました。

Publication Date

2022年3月1日〜 3月13日

Project Client

東京大学先端科学技術研究センター　吉村有司特任准教授

Project Description

公式サイトからの引用

『テクノロジーの発展と日常生活への浸透は、都市空間におけるわれわれの諸活動をいまだかつてない粒度で収集することを可能にしつつある。これまでは建築家やプランナーが頭のなかで想像するしかなかった人々の振る舞いが、ビッグデータとして解析され、人の目や手だけに頼っていては絶対に不可能だった「データを用いた建築、都市計画、まちづくり」が始まろうとしている。本展覧会では我々が取り組んでいるプロジェクトの紹介をとおして、都市を「科学」という視点から眺めてみる。 Urban Sciencesという新しい領域の可能性を感じてもらいたい。』

「都市におけるビッグデータとその解析さらには人工知能（AI）などを都市分析や都市デザイン、建築デザインに如何にして活用していくのかを考えるものです。ウェブ全盛の時代だからこそ、「モノ」を通した体験、手触り感、空間体験などを大切にしました。」

Project Role

出展作家

[東京の都市多様性]

多摩美術大学展示 Visible x Invisible ──ビッグデータと次世代の情報表現

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

多摩美術大学 TUBにて、TUB第12回企画展「Visible x Invisible ──ビッグデータと次世代の情報表現」と題した企画展に参加しました。

Publication Date

2022年1月28日〜 2月12日

Project Client

TUB（Tama Art University Bureau）

Project Description

公式サイトからの引用

「21世紀に入り、インターネットの普及と技術の発達により大量の情報を集めることが可能になった。現在ではその弊害も明らかになり、社会に及ぼす影響が心配され、欧米では法整備も進んでいる。そういったいわゆるビッグデータは人間が理解できる以上の情報を我われに与えるが、それを視覚的に表現（visualize）することで、社会活動の一助になることも確かである。

2010年代に発達したデータジャーナリズムは、そのもっともわかりやすい事例だろう。一昨年末から始まったCovid-19によるパンデミックは、足で稼ぐ情報からデータによって解析するニュースへのシフトを加速させた。また、AIとの協働も進んでいる。本展では、そういった情報可視化の先端と現状を提示する。」

Project Role

出展作家

東京の都市多様性

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

都市多様性の概念を生物学における「種の多様性指数」を用いて定量化し、都市環境への経済的な影響を検証した、アーバン・サイエンスの研究を可視化しました。

Publication Date

2022年1月28日

Project Client

東京大学先端科学技術研究センター　吉村有司特任准教授

Project Description

東京大学先端科学技術研究センターの吉村有司特任准教授らのグループによる研究成果のアウトリーチをWeb技術を用いてコンテンツ化しました。

研究の内容は、都市多様性の概念を生物学における「種の多様性指数」を用いて定量化し、都市環境への経済的な影響を検証した結果、都市多様性が高いエリアでは小売店・飲食店の売り上げが向上するという相関関係が見られた、という今後のアーバン・サイエンスにおいて大いに参照されそうな内容です。

コンテンツ化に際しては、東京都内の全建物データによって3D地図を作り、生物多様性指数をテーマデータとして可視化しました。オートパイロット及びインタラクティブの各モードにて、都内を探索することが可能です。

Project Role

アートディレクション／コーディング／建物データ及びテーマデータの配信用加工

[東京大学展示アーバン・サイエンスの可能性：都市の科学と技術の現在地]
[多摩美術大学展示 Visible x Invisible ──ビッグデータと次世代の情報表現]

NHKスペシャル「検証コロナ予算77兆円」連動コンテンツ

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

NHKスペシャル「検証コロナ予算77兆円」連動コンテンツとして、行政事業レビューデータのうち「コロナ予算」と呼べるデータを様々な切り口で可視化しました。

Contents Links

あなたの「コロナ予算」かかった費用77兆円の使い道をデータで検証 - NHK

Publication Date

2021年12月29日

Project Client

NHK（日本放送協会）

Project Description

#1 省庁や政策で見ると（積み重ね棒グラフ）

事業のおおまかな内容と担当省庁がわかります。

#2 予算規模に応じた成果は？（スロープグラフ）

予算規模、実際に支出された金額や事業としての活動実績がわかります。

#3 コロナよりも以前に“コロナ予算”？（ビースォーム）

事業の実施時期・期間がわかります。

#4 目標達成率100％のナゾ（スモール・マルティプルズ）

事業の成果を検証する指標と目標の達成状況がわかります。

#5 その予算どこの企業へ？（サンキー・ダイアグラム）

予算を支出した省庁ごとに、その支出先と支出額がわかります。

Project Role

アートディレクション（一部）／フロントエンド・コーディング（一部）

Judgit!

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

国の事業や税金の使われ方などを、キーワードで簡単に調べられるWebサイトを共同で開発しました。

judgit.net

Judgit!

judgit.net

Contents Links

Publication Date

2019年7月10日

Project Client

Judgit!プロジェクトチーム

Project Description

国の事業や税金の使われ方などを、キーワードで簡単に調べられるWebサイトを、政策シンクタンク構想日本、特定非営利活動法人ワセダクロニクル（当時。現在はTansa）、日本大学尾上洋介研究室と共同で開発しました。

Project Role

トップページデザイン／行政事業検索・グラフで検索のコーディング

あなたの隣の外国人（東京編）

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

東京在住の外国人の、出身エリアによる偏りがあるのかどうか、という個人的な疑問から、東京都内の外国人の人口データを取得し、それを地図上に可視化しました。

tokyo-cartography.structure-and-representation.com

あなたの隣の外国人（東京編）

tokyo-cartography.structure-and-representation.com

Publication Date

2017年7月22日

Project Client

自主制作

Project Description

東京在住の外国人の、出身エリアによる偏りがあるのかどうか、という個人的な疑問から、東京都内の外国人の人口データを取得し、それを地図上に可視化しました。人数の多さを色の濃さと地域の面積に反映させたことで、地域的な偏りを直感的につかみ、見慣れた地図が歪む面白さを感じていただければと思います。

Project Role

アートディレクション／デザイン／フロントエンド・コーディング／データ加工のすべて

雑誌AERA用カルトグラム

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

雑誌AERA用に、一票の格差のデータをカルトグラムで表示しました。

Publication Date

2017年2月20日

Project Client

AERA

Project Description

一票の格差のデータをカルトグラムで表示しました。複数のアルゴリズムで検証し、QGISでデータ加工、D3.jsでレンダリング、adobe Illustratorで印刷用入稿データ化しました。

Project Role

データ加工／図版制作／印刷用入稿データ化。

Open Data Day 公式ジェネラティブ・ロゴ

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

オープンデータの認知と使用促進を目的に年に一度、世界中で同時に開催されるイベントの公式のジェネラティブ・ロゴを制作しました。

Contents Links

Publication Date

2017年2月14日

Project Client

オープン・ナレッジ・ジャパン

Project Description

オープンデータの認知と使用促進を目的に年に一度開催されるイベントで、開催都市は世界中に広がっています。日本では「オープン・ナレッジ・ジャパン」が音頭を取り、日本各地で開催されています。

オープン・ナレッジ・ジャパンより依頼を受けて、イベント用の静止画としてのロゴの依頼でしたが、動的なロゴのコンセプトと実装を提案しました。その後、公式に採用され、世界各国でのイベント開催に利用されています。

ツールとしては、都市名を入力すると、その名称と緯度経度をもとに、オリジナルのコンポジションを持つローカル・ロゴが生成されます。印刷用・Web用どちらにも利用していただけます。

Project Role

アートディレクション／デザイン／フロントエンド・コーディング／データ加工のすべて

原発事故避難者の声〜NHK福島放送局アンケート〜

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

大熊町、双葉町、浪江町、富岡町の４つの町から県の内外に避難している住民を対象に行ったアンケートをもとに、ワードクラウドを作成。

nhk-wordcloud.structure-and-representation.com

原発事故避難者の声〜NHK福島放送局アンケート〜

nhk-wordcloud.structure-and-representation.com

Publication Date

2016年2月16日

Project Client

NHK（日本放送協会）

Project Description

NHK福島放送局が大熊町、双葉町、浪江町、富岡町の４つの町から県の内外に避難している住民を対象に行ったアンケートをもとに、ワードクラウドを作成し、属性ごとに、回答を概観でき、興味をもった単語から深掘りできるようなユーザーインターフェイスを目指しました。

公式サイトの説明

『アンケートは、ＮＨＫ福島放送局が２０１４年１１月～１２月にかけて、原発から半径１０キロ圏内にある大熊町、双葉町、浪江町、富岡町の４つの町から県の内外に避難している住民５０００人を対象に行い、１１５４人から回答を得ました。

自由記述欄はアンケートの末尾に設けられ、将来の住まいや町の姿に関する要望や意見を伺いました。できるかぎり原文に忠実に掲載していますが、一部には、読みやすいように句読点を付け加えています。また、ワードクラウドを制作するにあたって、単語表記はＮＨＫの基準に合わせました。（例）「子供」→「子ども」』

Project Role

デザイン、コーディング、データの加工。

パターン・ランゲージ

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

建築家クリストファー・アレグザンダーが提唱したパターン・ランゲージ。そのパターン同士のつながりをネットワークとして表現しました。

Contents Links

静止画のみです。

Publication Date

2018年2月27日

Project Client

自主制作

Project Description

D3.jsで制作しています。

「世界価値観調査」の視覚的表現

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

橘玲氏の著書（日本人）にインスパイアされて「世界価値観調査」における日本の位置付けを視覚的に表現しました。

wvs.structure-and-representation.com

「世界価値観調査」の視覚的表現

wvs.structure-and-representation.com

Publication Date

2015年2月20日

Project Client

自主制作

Project Description

橘玲氏の著書（日本人）にインスパイアされて「世界価値観調査」における日本の位置付けを視覚的に表現しました。たとえば以下の二軸

「伝統」vs「世俗」
「生存」vs「自己表現」

をとる「イングルハート-ヴェルツェル図」について、公式には手書きのイラストのみが提示されていたので、データドリブン、かつ時系列に可視化して表現しつつ、日本の位置付けについて、考察しました。

Project Role

アートディレクション／デザイン／フロントエンド・コーディング／データ加工のすべて

reactive grid

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

リアクティブなグリッドのモーションデザインのために、モーション種別をパターンランゲージ化を試みています。

n1n9-jp.github.io

reactive grid

n1n9-jp.github.io

Publication Date

2026年01月10日

Project Client

自主制作

Project Description

中村勇吾さんの “Nervous Matrix on Mona Lisa"や東京ドームシティのロゴに影響を受け、リアクティブなグリッドのモーションデザインのために、モーション種別をパターンランゲージ化を試みています。

コロナ予算中央省庁取引先の可視化

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

国家予算のうち2020年度「コロナ予算」について、中央省庁からの支払先をネットワーク可視化しました。

コロナ予算中央省庁取引先の可視化

Publication Date

2022年1月28日

Project Client

自主制作

Project Description

[NHKスペシャル「検証コロナ予算77兆円」連動コンテンツ]の制作時に、自主的に制作したものです。

[多摩美術大学展示 Visible x Invisible ──ビッグデータと次世代の情報表現]にて展示しました。

展示用ということで、一つひとつのデータを詳細に見るというよりは、距離のある場所から全体を眺めた際に、全体感と迫力が伝わればという思いで制作しました。

Project Role

アートディレクション／デザイン／フロントエンド・コーディング／データ加工のすべて

上場会社一覧

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

上場会社を都道府県別、業種分類別、市場区分別、決算月別から探索できるようにしました。

Publication Date

2018年8月25日

Project Client

自主制作

Project Description

データは2017年7月31日現在。

Yahoo!みんなの政治ビジュアルでみる国会議員の発言数

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

平成27年（2015年）の通常国会における、国会議員の発言時間を集計し、探索的に可視化できるようにしたものです。

Yahoo!みんなの政治ビジュアルでみる国会議員の発言数

Publication Date

2017年10月6日

Project Client

ヤフー株式会社

Project Description

選挙権が満18年以上へと引き下げられたタイミングで、Yahoo!みんなの政治が企画・運営した「社会課題アイデアソン」によって生まれた作品。

本作品は「ビジュアルでみる国会議員の発言数国会議員は国会で何をしているの？」と題して、平成27年（2015年）の通常国会における、国会議員の発言時間を集計し、探索的に可視化できるようにしたものです。

着想として、探究学舎でのアイデアソンにおいて、中学生グループの発表したアイデアを実現する形で作成しました。

Project Role

デザイン＆コーディング。アイデアソン時のアイデア・ファシリテーション。

Yahoo!みんなの政治大事な情報が届かない？情報格差のいま

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

様々なインターネット・デバイスが世代間でどのくらい普及しているのかを、統計データから可視化しました。

Yahoo!みんなの政治大事な情報が届かない？情報格差のいま

Publication Date

2017年10月6日

Project Client

ヤフー株式会社

Project Description

選挙権が満18年以上へと引き下げられたタイミングで、Yahoo!みんなの政治が企画・運営した「社会課題アイデアソン」によって生まれた作品。

本作品は「大事な情報が届かない？情報格差のいま」と題して、様々なインターネット・デバイスが世代間でどのくらい普及しているのかを、統計データから可視化しました。インターネット・デバイスの移り変わり自体が激しく、時系列で見た際の一貫性が保ち難いのが苦労した点です。

着想として、アイデアソンにおいて、高校生グループの発表したアイデアを実現する形で作成しました。

Project Role

デザイン＆コーディング。

ブラック・ブラック企業

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

厚生労働省が月に一度公表する「労働基準関係法令違反に係る公表事案」を探索的に検索できるようにしました。

ブラック・ブラック企業

Publication Date

2017年8月7日(月)

Project Client

自主制作

Project Description

厚生労働省が月に一度公表する「労働基準関係法令違反に係る公表事案」のPDF形式のリストからデータを抽出し、都道府県や公表年月、違反法条別にデータベース化。「大阪府」などの地域や「平成29年」「3月」など公表年月、「労働安全衛生法」「労働基準法」など違反法条別に、対象の企業数をグラフで表示したり、企業名を一覧で見ることも出来ます。

データが生々しく、安心してネット越しに攻撃できるようなものであってはならないとの考えから、あえてコントラストをギリギリまで落として、通常ではほとんど可読できないようにしています。

平成28年度予算政府案一般会計

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

平成28年度一般会計の予算政府案について、予算案の項目ごとの金額の大きさを相対的に表現しました。

平成28年度予算政府案一般会計

Publication Date

2016年7月25日

Project Client

自主制作

Project Description

平成28年度一般会計の予算政府案について、予算案の項目ごとの金額の大きさを相対的に表現しました。相対的な大きさと階層構造を同時に示すことが出来るツリーマップという手法を用いています。

Purple Music Browser

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

ミュージシャンPrinceの楽曲を、BPM・キー・時間などから似た曲を探すことが出来るブラウザーです。

purple.structure-and-representation.com

Purple Music Browser

purple.structure-and-representation.com

Publication Date

2016年6月15日

Project Client

自主制作

Project Description

ミュージシャンPrinceの楽曲のうち、スタジオ録音され、公式にリリースされ、彼自身が作曲した曲のみを取り上げ、BPM・キー・時間などから似た曲を探すことが出来るブラウザーです。似ている曲、最も長い曲、新しい曲を見つけることができます。過去曲のリミックスバージョン、ライブテイク、未発表曲は除きます。

横浜市人口の遷移

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

1955年〜2035年までの長い期間で、横浜市の人口がどう推移するかを、人口ピラミッドと地図を同時に表示することで、直感的に理解できるようにしました。

横浜市人口の遷移

Publication Date

2016年4月24日

Project Client

横浜コミュニティデザイン・ラボ

Project Description

横浜コミュニティデザイン・ラボが運営する「LOCAL GOOD YOKOHAMA」への寄稿コンテンツとして制作しました。 1955年〜2035年までの長い期間で、横浜市の人口がどう推移するかを、人口ピラミッドと地図を同時に表示することで、直感的に理解できるようにしました。

内閣総理大臣談話の比較

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

終戦後の節目となる年に発表された総理談話を契機に、安倍談話、小泉談話、村山談話をワードクラウド形式で比較しました。

内閣総理大臣談話の比較

Publication Date

2016年1月26日

Project Client

自主制作

Project Description

終戦後の節目となる年に発表された総理談話を契機に、安倍談話（戦後70年）、小泉談話（戦後60年）、村山談話（戦後50年）をワードクラウド形式で比較しました。

頻出する単語は、PythonとMecabで形態素解析+頻出語計算し、d3.jsで描画。MeCab用の辞書には mecab-ipadic-neologd を利用しました。

三大都市圏の人の流れ

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

三大都市圏の人の移動をネットワークデータとして可視化しました。

三大都市圏の人の流れ

Publication Date

2015年8月22日

Project Client

自主制作

Project Description

日本国内における人の移動を直感的に掴むことを目的に、たいていは地図か表として可視化することが多いところを、アーク・ダイアグラムを用いてネットワークデータとして可視化しました。三大都市圏について、from/toの指定をすることで、データがその場でフィルタリングされます。

Project Role

アートディレクション／デザイン／フロントエンド・コーディング／データ加工のすべて

d3.js - random value generator

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

d3.jsに実装しているランダム関数の違いを示すために、大きさ、方向、色の変化へ適用して、比較できるようにしました。

structure-and-representation.com

d3.js - random value generator

d3.jsに実装しているランダム関数の違いを示すために、大きさ、方向、色の変化へ適用して、比較できるようにしました。

Publication Date

2015年1月20日

Project Client

自主制作

Project Description

d3.jsに実装しているランダム関数の違いを示すために、大きさ、方向、色の変化へ適用して、比較できるようにしました。

さわってわかる家計と物価

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

消費税が5%から8%へ上がったことで、賃金、物価、家計の消費に影響はあったのか。

さわってわかる家計と物価

Publication Date

2015年1月11日

Project Client

NHK（日本放送協会）

Project Description

NHKの報道コンテンツとして制作しました。消費税が5%から8%へ上がったことで、賃金、物価、家計の消費に影響はあったのか。「さわってわかる家計と物価」と題して、控えめなアニメーションと共に提示しています。 ※パソコンでご覧ください。

出典データは以下のとおりです。

賃金データ：毎月勤労統計調査（厚生労働省）
物価データ：消費者物価指数（総務省）、ニッセイ基礎研究所
消費データ：家計調査（総務省・統計局）

iPhone5S キャリア別通信スピード比較

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

2013年に初めて3キャリアすべてがiPhoneを扱い、実際どこのキャリアがつながりやすいのか?を地図上へ可視化し比較しました。

n1n9-jp.github.io

iPhone5S キャリア別通信スピード比較

n1n9-jp.github.io

Publication Date

2013年9月20日

Project Client

自主制作

Project Description

先日（9月20日）iPhone5Sが発売になりました。3キャリアすべてがiPhoneを扱うということで、料金プランと共に実際どこのキャリアがつながりやすいのか?ということが関心にのぼりますよね。発売日のタイミングでも各メディアが速度調査をしており、参考にしていたのですが、数字による表組のみの掲載なので直感的にわかりづらく、また色んなメディアでの調査を合わせてみると何か傾向が観てとれるのかどうなのかがわかりません。これを可視化してみようというのが本ページ作成の動機です。

Posts on 構造と表現

人口密度 3D棒グラフマップ

Publication Date

Project Client

Project Description

都道府県カルトグラム

Publication Date

Project Client

Project Description

東京大学展示 アーバン・サイエンスの可能性：都市の科学と技術の現在地

Publication Date

Project Client

Project Description

Project Role

Related Links

多摩美術大学展示 Visible x Invisible ──ビッグデータと次世代の情報表現

Publication Date

Project Client

Project Description

Project Role

Related Links

東京の都市多様性

Publication Date

Project Client

Project Description

Project Role

Related Links

NHKスペシャル「検証 コロナ予算77兆円」連動コンテンツ

Contents Links

Publication Date

Project Client

Project Description

#1 省庁や政策で見ると（積み重ね棒グラフ）

#2 予算規模に応じた成果は？（スロープグラフ）

#3 コロナよりも以前に“コロナ予算”？（ビースォーム）

#4 目標達成率100％のナゾ（スモール・マルティプルズ）

#5 その予算 どこの企業へ？（サンキー・ダイアグラム）

Project Role

Related Links

Judgit!

Contents Links

Publication Date

Project Client

Project Description

Project Role

Related Links

あなたの隣の外国人（東京編）

Publication Date

Project Client

Project Description

Project Role

雑誌AERA用カルトグラム

Publication Date

Project Client

Project Description

Project Role

Open Data Day 公式ジェネラティブ・ロゴ

Contents Links

Publication Date

Project Client

Project Description

Project Role

原発事故 避難者の声〜NHK福島放送局アンケート〜

Publication Date

Project Client

Project Description

Project Role

パターン・ランゲージ

Contents Links

Publication Date

Project Client

Project Description

「世界価値観調査」の視覚的表現

Publication Date

Project Client

Project Description

Project Role

reactive grid

Publication Date

Project Client

東京大学展示アーバン・サイエンスの可能性：都市の科学と技術の現在地

NHKスペシャル「検証コロナ予算77兆円」連動コンテンツ

#5 その予算どこの企業へ？（サンキー・ダイアグラム）

原発事故避難者の声〜NHK福島放送局アンケート〜

コロナ予算中央省庁取引先の可視化

上場会社一覧

Yahoo!みんなの政治ビジュアルでみる国会議員の発言数

Yahoo!みんなの政治大事な情報が届かない？情報格差のいま

平成28年度予算政府案一般会計

横浜市人口の遷移