Генератор диаграмм рассеяния

Редакция Кодкампа -

@import url('https://fonts.googleapis.com/css?family=Droid+Serif|Raleway');

.axis--y .domain { display: none; }

p { color: black; text-align: center; margin-bottom: 15px; margin-top: 15px; font-family: 'Raleway', sans-serif; }

words {

padding-left: 30px; color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; }

words_text {

color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; }

words_text_area {

display:inline-block; color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; padding-left: 100px; }

calcTitle {

text-align: center; font-size: 20px; margin-top: 15px; margin-bottom: 0px; font-family: 'Raleway', serif; }

hr_top {

width: 30%; margin-bottom: 0px; border: none; height: 2px; color: black; background-color: black; }

hr_bottom {

width: 30%; margin-top: 15px; border: none; height: 2px; color: black; background-color: black; }

label, input { display: inline-block; vertical-align: baseline; width: 350px; }

#button { border: 1px solid; border-radius: 10px; margin-top: 20px;

cursor: pointer; outline: none; background-color: white; color: black; font-family: 'Work Sans', sans-serif; border: 1px solid grey; /* Green */ }

#button:hover { background-color: #f6f6f6; border: 1px solid black; }

words_table {

color: black; font-family: Raleway; max-width: 350px; margin: 25px auto; line-height: 1.75; }

summary_table {

color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; padding-left: 20px; }

.label_radio { text-align: center; }

text_area_input {

padding-left: 35%; float: left; }

textarea, textarea:focus { margin-right: 5px; width: 85px; outline: 1px solid #aeaeae; }

.axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; }

h1 { text-align: center; font-size: 50px; margin-bottom: 0px; font-family: 'Raleway', serif; }

Диаграмма рассеяния используется для отображения взаимосвязи между двумя переменными.

Чтобы создать диаграмму рассеяния для переменных X и Y, просто введите значения переменных в поля ниже, затем нажмите кнопку «Создать диаграмму рассеяния».

Переменная X || Переменная Y  Выберите цвет для точечной диаграммы:

//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