Built with blockbuilder.org
xxxxxxxxxx
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/*css to go here*/
svg {
border:1px solid #f0f;
text{
font-size: 14px
}
}
</style>
<body>
</body>
<script>
// properties
var margin = {top: 20, right: 20, bottom: 20, left: 80};
var width = 800 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var yscale = d3.scalePoint();
var xscale = d3.scaleLinear();
var radius = d3.scaleSqrt();
var color = d3.scaleOrdinal(d3.schemeCategory20b);
d3.csv('barleyfull.csv', function(err, response) {
if (err) {
console.log(err);
return;
}
response.forEach(function(d) {
// is this what we wanted to do?
d.yield = +d.yield;
d.year = +d.year;
});
var nested = d3.nest()
.key(function(d){return d.site;})
.key(function(d){return d.gen;})
// .key(function(d){return d.year})
.entries(response);
yscale
.range([0, height])
.domain(
nested[3].values.map(function(d) {return d.key;}))
.round(true);
xscale
.range([0, width])
.domain(
[1927, 1936]
);
radius
.range([0, 15])
.domain([0,
d3.max(response ,function(d) {return d.yield })
]);
var yaxis = d3.axisLeft()
.scale(yscale);
var xaxis = d3.axisBottom()
.tickFormat(function(d) {return d ;})
.scale(xscale);
var chart = d3.select("body")
.append("div")
.datum(nested[3]); // add data to the chart
chart.append("h2")
.text(
function(d) {return d.key;} // already know what data we have
)
var svg = chart.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] + ')');
svg.append("g")
.call(yaxis);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xaxis);
var gens = svg.selectAll("g.sites")
.data(function(d){return d.values;})
.enter().append("g")
.attr("class", function(d) { return d.key;})
.attr("transform", function(d) {
return "translate(0," + yscale(d.key) + ")"
});
gens.selectAll("circle")
.data(function(d){ return d.values;})
.enter().append("circle")
.attr("r", function(d) {
console.log(d)
return radius(d.yield)})
.attr("cy", 0)
.attr("cx", function(d) { return xscale(d.year)})
.attr("fill", function(d) { return color(d.gen)})
/*
d3.select("body")
.append("pre")
.text(
JSON.stringify(nest.entries(response), undefined, 2)
);
*/
console.log(nested);
});
</script>
https://d3js.org/d3.v4.min.js