I am mitsuruog | D3.jsでタイムチャートを作ってみたので、苦労した点など振り返ってみる
D3.js を使ってタイムチャートを作成してみました。 初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。 D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。 利用している D3.js は v3 系です。 サンプル Codepen にサンプル作りました。 TimeChart 苦労したこと 一定期間の時間軸を作成したい 時間軸のラベルを一定間隔にしたい 時間軸のラベルフォーマットしたい 軸のメモリ線(？)を消したい 画面サイズに応じて軸ラベルを回転させたい カテゴライズされた軸を作りたい カテゴライズされた軸のラベルを別なものにしたい ラベルの文字が長い場合に改行したい 軸の domain 範囲を超えたデータがある場合に表示させない window がリサイズしたら Chart を再
D3.jsの概要と使い所について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 個人的に初めて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 a
D3.jsの概要と使い所について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 個人的に初めて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 a
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。
嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の皆さんにも「全ツイート履歴」が使えるようになりました 全ツイートのダウンロードが可能になっていたので、ダウンロードしたtweets.csvを使ってワードクラウドを作成してみました。 example データセット作成 過去の全ツイートから固有名詞を抜き出して出現回数順にランキングにしたデータを作成します。 2007年から使っているわりに、累計ツイート数が10,939件と少ないのでテキスト処理系コマンドとExcelを使って行いました。ツイート数が多い場合は、以下の方法では難しいかもしれません。 まず、Windowsで処理しやすいようにS-JISに変換します。
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
Node.jsアプリの開発をモダン化するために取り組んできたこと
2. Copyright © bitbank, inc. 自己紹介 ❏ ビットバンクでサーバーサイドを担当 ❏ Node.js, TypeScript ❏ 前職ではモバイルゲームを開発 ❏ C++, C#, PHP, etc. Daiki Yokoi 3. Copyright © bitbank, inc. テーマとアジェンダ 各所をモダン化して組織の拡大に耐える ❏ ソースコード編 ❏ TypeScript + Nestフレームワークの採用 ❏ ユニットテスト環境編 ❏ Docker + モックツールの活用 ❏ インフラ(AWS)編 ❏ Infrastructure as Code による サーバーレス環境の構築 4. Copyright © bitbank, inc. テーマとアジェンダ 各所をモダン化して組織の拡大に耐える ❏ ソースコード編 ❏ TypeScript + Nestフ
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は値の正規化（線形変換
React + D3.js: Balancing Performance & Developer Experience
Let’s put it out there, I love dashboards. I find the way they help you gain a rapid understanding out of complex information really interesting. I have written real-time data visualisations in the past, but always thought that complete dashboards were really hard to implement. That was until I learnt React a while back, and then it clicked: I had finally found a tech that would make building dash
Ethereumを学習するときのロードマップ - アルゴリズムとかオーダーとか
自分がEthereumを学習したときの経験を元にゼロからEthereumを勉強するためのロードマップをまとめてみました。 先人たちは大体この流れで学習を進めていったと思います。 1. Ethereumのnodeを立ててみる go-etherem parity その他 2. Walletを使ってみる MetaMask それ以外の有名なwalletアプリ 3. Ethereumについて深く学習する 4. SmartContractを書いてみる Solidiyの公式ドキュメント Remix (browser-solidity) EthFiddle.com 5.Solidityについて深く学習する CryptoZombieで体系立てて学ぶ SmartContractのセキュリティーについて リリースノート 自分のブログ記事もおすすめ 6. Truffleを導入してSmartContractのプロジ
Node.js、Socket.IO、MongoDBでリアルタイムWeb
Node.js＋Socket.IO＋MongoDB こんにちは！ 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章（データ）に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章（データ）が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して
Complete Express.js + Node.js + MongoDB CRUD & REST Skeletop
How to Create a Complete Express.js + Node.js + MongoDB CRUD and REST Skeleton Kendrick Coleman Kendrick is a reformed sysadmin turned coder and awaits for an idea to spawn to tackle it with Ruby or Javascript. In his daily role a developer advocate for EMC Code, he works with a team to focus and publish all things open source. Over the past few weeks I have created a few Node.js web apps (such as
Nginx + Node.js + React.js. + Mongodb を Docker で構築する - あいつの日誌β
あらすじ Nginx + Node.js + React.js + Mongodb で Web Application の構築手順を説明する必要があるのですが、Dockerfile をドキュメントとして扱う事になりました。 % docker --version Docker version 17.06.2-ce, build cec0b72 % node -v v8.1.0 % create-react-app --version 1.4.0 % mongo --version | head -n 1 MongoDB shell version v3.4.9 準備 一応 Todos アプリのような感じの Web API を backend で用意して React がそのデータを描画する、までの簡単なサンプルアプリを作成しつつ Docker について説明します。 先ずは以下のコマンドを実行し
どうしてWaltsを開発したのか - そして昨今のFlux - Qiita
まずFluxとはなんだろうか。Fluxの解説はすでに多数掲載されているが、ここでは「データフローを一方向としたアーキテクチャ」と定義したい。 そもそも、FluxというのはObserverパターンにちょっとした規則を設けて、かっこいい名前を与えたに過ぎないのだが、現代のフロントエンドはこのFluxを見事に受け容れた。なぜか。それは開発者が秩序を求めたからである。 これは、拡大し続けるフロントエンド・サイドの開発規模に対して、従来のMVC、正確には複数のViewと複数のControllerが相互にデータを受け渡し合うアーキテクチャがスケールしなくなったことに起因する。（ここではMVCを厳密に定義していない。GUIアーキテクチャについてなのかバックエンド・アーキテクチャについてなのか判然とさせないまま、俗語的に用いている） シングルトンという名でごまかした巨大なグローバル神オブジェクトを至る所で
データウェアハウス再入門 | DevelopersIO
４月入社の川崎です。Redshiftに取り組むにあたり、改めてデータウェアハウス（DWH）の基本について確認しておこうと思います。 DBA（データベース管理者）歴20年の私の経験から言えるのは「同じデータベースでも、データウェアハウスはOLTP系とはまったく違う」ということです。ところが、DWHの教科書みたいな書籍が日本語ではほとんど無いので、書籍の代わりにSlideshareなどネット上のリソースを中心に検索してみます。 「10年戦えるデータ分析入門」青木峰郎 著 http://www.sbcr.jp/products/4797376272.html 著者はクックパッドの方で、元テラデータ出身のようです。（どうりでDWHに詳しい訳ですね）ネットの書評によると「分析の本ではなく分析のためのSQLの入門書」だそうですが、この「分析のためのSQL」が仕事の役に立ちそうな気がしています。（対象デ
作業自動化のための Node.js 入門 - ほんじゃらねっと
これまでいくつかの記事でNode.jsを使ったスクリプトを載せてきたが、 自動化のためのスクリプトを書いて動かす環境として Node.jsは手軽だし速いし色々ライブラリは揃ってきているし なかなか良い環境だと感じている。 Web系の仕事をしていればJavascriptはある程度親しみのある言語だろうし、 GruntやGulpのようなWeb関連作業を自動化する 機能満載のタスクランナーまで用意されている。 実行環境もインストーラをダウンロードしてインストールすれば パッケージ管理ツール付きで入手することができるので、 すぐに開発を始めることができる。 非同期処理が得意なサーバアプリケーションを作るための環境として 紹介されることが多いけど、この手軽に導入できて Javascriptでサクッとアプリが作れるところだけでも十分に価値があると思う。 ノンプログラマが仕事を効率化するためにプログラミ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新版のチートシート！Vue.jsのよく使用するイベントや構文がまとめられたフロントエンド制作者用チートシート
Session을 이용해 로그인하기 · GitBook
jupyter notebookでpythonとJavaScriptの連携 - Qiita
