Puntenwolkgenerator
Een scatterplot wordt gebruikt om de relatie tussen twee variabelen weer te geven.
Om een spreidingsdiagram voor variabelen X en Y te maken, voert u eenvoudigweg de waarden van de variabelen in de onderstaande vakken in en drukt u vervolgens op de knop ‘Genereer spreidingsdiagram’.
//create function that performs calculations function calc() {
d3.select("svg").remove();
//get data var x = document.getElementById('x').value.match(/\d+/g).map(Number); var y = document.getElementById('y').value.match(/\d+/g).map(Number);
var data = []; for (var i=0; i < x.length; i++) { data.push({ asd: x[i], aror: y[i] }); } //get selected color var color = document.getElementById('scatterColor').value; //create scatterplot var body = d3.select('#chart') var margin = { top: 50, right: 50, bottom: 50, left: 50 } var h = 500 - margin.top - margin.bottom var w = 500 - margin.left - margin.right // Scales var xScale = d3.scale.linear() .domain([ d3.min([0,d3.min(data,function (d) { return d.asd })]), d3.max([0,d3.max(data,function (d) { return d.asd })+5]) ]) .range([0,w]) var yScale = d3.scale.linear() .domain([ d3.min([0,d3.min(data,function (d) { return d.aror })]), d3.max([0,d3.max(data,function (d) { return d.aror })+5]) ]) .range([h,0]) // SVG var svg = body.append('svg') .attr('height',h + margin.top + margin.bottom) .attr('width',w + margin.left + margin.right) .append('g') .attr('transform','translate(' + margin.left + ',' + margin.top + ')') // X-axis var xAxis = d3.svg.axis() .scale(xScale) .ticks(5) .orient('bottom') // Y-axis var yAxis = d3.svg.axis() .scale(yScale) .ticks(5) .orient('left') // Circles var circles = svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('cx',function (d) { return xScale(d.asd) }) .attr('cy',function (d) { return yScale(d.aror) }) .attr('r','6') .attr('stroke','black') .attr('stroke-width',1) .attr('fill', color); // X-axis svg.append('g') .attr('class','axis') .attr('transform', 'translate(0,' + h + ')') .call(xAxis) .append('text') // X-axis Label .attr('class','label') .attr('y',-10) .attr('x',w) .attr('dy','.71em') .style('text-anchor','end') .text('X') // Y-axis svg.append('g') .attr('class', 'axis') .call(yAxis) .append('text') // y-axis Label .attr('class','label') .attr('transform','rotate(-90)') .attr('x',0) .attr('y',5) .attr('dy','.71em') .style('text-anchor','end') .text('Y') } //end calc