JSグラフライブラリNVD3.jsを使ってはてなブログにハイセンスな株価チャートを表示させる方法 - サラリーマン休日副業で月10万円以上目指すページ
久々にプログラミング系のネタです。 はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。 もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。 １．CSS/ライブラリの読み込み まずはCSSとJavaScriptライブラリを読み込みましょう。 下記ソースをページ上部にコピーします。 <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char
Qiitaの投稿をNVD3で可視化してみるとRuby人気なんだなと改めて分かった。 - Qiita
pageが対象のページ per_pageが１ページあたりの件数 詳しくはこちらをご確認ください。 http://qiita.com/docs JavaScriptでJSONデータ保存 こちらの記事にもっとシンプルなものを書いています。 http://qiita.com/ganezasan/items/b5dbb42b966af0de44cb 保存後はqiita.jsonという名前にしてください。 <!DOCTYPE html> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; border: 0; } body { background: #fff; } </style> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https:
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
pythonで美しいグラフ描画 -seabornを使えばデータ分析と可視化が捗る その1 - Qiita
Pythonでのグラフ描画 Pythonチャートを描く場合の定番は「matplotlib」ですが、その見た目のやや野暮ったい感じと、表記法のややこしさが指摘されています。 そこで、この記事ではMatplotlibの機能をより美しく、またより簡単に実現するためのラッパー的存在である、「Seaborn」の使い方を取り上げます。 ◆ Overview of Python Visualization Tools http://pbpython.com/visualization-tools-1.html 上記の記事ではMatplotlibとSeabornについて下記のように書かれています。 matplotlibについて Matplotlib is the grandfather of python visualization packages. It is extremely powerful b
Google Chartで地図チャートを作成（日本地図と人口）
Google Chartで地図を使ったチャートを作成することができます。 「Google Chart API」を利用するとグラフが簡単に作成できる、という記事に書いたチャートの作成のための基本的な流れ（コード）は同じです。 地図を使ったチャートを表示するには、packagesでgeochartを設定。またオプション（var option）で日本の地図を使うために「region:’JP’」と設定して、また地図データの境界（都道府県単位）を設定するために「resolution: ‘provinces’」と設定します。 <script src="https://www.google.com/jsapi"></script> <script> google.load('visualization', '1', {packages:['geochart']}); google.setOnLoadCa
Google Chartでスケールの違う2つの折れ線グラフをうまいこと出す - FLOG SPLASH
2つの折れ線グラフを出そうとして、1つは値の幅が(A)0-200、もう片方は(B)0-4000とかで、これを何も考えず同時にプロットすると、AがBの範囲で、つまり0-4000の中で0-200が表示されるため、結果Aのグラフがほぼ平坦になってしまうわけです。 で、ドキュメントを調べていたらtargetAxisIndexというのをseriesに指定するとYou can define a different scale for different axesだよって書いてあったので、これを指定したらうまいことスケール( = 値の幅)の違うグラフが表示できました。 targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default
Pythonを使って簡単にデータを視覚化する
世の中のことをもっと知るにはどうしたら良いだろうと思うときがある。世の中の多くの事柄はログやデータに落とされる。Googleなどの検索サイトは良い例だろう。さて、そのログやデータをどうすれば良いのか? 多くの場合、視覚化が有効な手段となる。 まずは身の回りの日常的なデータやログを何とかしたい。ただ、日常のデータを視覚化するのに数十行以上のコードは書きたくない。まるで息をするかのごとく自然に視覚化を行いたいのだ。そのためには1～2行、長くて数行で済ませることが必要だ。そこでPythonとmatplotlibを使う。加えて、IPythonがあればなお良い。IPythonの導入については以前のブログ記事であるIPythonの埋め込みプロットが素晴らしいを参考にして欲しい。 まずは事前にnumpyとmatplotlibをインポートしておく。できればscipyも。 >>> from numpy im
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
Google Chart API – LaTeX を使って数式画像を動的に生成するツールを作ってみた | TM Life
Google Chart API は Google 大先生のサービスのひとつで, URL にパラメータを指定することでグラフ画像を生成してくれます. 現在は, 折れ線グラフや棒グラフ, ベン図, QRコードなどに対応していてこれらの画像を簡単に生成することができます. その中でも今回取り上げるのは LaTeX です. LaTeX にも対応していることはあまり知られていないようで, wikiでも漏れていましたw 最近, 数式をページに埋め込みたい場面がちょくちょく出てきたので LaTeX を打ち込むと, それを画像として生成するツールを作ってみました. Demo 今回制作したツールはこちらです. テキストエリアに LaTex を打ち込んで下さい. 行単位で内容に応じて右側に画像と埋め込み用リンクを生成します. サイズと背景色(16進数rgba)とフォントカラー(16進数rgba)も反映されま
NYタイムズも注目！「データ×デザイン」を実現するデータビジュアリゼーション ライブラリ「d3.js デザイン会社 ビートラックス: ブログ
世界中でデータがどんどん増えていく中でデータをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中のデータをビジュアライズする為の「d3.js」というライブラリがあります。 本日はこの「データｘデザイン」をwebサイト上で実現する為のjavascriptライブラリ”d3.js”について紹介したいと思います。 このライブラリを使うことで、今までなかなか難しくてできなかったウェブ上での「データの可視化」が手軽にできるようになり、複雑なデータを直感的に理解できるようなサイトが作りやすくなります。早速ですがこのd3.jsというものがどういうものかをなんとなく感じるには実際に動いているデモを見て頂くのが早いので以下をご覧下さい。 オバマ大統領の国家予算案詳細 (
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事