diamonds

diamonds

by nancynancy

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre...

CSS

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
	background-color:none;
}
#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
}

.axis path,
.axis line{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  opacity: 0.1;
}
pre {
  display:none;
  }

JavaScript

////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var margin = {
            top: 30,
            right: 30,
            bottom: 60,
            left: 60};
var width = 500 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.5);
var y = d3.scaleLinear().range([height , 40]).domain([0,20]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var color = d3.scaleOrdinal(d3.schemeCategory10);

////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var panel = svg.append("rect")
    .attr("width", width)
    .attr("height", height - 40)
    .attr("transform", "translate(0" + "," + 40 + ")")
    .attr("fill", "black")
    .attr("opacity", 0.1);
    
var titlebar = svg.append("rect")
    .attr("width", width)
    .attr("height", 40)
		.attr("x", 0)
    .attr("y", 0)
    .attr("fill", "black")
    .attr("opacity", 0.3);

var dataOriginal = d3.csvParse(d3.select("pre#data").text());
dataOriginal.forEach(function(d){
    d.SepalLength = +d.SepalLength;
    d.SepalWidth = +d.SepalWidth;
    d.PetalLength = +d.PetalLength;
    d.PetalWidth = +d.PetalWidth;
  }) ;
  
var dataCount = d3.nest()
  .key(function(d) { return d.Species; })
  .key(function(d) { return d.Color; })
  .rollup(function(v) { return v.length })
  .entries(dataOriginal);
  /*.map(function(group) {
    return {
      Species:  group.key,
      Count: group.value,
    }
  });*/

var data = []
dataCount.forEach(function(group) {
  group.values.forEach(function(flower) {
    data.push({
      Species: group.key,
     ...