d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10
変化の早いフロントエンド界隈でいま押さえておきたい、最新のJavaScript関連記事をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
jQueryの次に学びたい！D3.jsはWebデザイナーの最高の武器になる
え、「D3ってグラフ描くライブラリーでしょ？」ですって？ それだけではありません。あらゆるデータを魅力的に見せる「データビジュアライゼーション」は、Webデザイナーの表現の幅をさらに広げてくれそうです。 本記事はMichaela Lehr、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 D3.jsはデータに基づいてドキュメントを操作するJavaScriptライブラリです。D3.jsはHTML、SVG、CSSを使ってデータを活用します。 私がおすすめする、Web制作者が学ぶべきJavaScriptライブラリーは、jQuery、Underscore.js、そしてD3.jsの3つだけです。この3つのライブラリーは、新しい方法でコードを考えることができます。jQueryを使うと少ないコードでDOM
JavaScript で始めるデータ ビジュアライゼーション –D3 連携編–
ArcGIS API for JavaScript を用いてデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していく「JavaScript で始めるデータ ビジュアライゼーション」シリーズの第６弾です。 これまで紹介したサンプル コードとデモを確認したい方は GitHub リポジトリをご覧ください。 第１弾から様々な表現手法をお伝えしてきましたが、今回は少し趣向を変えて、データ ビジュアライゼーションを強みとするオープンソース JavaScript ライブラリである D3.js との連携例をご紹介します。 D3.js とは？ データ ドリブン ドキュメント（Data Driven Document）を略して「D3」と呼ばれている通り、データを操作し、可視化することに優れたライブラリです。Web サイトや Web アプリで採用される 2D ベクター グラフィックの標準形
Overview
Background In Square’s new engineer onboarding program, which we call NEO, we offer short courses and lectures on a variety of tools that we use at Square. We started to collect notes from our course on D3.js and found the notes were well-suited for a tutorial — and worth sharing. Introduction The tutorial provides a quick intro to d3.js, a Javascript library for creating data visualizations in th
GeoJSONを使いこなすためのWebサービスまとめ
GitHubが地図表示に対応したり、Google Maps APIでも直接読み込めるようになったりと、着々と利用が進むGeoJSON。 D3.jsで地理情報を視覚化する際にも欠かせないものですが、そんなGeoJSONを扱うのに便利なWebサービスを集めてみました。 資料 GeoJSON フォーマット仕様 GeoJSONの仕組みを理解したい場合は、まずこれを読みましょう。 コンバーター ・mapshaper 地理情報の簡素化を行うためのサービスですが、Shape,geojson,topojsonを相互に変換するWebサービスとしても利用できます。 ・mapbox/csv2geojson 緯度経度を含んだcsvファイルをGeoJSONに変換するnode.jsツール。ポイントデータのみならず、ラインデータやポリゴンデータへの変換も可能。フロントエンドでも動作し、web上でコンバートを提供している
D3.js入門〜Perfumeシングル売上チャート作成〜
お久しぶりです。Perfumeエンジニアの新井です。 先週の9/21(日)にPerfumeがメジャーデビュー10周年＆結成15周年の記念日を迎えました。 その記念日に、最終日を迎えたPerfume 5th Tour 2014『ぐるんぐるん』の詳しい様子は、こちらのライブレポートを御覧ください。 また、このPerfume Dayに各CDショップで開かれたイベントの様子はこちらの記事を。 「この記念日を迎えた感動を、自分なりに表現しなければ…」 「メジャーデビュー10周年ということで、これまでの歴史を振り返りたい…」 「よしそれじゃ、これまでリリースしたシングルをざっと振り返ろう！」 という個人的な使命感に駆られて、このブログを書いています。 やることはタイトル通り 『メジャーデビューからの全シングル20曲の売上枚数の遷移を折れ線チャートで表示』 それを実現するためにこの頃興味があったD3.j
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
D3.js – 円グラフのポイント | DevelopersIO
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
D3.js入門 – 「データ・ドリブン」という特徴について | DevelopersIO
はじめに D3.jsについて調べ始めた、t-hondaです。 前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが 今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について サンプルを挙げて書いていきたいと思います。 D3.jsの特徴 以下の弊社のブログ(※1)でも取り上げられていますが、D3.jsは 「データ・ドリブン・ドキュメント」 の略であり 「データに基づいてドキュメントを操作するための JavaScript ライブラリ」 であると定義されています。 D3.js - 日本語ドキュメントより(太字は著者追記) この「データ・ドリブン」であり、「データに基づいてドキュメントを操作する」という特徴について 以下のサンプルで解説していきたいと思います。 ※1 弊社ブログ [HTML5] D3を利用してデータを可視化してビジネスに活かす D
2時間縛りでd3.js挑戦してみた - mizchi's blog
何この記事 あんちべという人から無茶ぶりがきたので対応した mizchi、d3ブログ書いてくれた呑む— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian D3まだ極めてないです— 高意識エネルギー (@mizchi) 2014, 3月 2 @mizchi 2時間やろう、早く極めたまえ— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian おっしゃ待ってろ— 高意識エネルギー (@mizchi) 2014, 3月 2 前提 よく誤解されるんですが、D3.jsはグラフ描画ツールではなく、JavaScriptでSVGを生成するためのjQuery風DSLで、DSLとはいえかなりローレベルなライブラリです。SVGはベクタグラフィックスを生成する規格。ブラウザ上のSVGは、図形を書けるDOMであり、他
D3.jsでグラフを描いてみる - ワザノバ | wazanova
http://www.alexrothenberg.com/2014/01/06/learning-d3-by-building-a-chart.js.html1 comment | 0 pointsAlex Rothenbergが、GitHubグラフでおなじみのD3.jsの解説をしています。 今日は、D3.jsを使って、このようなグラフを描いてみる。D3.jsのポイントとしては、 データをDOM elementとバインディングする。 チャート、地図、配列など多くのAPIがある。 チャートなどをビジュアル化するにはSVGが適している。 Binding data to the DOM D3とはData-Driven Documentを意味し、データをDOM elementに同期する機能を提供してくれる。では早速見てみよう。 <script src="http://d3js.org/d3.v3
RとJavaScript Visualizationを俯瞰しよう
7. R言語とJavaScript比較 library(Wordcloud)を使用 library("wordcount") wordcloud( + data$Term, data$Freq, + scale=c(5,2), + max.words=Inf, + random.order=T, + random.color=T) 変化があまり見れないのはこ のとき使ったデータが悪かっ たので・・・ 8. R言語とJavaScript比較 D3.js+d3-cloud d3.csv('resources/data/out.csv', function(data){ var h = 600; var w = 800; var random = d3.random.irwinHall(2) var countMax = d3.max(data, function(d){ return d.Fr
D3.jsとOpen Dataその２〜各国の事例〜
この投稿はD3.js Advent Calendar 2013の15日目です。前回担当分はQiitaに書きましたが、今回は実装の紹介というようりも事例紹介なのでブログの方に書きます。というか、自分のブログのことをすっかり忘れていたのですが、同僚に知らぬまにウォッチされていたようなので、たまに書いてみようと思います 今回はD3.jsを実際につかってOpen Dataをビジュアライズしているサイトをいくつか紹介します 1. Not All Neighborhoods Are Created Equal (Boston Edition) ボストンの地価の分布をビジュアライズしたものです。Max、Minと中央値を表現するグラフにマウスを重ねると該当の地域がハイライトされます 2. Drought Extends, Crops Wither – The New York Times 干ばつによる作物
オンブラウザで3分で始める d3.js - 君たちは永遠にそいつらより若い
Day 11 は、Keiichiro Onoさんでした。 スクリプトを書かずに各種グラフデータをD3.jsで扱える形式に書き出す https://github.com/keiono/d3-layout-sample Day 12: d3.js Advent Calendar 2013 こんにちは。くてけんです。 皆様のご利益のある霊験あらたかな記事を拝んでいる日々ですが、d3.js 人口が少な過ぎる昨今のために、私は表題のようなライトな入門記事を書いてみました。「d3.jsっておもしろそうだねー（でもやったこと無い）」とほざく足の重い友人に本記事を押し付けて、d3.js人口の増加をお祈りしたいと思います。 さて、時間も限られているので、気持ちを切り替えてさくさく行きます！ 〜1:00 ヒトのコードを動かしてみる 〜2:00 ちょろっと変えて動かしてみる 〜3:00 ドキュントとすごい人の作
D3で切り開くジオ・データ・ビジュアライゼーションの可能性
D3で切り開く ジオ・データ・ビジュアライゼーション の可能性 第12回 ジオメディアサミット〜ジオデータビジュライズの世界〜 Yuichi Yazaki / visualizing.jp / toy-by-algorithm.com 自己紹介 矢崎裕一 インターフェイス・デザイナー／コーダー／トイ・コンサルタント インフォグラフィック vs データ・ビジュアライゼーション インフォグラフィック 人が手作業かグラフィックアプリで描いている。 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。 そのため、別のデータを使用して再作成するのが容易ではない。 表示についてのルールとその例外処理について作者以外の外部からすべてを推測することが難しい。 参照したデータとの関連性の証明が難しい。 インタラクションが（ほぼ）ない。 あるデータセットが、予め用意されたアルゴリズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - dorneanu/netgrafio: netgrafio - Visualize your network
D3.js 試してみた