Published (unlisted)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Changed in fork
{ var mt = new ql.MersenneTwisterUniformRng().init1(42); var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // DOM.svg() is a Observables specific convenience method which creates an SVG DOM element. const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom))
-
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") .style("overflow", "visible");
//Set up scales that we can use to draw the axes var x = d3.scaleLinear() .domain([0.0,1.0]) .range([0,width]); var y = d3.scaleLinear() .domain([0.0,1.0]) .range([height,0]); //Setting up the axes var xAxis = d3.axisBottom().scale(x).ticks(5); var yAxis = d3.axisLeft().scale(y).ticks(5); //Add the axis to our svg element // x-axis svg.append("g") .attr("class", "x axis label") .attr("transform", "translate(" + 0 + "," + height + ")") .call(xAxis) .append("text") .text("x") .attr("x", width) .attr("y", -6)
+
.attr("fill","currentColor")
.style("text-anchor", "end"); // y-axis svg.append("g") .attr("class", "y axis label") .call(yAxis) .append("text") .text("y") .attr("transform", "rotate(-90)")
+
.attr("x",6)
.attr("y",6)
+
.attr("fill","currentColor")
.style("text-anchor","end"); var dataset = []; for(var i=0; i<2048; i++) { dataset.push([mt.next().value,mt.next().value]); } svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) {
-
return d[0]*width;
+
return x(d[0]);
}) .attr("cy", function(d) {
-
return d[1]*height;
+
return y(d[1]);
}) .attr("r", 3); // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }
Insert cell
Insert cell
Changed in fork
{ var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // DOM.svg() is a Observables specific convenience method which creates an SVG DOM element. const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom))
-
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") .style("overflow", "visible");
//Set up scales that we can use to draw the axes var x = d3.scaleLinear() .domain([0.0,1.0]) .range([0,width]); var y = d3.scaleLinear() .domain([0.0,1.0]) .range([height,0]); //Setting up the axes var xAxis = d3.axisBottom().scale(x).ticks(5); var yAxis = d3.axisLeft().scale(y).ticks(5); //Add the axis to our svg element // x-axis svg.append("g") .attr("class", "x axis label") .attr("transform", "translate(" + 0 + "," + height + ")") .call(xAxis) .append("text") .text("x") .attr("x", width) .attr("y", -6)
+
.attr("fill","currentColor")
.style("text-anchor", "end"); // y-axis svg.append("g") .attr("class", "y axis label") .call(yAxis) .append("text") .text("y") .attr("transform", "rotate(-90)")
+
.attr("x",6)
.attr("y",6)
+
.attr("fill","currentColor")
.style("text-anchor","end"); // sobol data set var rng = new ql.SobolRsg().init(1); var dataset = []; for(var i=0; i<2048; i++) { dataset.push([rng.nextSequence().value[0], rng.nextSequence().value[0]]); } svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) {
-
return d[0]*width;
+
return x(d[0]);
}) .attr("cy", function(d) {
-
return d[1]*height;
+
return y(d[1]);
}) .attr("r", 3); // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node() }
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell