Skip to content

Instantly share code, notes, and snippets.

@Kashif1Naqvi

Kashif1Naqvi/.block

Last active December 17, 2019 10:20
Show Gist options
  • Save Kashif1Naqvi/0926339d96899cc3e073779b51b10078 to your computer and use it in GitHub Desktop.
Save Kashif1Naqvi/0926339d96899cc3e073779b51b10078 to your computer and use it in GitHub Desktop.
Download ZIP
bubble-chart-with-axis
Raw
.block
license: mit
Raw
code.csv
Time PopMale PopFemale PopTotal Location
0 2 5 13 Pak
2005 3 4 14 ind
2008 1 4 16 can
2010 7 4 12 bt
2012 8 8 16 us
2014 8 13 29 uk
2015 5 15 23 gl
2017 4 17 22 nl
2018 9 18 21 aus
2019 11 13 31 br
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bubble charset</title>
</head>
<body>
<style>
.tick text {
fill:#635F5D;
opacity: 1;
font-size: 1.4em;
}
.tick{
fill:#635F5D;
opacity: .9;
}
.tick line{
fill:#635F5D;
opacity:.1;
}
.tooltips {
pointer-events:none;
position:absolute;
margin:1px;
padding-bottom: : 5px;
opacity: .9;
padding:0px;
background: none repeat scroll 0 white;
border:solid none;
box-shadow: 0px 3px 15px #888888;
color:#8f8e8c;
font: 14px sans-serif;
width:200px;
height:inherit;
text-align: center;
font-weight: normal;
border-radius: 3px;
/* font-family: 'Staatliches', cursive; */
font-family: 'Liu Jian Mao Cao', cursive;
font-family: 'Courgette', cursive;
}
.tooltips ::after {
content: "";
position: absolute;
top: 100%;
left: 37%;
margin-left:-15px;
border-width:10px;
border-style: solid;
border-color: white transparent transparent transparent;
}
hr{
background-color: #000;
}
.tick line{
stroke:lightgrey;
opacity: .9;
}
li{
list-style-type: none;
}
text{
font-size: 15px;
font-weight:normal;
fill:lightseagreen;
pointer-events:none;
}
.text-data{
fill: lightseagreen;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
}
</style>
<select id="selectButton" ></select>
<div id="chart"></div>
<script src="https://d3js.org/d3.v5.min.js" ></script>
<script src="index.js" ></script>
</body>
</html>
Raw
index.js
function render(data){
let width = window.innerWidth,
height = window.innerHeight ,
margin = { top:100 , left:70 , right:90 , bottom:60 },
innerWidth = width - margin.left - margin.right,
innerHeight = height - margin.top - margin.bottom;
// last_updated
// PopMale
var myColor = d3.scaleOrdinal().domain(data)
.range(d3.schemeSet3);
let allGroup = ['PopTotal','PopMale','PopFemale',]
let dropDown = d3.select("#selectButton")
dropDown.selectAll("option").data(allGroup).enter().append("option")
.text(function(d,i){
return d
})
.attr("value",function(d,i){
return d
}).attr("text-anchor","middle")
let yScale = d3.scaleLinear()
.domain([0,d3.max(data,function(d) { return Math.max([d.PopTotal])})])
.range([innerHeight,0])
let xScale = d3.scaleTime()
.domain(d3.extent(data,function(d){
return d.Time
})).range([0,innerWidth])
var z = d3.scaleLinear()
.domain([0,d3.max(data,function(d) { return Math.max([d.PopTotal])})])
.range([ 4, 40]);
let tickFormat = number => d3.format(".3s")(number).replace("G","B")
let line = d3.line()
.x(function(d){
return xScale(d.Time)
})
.y(function(d){
return yScale(d.PopTotal)
})
let xAxis = d3.axisBottom(xScale).ticks(15)
let yAxis = d3.axisLeft(yScale).tickFormat(tickFormat).tickSize(-innerWidth)
let svg = d3.select("#chart").append("svg")
.attr("viewBox",`0 0 ${width} ${height}`)
// .attr("height",height)
// .attr("width",width).style("background-color","black")
let g = svg.append("g").attr("transform",`translate(${margin.top},${margin.left})`)
let tooltip =d3.select("body").append("g").attr("transform",`translate(0,${innerHeight })`).attr("class","tooltips")
let lineData = g.append("path")
.attr("d",line(data))
.attr("stroke","lightseagreen")
.attr("fill","none")
let circle= g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx",0)
.attr("cy",-100)
.attr("r",0)
.on("mouseover", function(d,i){
tooltip.html(`
<b>Location:${d.Location}</b>
<hr>
Population By:
Male:${Math.round(d.PopMale)}
Female:${Math.round(d.PopFemale)}
Total:${Math.round(d.PopTotal)}
`)
.style("top", (d3.event.pageY-85 ) + "px")
.style("left",(d3.event.pageX -59 )+ "px")
})
.on("mouseout",function(d,i){
tooltip.html("")
})
circle.transition()
.attr("cx",function(d){
return xScale(d.Time)
})
.attr("cy",function(d){
return yScale(d.PopTotal)
})
.attr("r",function(d,i){return z(d.PopTotal)})
.attr("fill", function(d){return myColor(d) })
.duration(8000)
let text = g.selectAll("text").data(data)
.enter()
.append("text")
.attr("x",0)
.attr("y",0)
.attr("text-anchor","middle")
.text(function(d,i){
return d.PopTotal
})
text.transition()
.attr("x",function(d){
return xScale(d.Time)
})
.attr("y",function(d){
return yScale(d.PopTotal)
})
.attr("fill", "grey" )
.duration(8000)
let xGroup = g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`)
let yGroup = g.append("g").call(yAxis).attr("transform",`translate(-10,0)`)
g.append("text").attr("x",0).attr("y",70).text("Time").attr("text-anchor","middle").attr("transform",`translate(${innerWidth/2},${innerHeight})`).attr("font-size",28).attr("class","text-data")
g.append("text").attr("x",0 ).attr("y",30).text("Population Vs Years").attr("text-anchor","middle").attr("transform",`translate(${innerWidth/2},${-innerHeight/12})`).attr("font-size",28).attr("class","text-data")
g.append("text").attr("x",-innerHeight/2).attr("y",-60).text("Population").attr("font-size",28).attr("transform","rotate(-90)").attr("class","text-data")
xGroup.select(".domain").remove()
yGroup.select(".domain").remove()
function update(selectedGroup){
let dataFilter = data.map(function(d){
return {
Time:d.Time,
value:d[selectedGroup],
Location:d.Location,
PopFemale:d.PopFemale,
PopMale: d.PopMale,
PopTotal:d.PopTotal
}
})
lineData.datum(dataFilter)
.transition()
.duration(1000)
.attr("d",d3.line().x(d=>xScale(d.Time)).y(d=>yScale(d.value)))
circle.data(dataFilter)
.transition()
.duration(1000)
.attr("cx",function(d){
return xScale(d.Time)
})
.attr("cy",function(d){
return yScale(d.value)
})
text.data(dataFilter)
.transition()
.attr("x",function(d){
return xScale(d.Time)
})
.attr("y",function(d){
return yScale(d.value)
})
.attr("fill", "grey" )
.duration(3000)
}
d3.select("#selectButton").on("change", function(d) {
var selectedOption = d3.select(this).property("value")
update(selectedOption)
})
}
d3.csv("code.csv").then(data=>{
data.forEach(d=>{
d.Time = new Date(d.Time)
d.PopMale = Math.round(d.PopMale)
d.PopFemale = Math.round(d.PopFemale)
d.PopTotal = Math.round(d.PopTotal)
})
render(data)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment