Skip to content

Instantly share code, notes, and snippets.

@lnmunhoz

lnmunhoz/.block

Last active March 16, 2019 07:25
Show Gist options
  • Save lnmunhoz/61b256b522439913ab89f3099ebc6fda to your computer and use it in GitHub Desktop.
Save lnmunhoz/61b256b522439913ab89f3099ebc6fda to your computer and use it in GitHub Desktop.
Download ZIP
d3: revenues scatter plots dynamic
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>
<script>
const profitData = [
{
"month": "January",
"revenue": "13432",
"profit": "8342"
},
{
"month": "February",
"revenue": "19342",
"profit": "10342"
},
{
"month": "March",
"revenue": "17443",
"profit": "15423"
},
{
"month": "April",
"revenue": "26342",
"profit": "18432"
},
{
"month": "May",
"revenue": "34213",
"profit": "29434"
},
{
"month": "June",
"revenue": "50321",
"profit": "45343"
},
{
"month": "July",
"revenue": "54273",
"profit": "47452"
}
].map(d => ({
...d,
profit: +d.profit,
revenue: +d.revenue
}))
const margin = {
left: 100,
right: 10,
top: 20,
bottom: 100
}
let showRevenue = true
const width = 600 - margin.left - margin.right
const height = 400 - margin.top - margin.bottom
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", width + margin.top + margin.bottom)
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
const x = d3.scaleBand()
.range([0, width])
.paddingOuter(0.3)
.paddingInner(0.3)
const y = d3.scaleLinear()
.range([0, height])
const xAxisCall = d3.axisBottom(x)
const yAxisCall = d3.axisLeft(y)
const xAxisGroup = g.append("g")
.attr("transform", `translate(0, ${height})`)
const yAxisGroup = g.append("g")
const t = d3.transition().duration(750)
g.append("text")
.attr("y", height + 50)
.attr("x", width / 2)
.attr("font-size", "20px")
.attr("text-anchor", "middle")
.text("Month");
const labelText = g.append("text")
.attr("y", -60)
.attr("x", -(height/2))
.attr("font-size", "20px")
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Revenue");
function update(data) {
const prop = showRevenue ? "revenue" : "profit"
const labelTextValue = `${prop[0].toUpperCase()}${prop.slice(1)}`
x.domain(data.map(d => d.month))
y.domain([d3.max(data, d => d[prop]), 0])
xAxisGroup.transition(t).call(xAxisCall)
yAxisGroup.transition(t).call(yAxisCall)
labelText.text(labelTextValue)
const rects = g.selectAll("circle")
.data(data, d => d.month)
rects.exit()
.attr("fill", "red")
.transition(t)
.attr("cy", y(0))
.attr("height", 0)
.remove()
rects.enter().append("circle")
.attr("fill", "gray")
.attr("cx", (d, i) => x(d.month))
.attr("cy", d => y(0))
.attr("r", 5)
.merge(rects)
.transition(t)
.attr("cx", (d, i) => x(d.month) + x.bandwidth() / 2)
.attr("cy", d => y(d[prop]))
}
update(profitData)
d3.interval(() => {
showRevenue = !showRevenue
// const data = profitData
const data = showRevenue ? profitData : [...profitData.slice(1, 3), ...profitData.slice(5)]
console.log(data)
update(data)
}, 1000)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment