Built with blockbuilder.org
xxxxxxxxxx
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style type="text/css">
/*css to go here*/
svg {
width: 600;
height: 400;
}
circle {
opacity: 0.5;
}
</style>
<body></body>
<script>
// properties
var radius = 10;
var duration = 1500;
var width = 800;
var height = 500;
const margin = 50;
var svg = d3.select('body').append('svg');
svg.attr('width', width).attr('height', height);
const startYear = 1927;
const title = svg.append('text').text('Barley Yield by Site')
.attr('class', 'title').attr('font-size', 24).attr('font-family', 'Calibri')
.attr('x', margin).attr('y', margin);
const yearTitle = svg.append('text').text(startYear)
.attr('class', 'year-title').attr('font-size', 36).attr('font-family', 'Calibri').attr('x', width - margin * 6).attr('y', margin).attr('fill', 'lightblue').attr('opacity', 0.8);
const circleRad = 15;
const scales = {
x: d3.scaleBand().rangeRound([margin, width - margin]),
y: d3.scaleLinear().range([height - margin, margin]),
color: d3.scaleOrdinal(d3.schemePaired)
};
d3.csv('barleyfull.csv', (err, data) => {
data.forEach(d => {
d.yield = +d.yield;
d.year = +d.year;
d.uniqueId = d.site + '-' + d.gen;
})
scales.x.domain(data.map(d => d.site));
scales.y.domain(d3.extent(data, d => d.yield));
var year = 1927;
var i = 0;
svg.append('g').attr('class', 'x-labels').selectAll('text').data(scales.x.domain())
.enter().append('text')
.attr('class', 'site-label')
.text(d => d)
.attr("font-family", "sans-serif")
.attr('x', d => scales.x(d))
.attr("font-size", "14px")
.attr('fill', 'gray')
.attr('text-anchor', 'middle')
.attr('y', d => height - margin);
setInterval(() => {
updateViz(data, year + (i % 9), svg, scales);
i += 1;
}, 1000);
})
function updateViz(data, year, svg, scales) {
var circles = svg.selectAll('circle')
.data(data.filter(d => d.year === year), d => d.uniqueId);
const exit = circles.exit()
.transition(500)
.attr('r', 0).remove();
var enter = circles.enter().append('circle')
.attr('r', circleRad)
.attr('cId', d => d.uniqueId)
.attr('cx', d => scales.x(d.site))
.attr('cy', d => scales.y(d.yield));
circles.merge(enter)
.attr('fill', d => scales.color(d.gen))
.transition(1000)
.attr('cx', d => scales.x(d.site) + (Math.random() - 0.5) * 30)
.attr('cy', d => scales.y(d.yield));
const yearTitle = svg.selectAll('.year-title')
.datum(year)
.transition(500)
.attr('opacity', 0)
.attr('font-size', 4)
.text(year)
.transition(500)
.attr('opacity', 0.8)
.attr('font-size', 36);
}
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-color.v1.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js