ニューヨーク・タイムズやOpenStreetMapなど、さまざまなウェブサイトで利用されているデータ可視化ライブラリが「D3.js」です。そんなD3.jsの開発10周年を記念して、開発者のマイク・ボストック氏が「D3.jsを10年間開発する中で学んだこと」を公開しています。 10 Years of Open-Source Visualization / Mike Bostock / Observable https://observablehq.com/@mbostock/10-years-of-open-source-visualization ◆「使用例」がツールの普及に役立つ ボストック氏によると、新たに開発されたツールは、開発者以外の人々にとっては異質なモノであるとのこと。そのため、ツールを普及させるには「ドキュメント」「チュートリアル」「使用例」などを準備する必要があります。 ボ
マンガでわかるHCI: 公衆衛生とデータ可視化の歴史｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）
さて、世界は今コロナ一色ですね。 日本では少し落ち着きを取り戻してきたみたいですが、アメリカでは - 大統領は、コロナをChinese Virusと呼び出したり - 若者たちはオレたちゃ重症化しねぇとフロリダのビーチに押しかけたり - 暴動が起こると予想して、身の危険を感じる人々が銃を買い求めたり といった、なかなかカオスなことになってます。笑 ちなみに、著者はアメリカのPhD学生で、現在アメリカに住んでます。この夏は、シアトルのMicrosfot Researchにインターンに行く予定だったんですが、ボーイングがチャプター11して、シアトルの街が失業者に溢れかえるんじゃないかと若干心配してました。なんとかそこは免れたようですが、ただ逆に、インターン自体がリモートになりそうな勢いですが。笑さて、今回は、そんな公衆衛生に少し関連した話です。 公衆衛生とデータ・ビジュアライゼーションところで、
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
OMUSUBI
おむすび の検索結果 キーワードマップのノードかエッジをダブルクリックすると、 Web検索の結果が表示されます。
Using React with D3.js
React.js is a JavaScript library that helps with building complex user interfaces. This website is written using React! I would recommend being familiar with React for this article. It might be worth running through the official tutorial or running through a book (I've heard good things about this one) to make sure you don't stumble on anything in here!
はじめに 私はもともとネットワークとかインフラ系の話をやっている人で、ソフトウェア開発はやっていなかったのですが、この 1 年くらいで D3.js とか Vue.js とかを触るようになりました。この記事では、私の体験をもとに、フロントエンド技術が主業務ではない人 (私のようなIT基盤系エンジニアなど) 向けに、D3.js をつかったデータ可視化をする際の考え方をお伝えしたいと思います。プログラミングのノウハウというよりは、プログラミングをする前に知っておくべきこと・考えておくべきこと、みたいな形になるので、個人差があるとは思いますが、まあ参考程度に。 D3.js を始める前に [2019/9月時点情報] D3.js は v3 と v4/v5 の間に大きな変更が入っています。 d3/CHANGES.md をみてもらえるとわかると思うのですが、v4 (2016/6) の変更箇所の多さよ……。
by Amelia Wattenberger on June 4th, 2019 Learn how to visualize data with Fullstack D3 and Data Visualization You did it! You grabbed a data set and visualized it, right here in the browser. Congratulations, that is no easy feat!
Learn D3: Introduction
This series of notebooks will guide you through your first steps with D3.js. Before we embark, it’s worth briefly considering: Why bother learning D3? And why learn here in Observable? For one, D3 is popular (200M downloads and 100K stars), so you’re in good company. There are plenty of community-developed resources, including tutorials, videos, classes, and books. And the D3 team has published hu
An Introduction to D3.js
So, you want to create amazing data visualizations on the web and you keep hearing about D3.js. But what is D3.js, and how can you learn it? Let’s start with the question: What is D3? While it might seem like D3.js is an all-encompassing framework, it’s really just a collection of small modules. Here are all of the modules: each is visualized as a circle - larger circles are modules with larger fi
D3.jsを使ってデータをビジュアライズしよう
D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。 グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。 今回はD3.jsで折れ線グラフ（Line Chart）を描画してみる | Will Style Inc.｜神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。 インストール インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。 <script src="https://d3js.org/d3.v5.min.js"></script> HTML側での準備 HTMLは body タグ内に次の記述を行いま
【2022年1月28日 電子版を無料にしました】 【紙版の頒布は終了しました】 『ばぶでもわかるおぶざばぶる D3.jsとObservableではじめるデータビジュアライゼーション超入門』 JavaScriptのライブラリD3.jsを使ったデータビジュアライゼーション超入門本です。 WebサービスObservableを使うため、ソフトウェアをインストールすることなく、すぐに始めることができます。 JavaScriptを使ってビジュアルを作りたい方やプログラミング学習中の方におすすめします。 サンプルコードは、本文で紹介しているサポートページで公開しています。 こちらもご覧ください。 技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました｜すぎもとたつお｜note https://note.com/sugi2000/n/n0dd991a3a0c4 特設ウェブサイト https://obser
Visualization toolmaker. Co-founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
ダボス会議2020の「勢力図」を読む
世界の指導者や経営者が集まるダボス会議での各国の影響力
アイドルマスターシンデレラガールズの総選挙歴代トップ１０を動くグラフを作りました。 d3.js V4で作成。データは独自集計なので、間違いなどありましたらお知らせ頂けると有難いです。 Stop 凡例 [Voice]総選挙発表時にボイス実装済み New!初ランクイン Rank前回選挙からのランク差分 りあむちゃん総選挙初登場3位だったけど、初めてランク入りしたときのアーニャは2位だし、鷺沢さんは6位で、しゅがはは9位なのか、など眺めてるとわかってきます。
SUGIMOTO TatsuoD3 Tutorial Japanese D3チュートリアル日本語版PublicD3 Tutorial Japanese D3チュートリアル日本語版Showing all 18 listings1.D3 チュートリアル 日本語版SUGIMOTO TatsuoMay 18, 2021• 62.D3 チュートリアル 01 : このチュートリアルについてSUGIMOTO TatsuoOct 29, 20183.D3 チュートリアル 02 : 基礎編SUGIMOTO TatsuoOct 15, 2018• 14.D3 チュートリアル 04 : 要素の追加SUGIMOTO TatsuoNov 12, 20185.D3 チュートリアル 05: メソッドのチェインSUGIMOTO TatsuoNov 12, 20186.D3 チュートリアル 06 : データのバインディング
概要 deck.glを使ってWebGLで描画した地図の上に、D3.jsを使ってsvgをオーバーレイしボロノイ図を描画します。 ソースコード 解説 deck.glでは、緯度経度と画面上の座標の投影変換をViewportクラスが担っています。 Viewportクラスは通常外部から利用できるような形でインタンス化されていませんが、サブクラスであるWebMercatorViewportを利用することで、投影変換を行うためのprojectメソッドを外部から利用することができます。 WebMercatorViewport Class projectメソッドを使って母点の画面上の座標を取得し、それらを基にd3-voronoiモジュールを用いてボロノイ図を描画するための座標を算出しています。 あとは、webGL上にオーバーレイしたSVG要素にPathエレメントを設置してボロノイを描画しています。 impo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界中で利用される「D3.js」の開発者が10年間で学んだこととは？
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
これから D3.js を始める人のためのメモ - Qiita
Interactive Charts with D3.js
ばぶでもわかるおぶざばぶる:D3.jsとObservableではじめるデータビジュアライゼーション：すぎもと組
10 Years of Open-Source Visualization
シンデレラガールズ総選挙歴代トップレースのグラフ - AOI-CAT's diary
D3 Tutorial Japanese D3チュートリアル日本語版
deck.glとD3.jsを組み合わせて、地図上にボロノイ図を描画する