Very simple example of employing histogram layout to create a histogram.
Built with blockbuilder.org
license: mit |
Very simple example of employing histogram layout to create a histogram.
Built with blockbuilder.org
'use strict'; | |
d3.json('tweets.json', function(error, data) { histogram(data.tweets) }); | |
function histogram(data) { | |
const margin = {top: 25, bottom: 25, left: 25, right: 25}; | |
const width = 500 - margin.right - margin.left; | |
const height = 500 - margin.top - margin.bottom; | |
const svg = d3.select('body') | |
.append('svg') | |
.attr('width', width + margin.right + margin.left) | |
.attr('height', height + margin.bottom + margin.top) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
// define scales | |
const xScale = d3.scaleLinear().domain([0, 5]).range([0, width]); | |
const yScale = d3.scaleLinear().domain([0, 10]).range([height, 0]); | |
// define axes | |
const xAxis = d3.axisBottom().scale(xScale).ticks(5); | |
// histogram layout | |
var histoChart = d3.histogram(); | |
histoChart | |
.domain([0, 5]) | |
.thresholds([1, 2, 3, 4, 5]) | |
.value(d => d.favorites.length); | |
// format data with histogram layout | |
let histoData = histoChart(data); | |
console.log(histoData) | |
// create chart | |
svg.selectAll('rect') | |
.data(histoData) | |
.enter() | |
.append('rect') | |
.attr('x', d => xScale(d.x0)) | |
.attr('y', d => yScale(d.length)) | |
.attr('width', d => xScale(d.x1 - d.x0)) | |
.attr('height', d => height - yScale(d.length)) | |
.style('fill', 'skyblue') | |
.on('click', retweets); | |
svg.append('g').attr('class', 'xAxis').attr('transform', 'translate(0,' + height + ')').call(xAxis); | |
function retweets() { | |
histoChart.value(d => d.retweets.length); | |
histoData = histoChart(data); | |
d3.selectAll('rect') | |
.data(histoData) | |
.transition() | |
.duration(400) | |
.attr('x', d => xScale(d.x0)) | |
.attr('y', d => yScale(d.length)) | |
.attr('width', d => xScale(d.x1 - d.x0)) | |
.attr('height', d => height - yScale(d.length)) | |
.style('fill', 'skyblue') | |
.on('click', favs); | |
} | |
svg.append('text') | |
.html('Histogram Layout Example') | |
.attr('x', width / 3.5) | |
.attr('y', margin.top / 2) | |
.style('font-family', 'consolas') | |
.style('font-size', 25) | |
.style('text-anchor', 'right') | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script> | |
<style> | |
</style> | |
</head> | |
<body> | |
<script src="histogram.js"></script> | |
</body> | |
</html> |
{ | |
"tweets": [ | |
{"user": "Al", "content": "I really love seafood.", "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)", "retweets": ["Raj","Pris","Roy"], "favorites": ["Sam"]}, | |
{"user": "Al", "content": "I take that back, this doesn't taste so good.", "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)", "retweets": ["Roy"], "favorites": []}, | |
{"user": "Al", "content": "From now on, I'm only eating cheese sandwiches.", "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)", "retweets": [], "favorites": ["Roy","Sam"]}, | |
{"user": "Roy", "content": "Great workout!", "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Spectacular oatmeal!", "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Just got a ticket for texting and driving!", "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)", "retweets": [], "favorites": ["Sam", "Sally", "Pris"]}, | |
{"user": "Pris", "content": "Going to have some boiled eggs.", "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]}, | |
{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]}, | |
{"user": "Sam", "content": "@Roy Let's get lunch", "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)", "retweets": ["Pris"], "favorites": ["Sally", "Pris"]} | |
] | |
} | |