[SVG] viewBoxについての考察 - Qiita
<svg width="200" height="200" viewBox="0 0 200 200" style="background: #ddd"> <circle cx="100" cy="100" r="50" fill="orange" /> <circle cx="0" cy="0" r="10" fill="blue" /> </svg> 基本的なこと まず外側の<svg width="200" height="200"の部分の200*200がビューポート（描画エリア）のサイズです。 viewBox="0 0 200 200"が考察したいviewBoxですが、これの意味するところは。 「vievBox="x y width height"」 x: 左上のx座標 y: 左上のy座標 width: 幅 height: 高さ と、書いたところで....分からないと思うので、以下事
![[SVG] viewBoxについての考察 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7ef31547743c6878e9a8041a9138f973b79d33a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY0NTgyMiUyRjZhNmZkNzk1YTdhYzBlZjQ0ZmU1OGY2OTdiY2UwNzczYzc4MzBjMTAlMkZ4X2xhcmdlLnBuZyUzRjE2MTg3MjkwMTQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9Y2ExYzEwNTQxMjZmZTZjYzljMzViZjkyYmVhYjA1YmM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D0d8a81c4edac1f64e5a019b88794a93c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCU1ZHJTVEJTIwdmlld0JveCVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiVFMyU4MSVBRSVFOCU4MCU4MyVFNSVBRiU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWRhZmU4YmY0NTQ5NTRmZjgyM2YyMjczYmY0ZDQ1OGM2%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBtb2NoaXp1a2lrb3Rhcm8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02MDQ3MTU1ZmYwYTA3ODk4MTg2M2E2NmI0YTQwYWI5Yw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D1295d072cb8d271a872024ad08e981e0)
Plottable - Palantir
Because Plottable handles layout, sizing, and positioning, Plottable charts are easier to create and more reusable than charts built only with D3. And, since Plottable Components are powered by D3, the flexibility of D3 is still available. All Plottable components are usable on their own, so you can take small pieces to add to existing charts, or create charts entirely with Plottable. Plottable cu
ツイートに収まる文字数のソースコードだけで幾何学模様が動く「t.d3fc.io」がおもしろすぎ
コンピューターに指令を与えるプログラムを書くと聞くと膨大な量の文字列を書いて……と思わず連想してしまいますが、「t.d3fc.io」はなんとTwitterのツイート1回分の文字数で完結するソースコードが集められたサイトで、実際にソースコードによって描かれる幾何学模様を楽しめるうえに、自分で書いた自作コードを投稿できるようにもなっています。 t.d3fc.io https://t.d3fc.io/ サイトを開くと目に入るのが「A collection of tweet-sized d3 creations(ツイートサイズのd3作品のコレクション)」というキャッチコピー。JavaScriptのライブラリ「D3.js」を使ったソースコードが集められています。なお、「ツイート1回分」とは言っても、Twitterの文字数制限である140文字ではなく、実際には116文字＋ヘルパーという上限になっている
Creating Animated Bubble Charts in D3
This post is very old and no longer represents the current state of how to use D3 properly. You should check out my updated Creating Bubble Charts with D3v4 instead! Update: I moved the code to its own github repo - to make it easier to consume and maintain. Update #2 I’ve rewritten this tutorial in straight JavaScript. So if you aren’t that in to CoffeeScript, check the new one out! Recently, the
Creating hexagonal heatmaps with d3.js
In my previous post I spoke a bit about a program I wrote in R that helps me perform self organizing map (SOM) analyses and create heatmaps. From the cleaned data file all the way to the visualization and analysis of the heatmaps. If you want to know how to add boundaries to heatmaps, see my next post that deals specifically with the boundaries once you have your heatmap all set up. One minor issu
D3.js の Data-Driven な DOM 操作がおもしろい
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lunar Visibility
Arc Tween
Hexbin (area)
Hexagon Mesh
http://ja.d3js.node.ws/document/tutorial/circle.html
IO Domains in Alexa Top 1 Million | techslides.com