here to learn
ql = import('https://cdn.jsdelivr.net/npm/@quantlib/ql@latest/ql.mjs');
d3 = require("d3@5")
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() }
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() }
md `To cover the domain correctly, we have to use the right dimensionality`
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(2);
var dataset = [];
for(var i=0; i<2048; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[0],seq[1]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(3);
var dataset = [];
for(var i=0; i<2048; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[0], seq[1]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(3);
var dataset = [];
for(var i=0; i<2048; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[0], seq[2]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(3);
var dataset = [];
for(var i=0; i<2048; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[1], seq[2]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[0], seq[1]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[2499], seq[2500]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[4998], seq[4999]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[1738], seq[2889]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[2295], seq[4350]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
// sobol data set
var rng = new ql.SobolRsg().init(5000, 242656);
var dataset = [];
for(var i=0; i<512; i++) {
var seq = rng.nextSequence().value;
dataset.push(JSON.parse(JSON.stringify([seq[429], seq[3944]])));
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
var dataset = [];
for(var i=0; i<512; i++) {
var xs = new Array(5000);
for(let j=0; j<5000;j++){
xs[j] = mt.next().value;
}
dataset.push([xs[1738],xs[2889]]);
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
var dataset = [];
for(var i=0; i<512; i++) {
var xs = new Array(5000);
for(let j=0; j<5000;j++){
xs[j] = mt.next().value;
}
dataset.push([xs[2295],xs[4350]]);
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
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 + ")");
//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)
.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("y",6)
.style("text-anchor","end");
var dataset = [];
for(var i=0; i<512; i++) {
var xs = new Array(5000);
for(let j=0; j<5000;j++){
xs[j] = mt.next().value;
}
dataset.push([xs[429],xs[3944]]);
}
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0]*width;
})
.attr("cy", function(d) {
return d[1]*height;
})
.attr("r", 3);
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}