【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノート - Qiita
【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノートJavaScriptd3.jsデータ分析データサイエンスcolaboratory CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。 スタンフォード大の"CS 448B Visualization (2020 Winter)" がすごい。 データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。 スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。https://t.co/lGyPElrihg pic.twitter.com/mWZn
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
5分で完璧に分かる！CSS Gridの基本的な使い方を解説
CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で
CSS GridがBootstrapよりレイアウト作成に向いている理由（翻訳）
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講
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:
ドラッグアンドドロップで簡単にフォームを作れるjQueryプラグイン
ドラッグアンドドロップでフォームを作れるWebサービスはたくさんあるんですが、フォームを設置するjQueryプラグインはそんなにないですよね。 そんなわけで今回はそんなD&Dでフォームを作れるようにするためのプラグインのご紹介です。 こういうのを実装できます。 ドラッグアンドドロップでフォームを組み立てる。 編集は超らくちん。 View XMLをクリックすればそのまま使えるコードがでてきます。 実際は触ってみるのが一番わかり易いと思います。 jQuery formBuilder | Drag & Drop Form Creation ダウンロード後、圧縮ファイルを解凍して、demoフォルダの中のindex.htmlを、コーダーで開いてみましょう。 大体の仕様はその中を見ればほぼわかると思いまうs。
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
これ１つで驚くほどアクセス数が増えた！誰でも簡単にできる固定ソーシャルボタンの設置方法とは？ - サラリーマン休日副業で月10万円以上目指すページ
すでにお気づきの方も多いと思いますが、最近ブログのデザインを多少修正しています。 はてブやTwitter等のソーシャルボタンは各サービスごとにデザインが異なり、何となく統一感がありません。 今回のデザイン変更はソーシャルボタン周りのデザインを統一化し、よりユーザクリックを誘いやすいようボトム位置に固定化しました。 この効果はてきめん！ ブックマーク率は従来比で2倍以上に。 皆さんにも是非ご紹介したいと思いましたので、記事にしてみます。 設置方法 下記のソース群をあなたのブログに追加するだけです。 ソーシャルボタン画像はのらねこさんのページのものを使用させていただきました。 CSSソース あなたのブログのCSSに下記を追加してください。 .social-button { display:none; width:90%; max-width:900px; height:0; margin:0
データを分かりやすくスタイリッシュに可視化できる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
NYタイムズも注目！「データ×デザイン」を実現するデータビジュアリゼーション ライブラリ「d3.js デザイン会社 ビートラックス: ブログ
世界中でデータがどんどん増えていく中でデータをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中のデータをビジュアライズする為の「d3.js」というライブラリがあります。 本日はこの「データｘデザイン」をwebサイト上で実現する為のjavascriptライブラリ”d3.js”について紹介したいと思います。 このライブラリを使うことで、今までなかなか難しくてできなかったウェブ上での「データの可視化」が手軽にできるようになり、複雑なデータを直感的に理解できるようなサイトが作りやすくなります。早速ですがこのd3.jsというものがどういうものかをなんとなく感じるには実際に動いているデモを見て頂くのが早いので以下をご覧下さい。 オバマ大統領の国家予算案詳細 (
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
