baptiste · October 29, 2017 02:55
diff --git a/d3.Rhtml b/d3.Rhtml
 <html>

 <head>
 <title>Title</title>
 <script src="//d3js.org/d3.v4.min.js"></script>
 <style>
 .y.axis path {
 fill: none;
 stroke: none;
 }
 </style>
 </head>

 <body>

 <h3>This is where the graph goes</h3>

 <div id="chart"></div>

 <script>
 var margin = {top: 50, right: 20, bottom: 50, left: 50},
 width = 800 - margin.left - margin.right,
 height = 600 - margin.top - margin.bottom;

 var x = d3.scaleLinear()
 .domain([0, 100])
 .range([0, width]);

 var y = d3.scaleLinear()
 .domain([0, 100])
 .range([height, 0]);

 var rad = d3.scaleLinear()
 .domain([0, 100])
 .range([1, 10]);

 var xAxis = d3.axisBottom(x);
 var yAxis = d3.axisLeft(y);

 var jsonCircles = 
 <!--begin.rcode echo=FALSE, results='asis'
 library(jsonlite)
 N = 1e3
 d <- data.frame(x = runif(N, 0, 100),
 y = runif(N, 0, 100),
 radius = runif(N, 0, 100),
 colour = hcl(runif(N, 0, 360)),
 stringsAsFactors = FALSE)
 x <- toJSON(d)
 cat(x)
 end.rcode-->;

 var bsChart = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 bsChart.append('clipPath')
 .attr("id","panel")
 .append("rect")
 .attr("width", width)
 .attr("height", height)

 var circles = bsChart.append("g")
 .attr("id","layer")
 .attr("clip-path","url(#panel)")
 .selectAll("circle")
 .data(jsonCircles)
 .enter()
 .append("circle");

 circles
  .attr("cx", function (d) { return x(d.x); })
  .attr("cy", function (d) { return y(d.y); })
  .attr("r", function (d) { return rad(d.radius); })
  .style("fill", function(d) { return d.colour; });
  

 bsChart.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);

 bsChart.append("g")
 .attr("class", "y axis")
 .call(yAxis);

 bsChart.append("text")
 .attr("class", "label")
 .attr("x", width)
 .attr("y", height)
 .attr("dy", "2em")
 .style("text-anchor", "end")
 .text("x axis");

 bsChart.append("text")
 .attr("class", "label")
 .attr("transform", "rotate(-90)")
 .attr("y", 0)
 .attr("dy", "-2em")
 .style("text-anchor", "end")
 .text("y axis");

 </script>

 </body>
 </html>
	<html>

	<head>
	<title>Title</title>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<style>
	.y.axis path {
	fill: none;
	stroke: none;
	}
	</style>
	</head>

	<body>

	<h3>This is where the graph goes</h3>

	<div id="chart"></div>

	<script>
	var margin = {top: 50, right: 20, bottom: 50, left: 50},
	width = 800 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

	var x = d3.scaleLinear()
	.domain([0, 100])
	.range([0, width]);

	var y = d3.scaleLinear()
	.domain([0, 100])
	.range([height, 0]);

	var rad = d3.scaleLinear()
	.domain([0, 100])
	.range([1, 10]);

	var xAxis = d3.axisBottom(x);
	var yAxis = d3.axisLeft(y);

	var jsonCircles =
	<!--begin.rcode echo=FALSE, results='asis'
	library(jsonlite)
	N = 1e3
	d <- data.frame(x = runif(N, 0, 100),
	y = runif(N, 0, 100),
	radius = runif(N, 0, 100),
	colour = hcl(runif(N, 0, 360)),
	stringsAsFactors = FALSE)
	x <- toJSON(d)
	cat(x)
	end.rcode-->;

	var bsChart = d3.select("#chart").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	bsChart.append('clipPath')
	.attr("id","panel")
	.append("rect")
	.attr("width", width)
	.attr("height", height)

	var circles = bsChart.append("g")
	.attr("id","layer")
	.attr("clip-path","url(#panel)")
	.selectAll("circle")
	.data(jsonCircles)
	.enter()
	.append("circle");

	circles
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); })
	.attr("r", function (d) { return rad(d.radius); })
	.style("fill", function(d) { return d.colour; });


	bsChart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	bsChart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	bsChart.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", height)
	.attr("dy", "2em")
	.style("text-anchor", "end")
	.text("x axis");

	bsChart.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 0)
	.attr("dy", "-2em")
	.style("text-anchor", "end")
	.text("y axis");

	</script>

	</body>
	</html>