1 - 10 件 / 10件
データサイエンスという分野は、データ収集や可視化などが身近になったことで、より重要になってきています。システムを使ってデータ分析する際、利用者は最終的な結果のみを求めますが、私たちエンジニアはその途中経過についても正しく評価する必要があります。そのためには、中学や高校で学んだ数学の知識が欠かせません。そこで本連載は、高校までに学ぶ基本的な数学知識を使って、データ分析やデータ表現の基礎的な考え方を紹介します。また、既に学んだ数学的基礎からデータの特徴を見つけるためにデータ表現する方法について紹介したいと思います。 はじめに コンピュータでのデータ分析といっても多種多様で、画像や音声、映像、文章などを対象にする場合もあれば、売上値や検査値などの数値を分析する場合もあります。最近では、AIによってさまざまなデータが扱いやすくなり、利用者にとって分かりやすく結果を提示できるようになっています。 そ
ニューヨーク・タイムズやOpenStreetMapなど、さまざまなウェブサイトで利用されているデータ可視化ライブラリが「D3.js」です。そんなD3.jsの開発10周年を記念して、開発者のマイク・ボストック氏が「D3.jsを10年間開発する中で学んだこと」を公開しています。 10 Years of Open-Source Visualization / Mike Bostock / Observable https://observablehq.com/@mbostock/10-years-of-open-source-visualization ◆だいやまーく「使用例」がツールの普及に役立つ ボストック氏によると、新たに開発されたツールは、開発者以外の人々にとっては異質なモノであるとのこと。そのため、ツールを普及させるには「ドキュメント」「チュートリアル」「使用例」などを準備する必要があります。 ボ
React.js is a JavaScript library that helps with building complex user interfaces. This website is written using React! I would recommend being familiar with React for this article. It might be worth running through the official tutorial or running through a book (I've heard good things about this one) to make sure you don't stumble on anything in here!
D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。 グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。 今回はD3.jsで折れ線グラフ(Line Chart)を描画してみる | Will Style Inc.|神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。 インストール インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。 <script src="https://d3js.org/d3.v5.min.js"></script> HTML側での準備 HTMLは body タグ内に次の記述を行いま
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
SUGIMOTO Tatsuo/...PublicD3 Tutorial Japanese D3チュートリアル日本語版Showing all 18 listings1.D3 チュートリアル 日本語版SUGIMOTO TatsuoMay 18, 2021•62.D3 チュートリアル 01 : このチュートリアルについてSUGIMOTO TatsuoOct 29, 20183.D3 チュートリアル 02 : 基礎編SUGIMOTO TatsuoOct 15, 2018•14.D3 チュートリアル 04 : 要素の追加SUGIMOTO TatsuoNov 12, 20185.D3 チュートリアル 05: メソッドのチェインSUGIMOTO TatsuoNov 12, 20186.D3 チュートリアル 06 : データのバインディング SUGIMOTO TatsuoNov 12, 2018•17.
2018年02月25日2018-03-10 D3で基本的なグラフ、散布図を書く方法を紹介します。 サンプルデモ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Scatter Plot</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 1. データの準備 var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; var width = 400; // グラフの幅 var height = 300; //
表示データを定義します(例:配列) d3.jsで扱う可能なデータタイプ:配列、JSON、csv、tsvなどがあります ここで、例として配列のデータを使用します(三つのテキストを表示) var dataset = ["aaa", "bbb", "ccc"] ; d3.jsバージョン4を使用し、描画はsvgを使用します <script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg> 表示データ分のHTMLエレメントが作成され、データをエレメントに埋め込まれる d3.jsのセレクト(select)がjQueryと似ているので、理解しやすいです。 d3.jsのセレクション(selectAll)が独自な構造を持っています HTMLに存在しないエレメントを選択できます 選択したエレメントに表示データをセットし、en
【データ入門】D3.jsとは? – グラフのサンプルで理解by UXBEARChart, テクノロジー2020年8月28日2021年2月2日 データを使って、チャートやグラフなど効果的に視覚表現して伝える「データビジュアライゼーション」を実装するのに便利なライブラリ、「D3.js」についてです。 D3.jsとは? D3.js(D3:Data-Driven Documents / データ駆動ドキュメント) データを元に、Webで動的コンテンツを描画するJavaScriptライブラリです。 データを元に、チャートやグラフなどビジュアライズします。 Web標準準拠で、SVG、HTML、CSSなどを利用して、フレームワークに縛られずに最新ブラウザで実装できるのが特徴です。 データに基づいてドキュメントを操作するためのJavaScriptライブラリです。 D3は、HTML、SVG、CSSを使用してデ
概要 Deck.glでサポートされている地図の投影法は、基本webメルカトルになるのですが、d3-geo-projectionを使ってwebメルカトル以外の投影法で地図を表示します。 サンプルコード ウインドが小さいと何やっているか分かりづらいので、こちらで確認してください。 概要 やっていることは単純で、読み込んだgeojsonのgeometry.coordinates(緯度経度)の値を値をd3のプロジェクション関数を使ってスクリーン上の座表に変換し、それをDeck.glのPolygonLayerでポリゴンとして表示しています。 const layer = new PolygonLayer({ id: 'polygon-layer', coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, data: data.features, stroked:
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く