Vue.js Advent Calendar 2016 11日目 #まえがき Vue.jsと描画機能とd3.jsの計算機能を合わせて折れ線グラフを描いてみます。 d3.jsで直接描画してもいいのですが、せっかくなのでVue.jsで宣言的に描けたらな、と。 #デモ デモ(jsfiddle) #コード ##メインのコンポーネント <svg :width="width" :height="height" :viewBox="viewBox"> <my-line v-for="(line,index) in lines" :x-scale="xScale" :y-scale="yScale" :parameters="line" :index="index"></my-line> <horizontal-grid v-for="y in yTicks" :x-scale="xScale" :y-s
Civic Tech （シビックテック）に関するアドベントカレンダーです。 シビックテック/シビック・テクノロジーとは、市民がテクノロジーを活用して自分たちの住む街を改善する取り組みの事を指します。 例えば・・・ 全国のシビックテック活動の紹介 各地のCode for Japan Brigade活動の紹介 地域の活動を初めて気づいたこと パパ・ママの為のシビックテック Code for America 研究 コミュニティデザインとシビックテック D3.js でオープンデータをビジュアライズしてみた Code for ◯◯立ちあげたった Code for Japan への提言 Code for Japanフェローからの報告 オープンデータ活用事例 などなど、お気軽にご参加下さい！ 参考： * 2015年：Civic Tech Advent Calendar 2015 * 2014年：Civi
E2D3はデータビジュアライゼーションを通じて、ビジネスや社会における課題を解決することを目標にしています。この連載を通して、E2D3とはどんなことができて、どんな開発手法をとり、なぜOSSの形態をとっているか等余すところなくお伝えしたいと思います。 データ活用の敷居を下げるE2D3 E2D3は「Excel to D3.js」の略称で、一言で言うと「Excelを使ったデータビジュアライゼーションのアプリケーション」。Windows 「Excel 2013以上」やMac 「Excel 2016」、One Drive「Excel Online」から呼び出すことができます。 図1 E2D3のテンプレート群 操作はいたって簡単。ExcelからOfficeアドインである「E2D3」を起動するだけ（起動方法については「Use E2D3」のページをご覧ください）。あとは反映したいデータを選択し、目的に合
Exploring Geospatial data in Elixir with Phoenix, D3, and PostGIS Captain Cook’s Journeys on the Endeavor I wanted to explore using Elixir, the Phoenix Web Framework, the D3 javascript library, and PostGIS. Source code is available at this GitHub repo. I noticed that Kaggle has started hosting some publicly available datasets. One of which is Ocean Ship Logbooks (1750-1850). It is provided as CSV
README.md D3.js small multiple bar charts with tooltips. Follows Mike Bostocks's small multiples example. Tooltip code from here. data.tsv p�0�U �� country year percent China 2002 0 China 2005 0.88 China 2006 0.94 China 2007 0.93 China 2008 0.95 China 2009 0.95 China 2010 0.97 China 2011 0.95 China 2012 0.94 China 2013 0.95 Kenya 2002 0 Kenya 2005 0 Kenya 2006 0 Kenya 2007 0.81 Kenya 2008 0 Kenya
About This project attempts to visually show all the draft picks for a particular team from 1960 - 2012. Individual Graph The invidiual chart shows all the picks(players) grouped by year, color coded by round. This can be further filtered by a particular round or a particular position. Heatmap The heatmap chart shows how individual positions drafted for compare to each other, as displayed by inten
jQueryを「卒業」して次へ進みたいWeb制作者のために、Vue.js、Chart.js、D3.js、Reactなどの最新フレームワークについての記事を「WPJ」の記事の中から紹介します。 1.シンプルで触りやすい、Vue.jsから始めるアプリ開発 『jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？』（WPJ） jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2.シンプルグラフならChat.jsにおまかせ 『カッコいいグラフがむちゃくちゃ簡単に描ける！Chart.js 2.0がスゴい』（WPJ） データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをW
At a recent Bay Area D3 User Group meetup, I gave a short talk on migrating to the new version of D3. I highlighted some of the changes in the version of D3 and shared a simple case study, with the hopes of helping others get started out. This article is a slightly modified and expanded version of my talk. There are so many changes in the new version of D3 that it’s just not possible to cover them
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out. Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R. Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects ar
Visualization is the graphical presentation of information, with the goal of providing the viewer with a qualitative understanding of the information contents. which would result in to retrive hidden insights of the data. D3.js is a JavaScript library for manipulating documents based on data. The main objective of this project is to provide an easy yet powerful javascript library which can be util
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く