Jupyter notebookで動的なグラフを表示する。（D3.jsのインライン表示） - Qiita
Jupyterでデータを触っていて、可視化のためにグラフをインラインで表示したいことは多々あると思います。 多くの場合は %matplotlib inline で十分だと思います。 しかし、データが多すぎて読めないグラフが表示されたり、もっと綺麗な図で見たい場合もあると思います。 そこで、動的な綺麗なグラフをJupyterで出す方法をみつけたので試してみました。 まずはデモを見てください。 ↓移動や拡大縮小ができる分散図 ↓Twitterのフォローした人と自分を結んだグラフ図 具体的にはD3.js（https://d3js.org/ ）というデータの可視化に特化したJavaScriptのライブラリを使った結果をJupyterにインライン表示します。 まず、jupyterを動かしている環境にpy_d3というエクステンションを入れます。（https://github.com/ResidentM
韓国の領内ではGoogle Maps APIのカスタムスタイル機能が適用されない
Google Maps APIにはベースマップのスタイルを動的に変更する機能がありますが、それがなぜか韓国の領内には適用されません。 発見した時にはバグかと思って開発者ツールで色々調べて見たりしたのですが、ググってみたところ技術的な問題というよりは法律上の問題でした。 参考： 구글 자바스크립트 style 한국 적용에 대해서 질문드립니다. – Google プロダクト フォーラム 以下、機械翻訳 韓国では国内法上の地図データを海外のデータセンターにエクスポートすることができない制約があって、Googleマップで提供される一部の機能が動作しておらず、地図画像を動的に変更する機能も含まれます。韓国の地図は、国内サーバーを介して制限的なスタイルの指導のみサービスしており、その他のAPIなどを通じた地図画像の変更は、現時点では困難です。今後、より多くのGoogleマップサービスの機能をサポー
データビジュアライゼーションの作り方
主なお仕事 日経:Visual Data 本日の目録 VDataコンテンツの作り方 D3.js バッドノウハウ集 Z-indexが効かない問題 Pathのトランジション 折り返さない問題 svgをpngに変換(つらい) VDataコンテンツの作り方 制作フロー 企画発案（記者より） データ収集・分析・整形 デザイン案やモックを作って打ち合わせ デザイン決定 実装 宣伝用の素材等作成 (SNSに流す用のグラフィックスや動画など) 作成チーム ＰＭ１人 デザイナー３人 エンジニア２人 ２ライン(デザイナー１、エンジニア１) 作成期間（２週間〜４週間）、速報(６時間) 一点物が多い これらの条件を踏まえ、日経ビジュアルデータではD3.jsというライブラリを採用しています。 D3.js データビジュアライゼーションライブラリ 特徴 Data-Driven Document デファクトスタンダード
D3 in Depth
Visualising Data with JavaScript teaches you how to build charts, dashboards and data stories using Chart.js, Leaflet, D3 and React. Find out more "One of the best D3 books I've read. The contents are very clear, it is easy to follow and the concepts are very solid." Javier García Fernández Learn how to make a custom data visualisation using D3.js. Find out more Learn the fundamentals of HTML, SVG
D3.js – 折れ線グラフと棒グラフのポイント | DevelopersIO
はじめに 前回に引き続き、D3.jsについて学習しているt-hondaです。 D3.jsは「データ・ドリブン」でドキュメントを生成するため できることが多いことや、ソース上で行うことが多い傾向があり 取っ付き難い点もあるかと思います。 今回は折れ線グラフと棒グラフを表示する上で共通となるポイントについて取り上げ 次にそれらのポイントを踏まえて公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて 各ポイントについては、以下のサイトに分かりやすい説明が書かれているので 引用しながら説明していきたいと思います。 D3 入門 : スケール - スコット・マレイ スケール D3.jsでのスケールとは、入力した値を適切な(見やすい)値に変換するモノ(関数)だと言えると思います。 上記のサイトでは データを視覚化した場合、必ずしも元の値がうまくデータ表示領域に収まるとは限りません。そ
I am mitsuruog | D3.jsでタイムチャートを作ってみたので、苦労した点など振り返ってみる
D3.js を使ってタイムチャートを作成してみました。 初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。 D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。 利用している D3.js は v3 系です。 サンプル Codepen にサンプル作りました。 TimeChart 苦労したこと 一定期間の時間軸を作成したい 時間軸のラベルを一定間隔にしたい 時間軸のラベルフォーマットしたい 軸のメモリ線(？)を消したい 画面サイズに応じて軸ラベルを回転させたい カテゴライズされた軸を作りたい カテゴライズされた軸のラベルを別なものにしたい ラベルの文字が長い場合に改行したい 軸の domain 範囲を超えたデータがある場合に表示させない window がリサイズしたら Chart を再
D3.jsの概要と使い所について - Qiita
個人的に初めてD3.js（以下、D3と呼びます）を使う機会があったので、その時に得られたD3の大まかな概要やD3（もしくはSVG）の使い所を纏めておきたいと思います。特にD3を使った事がない人向けですが、ここではD3についてハンズオン的な事はしないのでご了承ください。 D3とは D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving yo
Read D3 Tips and Tricks v4.x | Leanpub
Acknowledgements Mike First and foremost I would like to express my thanks to Mike Bostock, the driving force behind d3.js. His efforts are tireless and his altruism in making his work open and available to the masses is inspiring. The decision for him to leave what must have been an incredible job with the New York Times to return to improving visualisation software (d3.js in particular) has mark
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=
D3.js v4/5 使い方 徹底攻略 – データビジュアライゼーション・ラボ
2018-02-152022-10-03 インタラクティブなグラフ、チャート、データ可視化のためのjavascriptライブラリ、D3.js(Data-Driven Documents)の使い方を徹底解説します。v4/5に対応しています。 チュートリアル 環境準備 要素の追加方法 (append) データのバインド方法 (data,enter) SVGの基礎 グラフの書き方 基本的な使い方 data使い方(enter,update,exit) 表(table)の作り方 カラースケールの作り方 カラーテーマまとめ アニメーションのエフェクト一覧 Web上のファイルの読み込み方(d3-fetch) 乱数生成関数の使い方 マウス/タッチイベント drag使い方 zoom使い方 範囲選択 (brush) 使い方 範囲選択 (brush) 使い方 (タッチパネル応用) 基本チャート 棒グラフ(bar
細かすぎて伝わらないD3 ver.4の話
※ なぜか、スライド内の画像が天地逆転して表示されています。 D3.js ver.4の新機能などについて。 Read less
D3.js ver.3向けのコードをver.4でも動かすよ - Qiita
目的 私はD3.js(Data Driven Document：JavaScriptの情報可視化ライブラリ)を導入する上で、バージョンの違いに苦しめられました。主に、D3のver.3(以下v3)からver.4(以下v4、2016/7月リリース)で大規模な変更があったためです。Webに掲載されているサンプルコードはv3で作られたものが多く、v4上ではその大半が動きません。 本記事の目的は、自分の備忘録および、同じくD3v4を新規導入する方々のために、v3からの変更点や、v3用に書かれたコードをv4用に再コーディングする場合のポイントを述べることです。 内容 重要な点は以下3点です。それぞれセクションを区切って説明します。 1. Scale 2. selection.attr / selection.style 3. selection.merge Scale Scaleは値の正規化（線形変換
jupyter notebookでpythonとJavaScriptの連携 - Qiita
はじめに jupyter notebookでpythonだけでもデータ解析から可視化まで一連の流れが可能ですが、D3.jsの高い表現力とインタラクティブ性をみてしまうと、可視化はJavaScriptでというケースも多くなるのではないでしょうか。そこで、データはpythonで用意してJavaScriptに引き渡す方法を紹介したいと思います。 以下の説明ではpy_d3というjupyter notebook上でD3.jsのコードを実行、表示するパッケージを利用しますが、D3.jsに限らず任意のJavaScriptが実行可能です。1 py_d3のセットアップ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3v4/v5
Newbie to D3.js Expert: Complete path to create interactive visualization using D3.js
How to create jaw dropping Data Visualizations on the web with D3.js?