サイトの全体構成

d3 + ggplot + gridSVG

d3 サンプルプログラム

d3 の機能を使って、文字の色を変えるプログラム


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=UTF-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" content="yes" />

        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
        <title>
            JavaScript Sample
        </title>
    
    </head>

    <body>
      <div id="title"> 
      <p> 
      My title
      </p> 
      </div>

      <div id="body"> 
      <p> 
      My body 
      </p> 
      </div>

      <p> 
      hoge
      </p> 

        <script type="text/javascript"> 
            d3.selectAll("#title").style("color", "red"); 
        </script>
          
    </body>
</html>

d3 の機能を使って SVG のズームを行うプログラム


<!DOCTYPE html>
<head>
  <meta charset = "utf-8">
  <script src = "http://d3js.org/d3.v3.js"></script>
</head>

<body>

<div id="hoge">
<svg > 
<g>
  <circle cx="50" cy="50" r="20" />
  <rect x="80" y="80" width="60" height="40" />
</g>

<defs>
  <path id="s01"
        d="M 20,60 C 80,-20 180,100 240,20"
        stroke="black" fill="none" />
</defs>

<text font-size="20" dx="10" dy="-5">
  <textPath xlink:href="#s01">
    hoge hoge hoge hoge
  </textPath>
</text>

</svg> 
</div> 

  <script>
    var svg = d3.selectAll("#hoge g, #hoge text");
    svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))

    function zoom() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    } 
  </script>
</body>

ggplot2 + gridSVG サンプルプログラム

ggplot2 のグラフを svg 形式ファイルで保存するサンプルプログラム


require(ggplot2)
require(gridSVG)
require(XML)
p <- ggplot(iris, aes(Sepal.Length, Sepal.Width)) 
p + geom_point()
s1 <- grid.export("/tmp/s1.svg")
q()

ggplot2 のグラフを含む HTML ファイルを保存するサンプルプログラム（グラフ部分は SVG)

http://www.r-bloggers.com/ggplot2-meet-d3/ より転載し、若干の変更（変更箇所を太字で示す）．

#get the latest version of gridSVG
#install.packages("gridSVG", repos="http://R-Forge.R-project.org")

require(ggplot2)
require(gridSVG)
require(XML) 

#draw a ggplot2 graph
#thanks http://sharpstatistics.co.uk/r/ggplot2-guide/
p <- ggplot(iris, aes(Sepal.Length, Sepal.Width)) 
p + geom_point()
p + facet_grid(. ~ Species) + stat_smooth(method = "lm")

#define a simple html head template
htmlhead <- 
'<!DOCTYPE html>
<head>
  <meta charset = "utf-8">
  <script src = "http://d3js.org/d3.v3.js"></script>
</head>

<body>
'

#use gridSVG to export our plot to SVG
mysvg <- grid.export("panzoom1.svg")

#define a simple pan zoom script using d3
panzoomScript <-
'  <script>
    var svg = d3.selectAll("#gridSVG");
    svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    
    function zoom() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    } 
  </script>
</body>
'

#combine all the pieces into an html file
sink("/tmp/panzoom_ggplot2.html")
cat(htmlhead,saveXML(mysvg$svg),panzoomScript)
#close our file
sink(file=NULL)

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには，「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい．本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先：金子邦彦（かねこくにひこ） [image]