chart = {
var margin = {top: 30, right: 80, bottom: 40, left: 30};
var w = width - margin.left - margin.right;
var h = height - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
//var graph = graph8am; //fish
var buckets = graph.nodes.map(function(node) {
return {
id: node.id,
opens: 0
};
});
var bucketMap = buckets.reduce(function(map, obj) {
map[obj.id] = obj;
return map;
}, {});
graph.links.forEach(link => {
if(bucketMap.hasOwnProperty(link.target)) {
bucketMap[link.target].opens += parseInt(link.opens);
}
});
const barWidth = w / buckets.length;
var xAxisTicks = graph.nodes.map(function(xTick) {
return xTick.id;
});
var xScale = d3.scalePoint()
.domain(xAxisTicks)
.range([0, w]);
/* Top
var xAxis = d3.axisTop(xScale)
.tickSize(0)
.tickPadding(5);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + (margin.left + (barWidth / 2)) + ',' + margin.top + ')')
.call(xAxis)
.select('.domain')
.remove();
*/
/* Bottom */
var xAxis = d3.axisBottom(xScale)
.tickSize(0);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + (margin.left + (barWidth / 2)) + ',' + (h + margin.top) + ')')
.call(xAxis)
.select('.domain')
.remove();
var maxY = d3.max(buckets, function (d) { return d.opens; })
var color = d3.scaleLinear()
.domain([0, 1, maxY/2, maxY])
.range(['#d8dbde', '#ffffdd', '#3e9583', '#1f2d86']); //gray, yellow, green, blue
let g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
let bars = g.selectAll('.bars')
.data(buckets)
.enter()
.append('g')
.attr('transform', function (d) {
return 'translate(' + xScale(d.id) + ',0)';
});
bars.append('rect')
.attr('width', barWidth)
.attr('height', h)
.style('fill', function (d) { return color(d.opens); });
return svg.node()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
