Simple d3.js tooltips - bl.ocks.orgYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Inclusive Technology Consulting - Bocoup
While working on visualizing the results of internet speed test data for Measurement Lab, it became clear that there wouldn’t always be data for every geographic location on every single day. We might go several days without meeting a minimum threshold of tests, meaning there would be gaps in our data. This is a pretty common problem when working with time series data, and one that is easily ignor
Calendar
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out. Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R. Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects ar
Vue.jsでD3.jsを使わずにグラフを実装する - Qiita
Vue.jsでグラフ を実装するサンプルコードを探すとD3.jsを用いている例が結構見つかります。 しかし本当にD3.jsが必要なのでしょうか？ この記事ではD3.jsやその他グラフライブラリを用いずにVue.jsのみで実装したグラフについて解説します。 TL;DR SVGでおｋ グラフコンポーネントにSVGのテンプレートを書く テンプレートに必要な値を computed でじゃんじゃん作る デモとリポジトリ デモ： https://haribote.github.io/vue-graph-demo/ リポジトリ: https://github.com/haribote/vue-graph-demo 折れ線グラフ、棒グラフ、円グラフ、の3つのグラフを実装してみました。 データの内容はプロ野球における直近5シーズンの年間入場者数です。 NPBが公開している統計データからJSONを用意しました
d3.jsで作ったバーンダウンチャート - Qiita
概要 d3.jsを使ってバーンダウンチャートを作ってみました。短いコードでデータをビジュアル化できるd3.jsは素晴らしいですね!! いろいろ試した結果、出来上がったJavaScript部分のコードをこちらに掲載します。 機能概要 サーバサイドからJSONデータを受け取りd3.jsを使ってSVG領域にバーンダウンチャートを描画します。予定線をグレー、実績線をオレンジ、工数合計線をグリーンとして折れ線グラフを作ります。各データのポイント部はマウスオーバー時に数値を表示します。 動作イメージ フィルタ条件に対応したJSONをAjaxで出力し、d3.jsによりSVG領域を再描画します。d3.jsの処理が高速なので、ストレス無く快適に操作できます。 JSONデータの例 データベースにはチケット毎に以下の項目を時系列に格納しています。各項目を日付毎にサマライズしたJSONを生成しd3.jsに渡します
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
D3.jsにあてはまらないこと | POSTD
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
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でユーザーのページ遷移を表現してみた | PLAID engineer blog
D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。
郊外住宅地の見えない空き家 NHKニュース
転機を迎えた郊外住宅地 「もっと若い人にここに移り住んでもらって、かつての活気を取り戻したい」 私たちが訪ねたとき、多くの住民からこうした声を聞きました。確かに広い庭や緑豊かな公園は、子育てには理想的な環境です。 しかし、いくら空き家があっても、地元の若い子育て世代が簡単に手を出せる価格ではありません。また、厳しい建築協定が結ばれているため、土地を分割して売却したり、アパートなどの集合住宅を建てたりすることもできません。良好な環境を維持するための配慮が、かえって若い子育て世帯が移り住むことを阻んでいるのです。 住民の１人は「地域のスーパーは閉店し、中学校も来年には統廃合されます。今は元気だからまだいいですが、１０年後、２０年後を考えると、このまま住み続けることができるのかどうか、本当に不安です」と話していました。 明治大学文学部の川口太郎教授は、日本の郊外住宅地は、大きな転機に立たされてい
D3.js – 折れ線グラフと棒グラフのポイント | DevelopersIO
はじめに 前回に引き続き、D3.jsについて学習しているt-hondaです。 D3.jsは「データ・ドリブン」でドキュメントを生成するため できることが多いことや、ソース上で行うことが多い傾向があり 取っ付き難い点もあるかと思います。 今回は折れ線グラフと棒グラフを表示する上で共通となるポイントについて取り上げ 次にそれらのポイントを踏まえて公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて 各ポイントについては、以下のサイトに分かりやすい説明が書かれているので 引用しながら説明していきたいと思います。 D3 入門 : スケール - スコット・マレイ スケール D3.jsでのスケールとは、入力した値を適切な(見やすい)値に変換するモノ(関数)だと言えると思います。 上記のサイトでは データを視覚化した場合、必ずしも元の値がうまくデータ表示領域に収まるとは限りません。そ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popular Blocks - bl.ocks.org
Multiple line graph in v4