@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