Skip to content

Instantly share code, notes, and snippets.

@arthurgailes

arthurgailes/.block

Last active December 16, 2019 20:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arthurgailes/8bf8bcab1c138473dfeb78e9c69cc353 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arthurgailes/8bf8bcab1c138473dfeb78e9c69cc353 to your computer and use it in GitHub Desktop.
Download ZIP
d3 Practice
Raw
.block
license: mit
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment