Test SVG chart with scrubber
Built with blockbuilder.org
license: mit |
Test SVG chart with scrubber
Built with blockbuilder.org
letter | frequency | |
---|---|---|
A | .08167 | |
B | .01492 | |
C | .02782 | |
D | .04253 | |
E | .12702 | |
F | .02288 | |
G | .02015 | |
H | .06094 | |
I | .06966 | |
J | .00153 | |
K | .00772 | |
L | .04025 | |
M | .02406 | |
N | .06749 | |
O | .07507 | |
P | .01929 | |
Q | .00095 | |
R | .05987 | |
S | .06327 | |
T | .09056 | |
U | .02758 | |
V | .00978 | |
W | .02360 | |
X | .00150 | |
Y | .01974 | |
Z | .00074 |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
#nav .data { | |
fill: lightgrey; | |
stroke-width: 0px; | |
} | |
#nav .line { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
#nav .bar, | |
#nav .circle { | |
fill: grey; | |
} | |
#nav .viewport { | |
stroke: grey; | |
fill: black; | |
fill-opacity: 0.2; | |
} | |
</style> | |
</head> | |
<body> | |
<svg id="bar" width="600" height="400"></svg> | |
<svg id="nav" width="600" height="80"></svg> | |
<script> | |
var svg = d3.select("#bar"); | |
var margin = {top: 60, right: 10, bottom: 30, left: 50}; | |
var width = +svg.attr("width") - margin.left - margin.right; | |
var height = +svg.attr("height") - margin.top - margin.bottom; | |
var data = [ | |
{"date":"2017-05-25","value":0.78}, | |
{"date":"2017-05-26","value":0.37}, | |
{"date":"2017-05-29","value":0.01}, | |
{"date":"2017-05-30","value":0.53}, | |
{"date":"2017-05-31","value":1.00}, | |
{"date":"2017-04-25","value":0.78}, | |
{"date":"2017-04-26","value":0.37}, | |
{"date":"2017-04-29","value":0.01}, | |
{"date":"2017-04-30","value":0.53}, | |
{"date":"2017-05-01","value":1.00}, | |
{"date":"2017-03-25","value":0.78}, | |
{"date":"2017-03-26","value":0.37}, | |
{"date":"2017-03-29","value":0.01}, | |
{"date":"2017-03-30","value":0.53}, | |
{"date":"2017-03-31","value":1.00}, | |
{"date":"2017-02-25","value":0.78}, | |
{"date":"2017-02-26","value":0.37}, | |
{"date":"2017-01-29","value":0.01}, | |
{"date":"2017-01-30","value":0.53}, | |
{"date":"2017-01-31","value":1.00} | |
]; | |
data = data.map(d => { | |
d.realDate = new Date(d.date); | |
return d; | |
}).sort((a, b) => a.realDate - b.realDate); | |
var x = redrawChart(); | |
var y = d3.scaleLinear() | |
.rangeRound([height, 0]) | |
.domain([0, 1]); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
drawXAxis(g); | |
g.append("g") | |
.attr("class", "axis axis--y") | |
.call(d3.axisLeft(y).ticks(10, "%")) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", "0.71em") | |
.attr("text-anchor", "end"); | |
g.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", d => x(d.date.substring(6))) | |
.attr("y", d => y(d.value)) | |
.attr("width", x.bandwidth()) | |
.attr("height", d => height - y(d.value)); | |
var navSvg = d3.select("#nav"); | |
var navMargin = {top: 10, right: 10, bottom: 30, left: 50}; | |
var navWidth = +navSvg.attr("width") - navMargin.left - navMargin.right; | |
var navHeight = +navSvg.attr("height") - navMargin.top - navMargin.bottom; | |
var navG = navSvg.append('g') | |
.attr('transform', 'translate(' + navMargin.left + ',' + navMargin.top + ')'); | |
var navXScale = d3.scaleBand() | |
.rangeRound([0, navWidth]) | |
.domain(data.map(d => d.date.substring(6))) | |
.padding(0.1); | |
// data.map(d => d.date.substring(6)) | |
var navYScale = d3.scaleLinear() | |
.rangeRound([navHeight, 0]) | |
.domain([0, 1]); | |
navG.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + navHeight + ")") | |
.call(d3.axisBottom(navXScale)) | |
.append("text"); | |
var navData = d3.area() | |
.x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2) | |
.y(d => navYScale(d.value)) | |
.y1(navHeight); | |
var navLine = d3.line() | |
.x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2) | |
.y(d => navYScale(d.value)); | |
navG.append('path') | |
.attr('class', 'data') | |
.attr('d', navData(data)); | |
navG.append('path') | |
.attr('class', 'line') | |
.attr('d', navLine(data)); | |
navG.selectAll(".circle") | |
.data(data) | |
.enter().append("circle") | |
.attr("class", "circle") | |
.attr("cx", d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2) | |
.attr("cy", d => navYScale(d.value)) | |
.attr("r", 3) | |
.attr("width", navXScale.bandwidth()) | |
.attr("height", d => navHeight - navYScale(d.value)); | |
navG.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", d => navXScale(d.date.substring(6))) | |
.attr("y", d => navYScale(d.value)) | |
.attr("width", navXScale.bandwidth()) | |
.attr("height", d => navHeight - navYScale(d.value)); | |
// var viewport = d3.brush() | |
// .on("brush", brushHandler); | |
// function brushHandler() { | |
// var selection = d3.event.selection; | |
// navXScale.domain(selection ? navXScale.domain() : viewport.extent()); | |
// // debugger; | |
// x = redrawChart(null, g); | |
// } | |
// navG.append('g') | |
// .attr('class', 'brush') | |
// .call(viewport); | |
function redrawChart(domain, g) { | |
var _domain = domain || data.map(d => d.date.substring(6)); | |
x = d3.scaleBand() | |
.rangeRound([0, width]) | |
.domain(_domain).padding(0.1); | |
// debugger; | |
// drawXAxis(g); | |
return x; | |
} | |
function drawXAxis(g) { | |
g.append("g") | |
.attr("class", "axis axis--x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)) | |
.append("text"); | |
} | |
</script> | |
</body> |