Built with blockbuilder.org
forked from adammak137's block: d3 Practice
license: mit |
Built with blockbuilder.org
forked from adammak137's block: d3 Practice
<!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; } | |
</style> | |
</head> | |
<body> | |
<p> click on this to do something <p> | |
<script> | |
// Feel free to change or delete any of the code you see in this editor! | |
// let dataArray = [5, 10, 13, 19, 21, 25, 22, 18, 15, | |
//13, 11, 12, 15, 18, 17, 16, 18, 23, 25,22, ], | |
let dataArray = [ | |
{key:0, value: 5}, | |
{key:1, value: 10}, | |
{key:2, value: 13}, | |
{key:3, value: 16}, | |
{key:4, value: 21}, | |
{key:5, value: 25}, | |
{key:6, value: 22}, | |
{key:7, value: 18}, | |
{key:8, value: 15}, | |
{key:9, value: 13}, | |
{key:10, value: 11}, | |
{key:11, value: 12}, | |
{key:12, value: 15}, | |
{key:13, value: 18}, | |
{key:14, value: 17}, | |
{key:15, value: 16}, | |
{key:16, value: 18}, | |
{key:17, value: 23}, | |
{key:19, value: 26}, | |
{key:19, value: 22}, | |
] | |
w = 500, h = 200, padding = 30, key = d=> d.key; | |
d3.select("p") | |
.on("click", function () { | |
const maxValue = 25; | |
let newNumber = Math.floor(Math.random() * maxValue); | |
// adds new key in sequential order | |
let keyAdder = d3.max(dataArray, d => d.key +1) | |
// pushes a new entry into the key | |
dataArray.push({key: keyAdder, value: newNumber}); | |
// removes first array entry | |
dataArray.shift(); | |
// update scales | |
xScale.domain(d3.range(dataArray.length)); | |
yScale.domain([0,d3.max(dataArray, (d) => d.value)]); | |
cScale.domain([0,d3.max(dataArray, (d) => d.value)]); | |
//select | |
let bars = canvas.selectAll("rect") | |
.data(dataArray, key); | |
//Enter | |
bars.enter() | |
.append("rect") | |
.attr("x", w) | |
.attr("y", d => h - yScale(d.value)) | |
.attr("width", xScale.bandwidth()) | |
.attr("height", d => yScale(d.value)) | |
.attr("fill", d => cScale(d.value) ) | |
.merge(bars) | |
.transition() | |
.duration(500) | |
.attr("x", (d,i) => xScale(i)) | |
.attr("y", d => h - yScale(d.value)) | |
.attr("width", d => xScale.bandwidth()) | |
.attr("height", d => yScale(d.value)) | |
; | |
bars.exit() | |
.transition() | |
.duration(500) | |
.attr("x", -xScale.bandwidth()) | |
.remove(); | |
let numbers = canvas.selectAll("text") | |
.data(dataArray, key) | |
numbers.enter() | |
.append("text") | |
.text(function(d) { return d.value}) | |
.attr("x", (d,i) => xScale(i+1) ) | |
.attr("y", (d) => h - yScale(d.value) +14) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "12px") | |
.merge(numbers) | |
.transition() | |
.duration(502) | |
.attr("x", (d,i) => xScale(i) + xScale.bandwidth()/4) | |
.attr("y", (d) => h- yScale(d.value) +14) | |
// remove numbers same as bars above | |
numbers.exit() | |
.transition() | |
.duration(500) | |
.attr("x", -xScale.bandwidth()) | |
.remove(); | |
}); | |
const yScale = d3.scaleLinear() | |
.domain([0, d3.max(dataArray, (d) => d.value)]) | |
.range([0 ,h -padding]); | |
const cScale = d3.scaleLinear() | |
.domain([0,d3.max(dataArray, (d) => d.value)]) | |
.range(["black","yellow"]); | |
const xScale = d3.scaleBand() | |
.domain(d3.range(dataArray.length)) | |
.range([0,w]) | |
.round(true) | |
.paddingInner(0.05); | |
const canvas = d3.select("body") | |
.append("svg") | |
.attr("width",w) | |
.attr("height",h); | |
canvas.selectAll("rect") | |
.data(dataArray, key) | |
.enter() | |
.append("rect") | |
.attr("x",(d,i) => xScale(i)) | |
.attr("y",d => h-yScale(d.value)) | |
.attr("width", xScale.bandwidth()) | |
.attr("height", d => yScale(d.value)) | |
.attr("fill",d => cScale(d.value)); | |
canvas.selectAll("text") | |
.data(dataArray, key) | |
.enter() | |
.append("text") | |
.text(function(d) {return d.value}) | |
.attr("x", (d,i) => xScale(i) +xScale.bandwidth()/4) | |
.attr("y", d => h- yScale(d.value) +14) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "12px") | |
</script> | |
</body> |