D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
櫻田潤 | インフォグラフィック・エディター
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
クリエイターのためのWebテク講座 -ドラッグできる画像ビューワーの作り方
前々回のドラッグアンドドロップを応用して、画像ビューワー作りに挑戦しましょう。 サンプルを見る サンプルは、第9回で使ったサンプルを改造して、画像の領域をドラッグアンドドロップすると、横並びの画像をスライドさせることができるようにしました。 実装する前に 実装の前に、今回のコンテンツの作りについて説明します。 下の図を見てください。 第9回で使ったサンプルをそのまま利用し、図のようにドラッグすると全体がスライドするように作り変えます。 その際、第9回ではループ様に、端の画像を入れ替える処理を入れましたが、今回は無くてもいいでしょう。 つまり、横並びになっている画像を、一つのタグの中に入れてしまい、その要素に対して、ドラッグ処理を入れればいいということになりますので、だい11回のドラッグアンドドロップのソースコードのコピーで、実装できてしまいます。 実装しよう まずはHTMLのソースから見て
七章第二回 ノードどうしの位置関係を知る — JavaScript初級者から中級者になろう — uhyohyo.net
七章第二回 ノードどうしの位置関係を知るこのページの最終更新日：2018年7月29日 今回はcompareDocumentPositionというメソッドを紹介します。これはノードが持つメソッドで、題にある通り、ノードどうしの位置関係を知るというものです。いきなりサンプルを見てみましょう。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="p1">p1</p> <p id="p2">p2</p> <script type="text/javascript"> var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); console.log(p1.compareDocumentPosition(p2)
タブ切替のサンプル
11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 3333
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
ビジュアライゼーションは「情報を見つける」ための行為 - WirelessWire News（ワイヤレスワイヤーニュース）
きれいなだけでは役に立たない ──今のビジュアライゼーションの動きのなかで、増井さんが問題だと感じていることはありますか？ 増井：加工中心になってしまっていることですね。本来、ビジュアライゼーションというのは、何かを理解したり、検索したりするために使うはずなのに、「きれいだったらいい」という感じになってしまっています。インフォグラフィックスというのも、ポスターを頑張ってきれいに描くのとあまり違いはない。 そこに注力しても、ではこれは本当に便利なのだろうかというと、怪しいものが多い。そういう印象があります。本当に便利だったら見栄えが悪くても使われると思うんです。Googleのテキスト検索が典型的です。でも、いまのビジュアルの方向というのは、ともかくかっこよければいい、影をつけましたとか、光っていますとか、それでかっこよく見えるということの方が、便利さよりも重要になっています。 ──つまり、意
Webデザイナーのためのjquery入門2（前編）
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2（前編） — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！ 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容１. 何かを取ってくる ２. それに何かをする３. まとめ 1
JavaScriptによる画像切り替え
JavaScriptを使って画像を切り替えるボタンを設置する方法です。この方法だとページ自体を更新しないので比較的軽くなると思います。 <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area1.src = "画像1のURL"; } function showimg2(){ document.area1.src = "画像2のURL"; } function showimg3(){ document.area1.src = "画像3のURL"; } --> </SCRIPT> <img src="最初に表示する画像のURL" name="area1"> <input type="button" onclick="showimg1()" value="画像1"> <input type="button" o
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
【2024年8月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年08月16日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
null.ly - a really cool domain parked on Park.io
