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)