主なお仕事 日経:Visual Data 本日の目録 VDataコンテンツの作り方 D3.js バッドノウハウ集 Z-indexが効かない問題 Pathのトランジション 折り返さない問題 svgをpngに変換(つらい) VDataコンテンツの作り方 制作フロー 企画発案（記者より） データ収集・分析・整形 デザイン案やモックを作って打ち合わせ デザイン決定 実装 宣伝用の素材等作成 (SNSに流す用のグラフィックスや動画など) 作成チーム ＰＭ１人 デザイナー３人 エンジニア２人 ２ライン(デザイナー１、エンジニア１) 作成期間（２週間〜４週間）、速報(６時間) 一点物が多い これらの条件を踏まえ、日経ビジュアルデータではD3.jsというライブラリを採用しています。 D3.js データビジュアライゼーションライブラリ 特徴 Data-Driven Document デファクトスタンダード
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript l
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
As someone who creates open-source software, I spend a lot of time thinking about how to make software better. This is unavoidable: there’s an unending stream of pleas for help on Stack Overflow, in GitHub issues and Slack mentions, in emails and direct messages. Fortunately, you also see people succeed and make fantastic things beyond your imagination, and knowing you helped is a powerful motivat
When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior: Why the distracting wiggle? There are multiple valid interpretations when interpolating two paths. Here’s th
D3’s selections can be hierarchical, much like the elements and data they join. Consider a table: <table> <thead> <tr><td> A</td><td> B</td><td> C</td><td> D</td></tr> </thead> <tbody> <tr><td> 0</td><td> 1</td><td> 2</td><td> 3</td></tr> <tr><td> 4</td><td> 5</td><td> 6</td><td> 7</td></tr> <tr><td> 8</td><td> 9</td><td> 10</td><td> 11</td></tr> <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td
This is an intro to creating your own animations and transitions in d3.js. In interactive visualisation, there is the word reactive. Well, maybe not literally, but close enough. The fact is that reactivity, or the propension of a visualisation to respond to user actions, can really help engage the user in a visualisation, and help them understand its results. Both of which are usually good things.
Say you’re building a new tool for studying data. What’s the most natural representation for specifying a visualization? A configurable chart? Abstract operators and coordinate systems? Graphical marks and visual encodings? Each abstraction offers its own advantages. For exploratory visualization, you may favor speed (efficiency) so that you can quickly test different views to discover patterns. F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く