radius scatter

In this example below you will see how to do a radius scatter with some HTML / CSS and Javascript

reduced genotype shows variance mean relationship

Thumbnail
This awesome code was written by thedenatured, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright thedenatured ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>radius scatter</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/thedenatured/radius-scatter-WvBRYr */
  .axis path,
.axis line {
  fill: none;
  stroke: black;
  shapde-rendering:crispEdges;
}
.axis text{
  font-family: sans-serif;
  font-size: 11px;
}
.lab{
  font-family:sans-serif;
}

/*Downloaded from https://www.codeseek.co/thedenatured/radius-scatter-WvBRYr */
var w = 800;
var h = 400;

/*var dataset = [								
{model:"	nr.negbi	",residsq:	0.499418405	,mean:	0	,group:	95	,},
{model:"	nr.negbi	",residsq:	0.092083213	,mean:	1	,group:	46	,},
{model:"	nr.negbi	",residsq:	1.677944431	,mean:	2	,group:	11	,},
{model:"	nr.negbi	",residsq:	4.936121171	,mean:	3	,group:	6	,},
{model:"	nr.negbi	",residsq:	10.93016383	,mean:	4	,group:	3	,},
{model:"	nr.negbi	",residsq:	18.27315116	,mean:	5	,group:	1	,},
{model:"	nr.negbi	",residsq:	28.48713373	,mean:	6	,group:	1	,},
{model:"	nr.negbi	",residsq:	38.49115938	,mean:	7	,group:	1	,},
  /*{model:"	iom.quasi	",residsq:	0.589667771	,mean:	0	,group:	72	,},
{model:"	iom.quasi	",residsq:	0.057692174	,mean:	1	,group:	34	,},
{model:"	iom.quasi	",residsq:	1.410105303	,mean:	2	,group:	14	,},
{model:"	iom.quasi	",residsq:	4.547133964	,mean:	3	,group:	6	,},
{model:"	iom.quasi	",residsq:	10.79527817	,mean:	4	,group:	1	,},
{model:"	iom.quasi	",residsq:	17.70125047	,mean:	5	,group:	1	,},
{model:"	iom.quasi	",residsq:	28.33945155	,mean:	6	,group:	2	,},

{model:"	iom.negbi	",residsq:	0.592109465	,mean:	0	,group:	72	,},
{model:"	iom.negbi	",residsq:	0.059475494	,mean:	1	,group:	34	,},
{model:"	iom.negbi	",residsq:	1.402166461	,mean:	2	,group:	14	,},
{model:"	iom.negbi	",residsq:	4.510107946	,mean:	3	,group:	6	,},
{model:"	iom.negbi	",residsq:	10.82932877	,mean:	4	,group:	1	,},
{model:"	iom.negbi	",residsq:	17.68958108	,mean:	5	,group:	1	,},
{model:"	iom.negbi	",residsq:	28.42540915	,mean:	6	,group:	2	,},
/*
  {model:"	nr.quasi	",residsq:	0.49899948	,mean:	0	,group:	95	,},
{model:"	nr.quasi	",residsq:	0.091901925	,mean:	1	,group:	46	,},
{model:"	nr.quasi	",residsq:	1.678065649	,mean:	2	,group:	11	,},
{model:"	nr.quasi	",residsq:	4.941724493	,mean:	3	,group:	6	,},
{model:"	nr.quasi	",residsq:	10.92958799	,mean:	4	,group:	3	,},
{model:"	nr.quasi	",residsq:	18.27571749	,mean:	5	,group:	1	,},
{model:"	nr.quasi	",residsq:	28.48070709	,mean:	6	,group:	1	,},
{model:"	nr.quasi	",residsq:	38.50866198	,mean:	7	,group:	1	,},
];*/			
//models calculated with blanks in hte Rhh dataset below
var dataset = [								
{model:"	nr.negbi	",residsq:	0.377801	,mean:	0	,group:	103	,},
{model:"	nr.negbi	",residsq:	0.145597	,mean:	1	,group:	41	,},
{model:"	nr.negbi	",residsq:	1.892464	,mean:	2	,group:	11	,},
{model:"	nr.negbi	",residsq:	5.549662	,mean:	3	,group:	3	,},
{model:"	nr.negbi	",residsq:	11.55053	,mean:	4	,group:	3	,},
{model:"	nr.negbi	",residsq:	19.172	,mean:	5	,group:	1	,},
{model:"	nr.negbi	",residsq:	29.16884	,mean:	6	,group:	2	,},
{model:"	iom.negbi	",residsq:	0.369438	,mean:	0	,group:	83	,},
{model:"	iom.negbi	",residsq:	0.156307	,mean:	1	,group:	28	,},
{model:"	iom.negbi	",residsq:	1.902009	,mean:	2	,group:	14	,},
{model:"	iom.negbi	",residsq:	5.646301	,mean:	3	,group:	2	,},
{model:"	iom.negbi	",residsq:	18.95728	,mean:	5	,group:	1	,},
{model:"	iom.negbi	",residsq:	29.46411	,mean:	6	,group:	2	,},
];								
							


var xScale = d3.scale.linear()
  .domain([0,7])
  .range([50,w-200]);

var yScale = d3.scale.linear()
  .domain([0,40])
  .range([h-50,50]);

var rScale = d3.scale.pow()
  .domain([0,72])
  .range([5,20]);
  
var colorScale = d3.scale.ordinal()
  .domain(['nr.negbi','iom.negbi'])
  .range(['#4d4d4d','#60bd68']);

var svg = d3.select('body')
  .append('svg')
  .attr('width',w)
  .attr('height', h);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .ticks(7);
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(10);
  



var circles = svg.selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle')
  .attr('cx',function(d){
    return xScale(d.mean)
  })
  .attr('cy', function(d){
    return yScale(d.residsq)
  })
  .attr('r', function(d){
      return rScale(d.group)
  })
  .attr('opacity',0.8)
  
.attr('fill', function(d){
    return colorScale(d.model)
 });

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (h-50) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class","axis")
  .attr("transform", "translate(" + 50 + ",0)")
  .call(yAxis);

svg.append("text")		
    .attr("class", "lab")		
    .attr("text-anchor", "end")		
    .attr("y", 	10	)
    .attr("x", -110)		
    .attr("dy", ".75em")		
    .attr("transform", "rotate(-90)")		
    .text("Average Squared Residuals");

svg.append("text")		
    .attr("class", "lab")		
    .attr("text-anchor", "end")		
    .attr("y", 380)
    .attr("x", 470)		
    .text("Group Mean Fecundity");

svg.append('rect')
  .attr('x', 610)
  .attr('y', 180)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "#4d4d4d");

svg.append("text")		
    .attr("class", "lab")		
    .attr("text-anchor", "start")		
    .attr("y", 	180	)
    .attr("x", 635)		
    .attr("dy", ".85em")		
    .text("	North Rona	");

svg.append('rect')
  .attr('x', 610)
  .attr('y', 205)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "#60bd68");

svg.append("text")		
    .attr("class", "lab")		
    .attr("text-anchor", "start")		
    .attr("y", 	205	)
    .attr("x", 635)		
    .attr("dy", ".85em")		
    .text("Isle of May");

Comments