Skip to content

Instantly share code, notes, and snippets.

@tizon9804

tizon9804/.block

Last active June 8, 2017 15:47
Show Gist options
  • Save tizon9804/44661eef4d2dce072930a80f9ed04317 to your computer and use it in GitHub Desktop.
Save tizon9804/44661eef4d2dce072930a80f9ed04317 to your computer and use it in GitHub Desktop.
Download ZIP
Tutorial 2 D3
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; }
.tooltip{
width: 100px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border: 1px solid #dedede;
padding: 10px;
font-size: 15px;
font-family: nyt-franklin;
border-radius:2px;
box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
background-color: rgba(255, 255, 255, 1);
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
data = []
data.push({nombre:"willi", edad:190,telefono:"727272727272"})
data.push({nombre:"juansiii", edad:350,telefono:"6969696969"})
data.push({nombre:"stivii", edad:50,telefono:"1234"})
width=960
height=500
var svg = d3.select("#chart").append("svg")
.attr("width", width+20)
.attr("height", height+20)
var xs = d3.scaleLinear().range([0,width]),
ys = d3.scaleBand().rangeRound([height, 0],.1).paddingInner(0.1),
xaxis = d3.axisBottom(xs);
yaxis = d3.axisLeft(ys);
svg.append("g")
.attr("class","x axis")
.call(xaxis).append("text").text("x")
svg.append("g")
.attr("class","y axis")
.attr("transform", "translate(0," + height + ")")
.call(yaxis).append("text").text("y")
var tooltip = d3.select("#chart").append("div")
.attr("class", "tooltip")
update (data)
function update(mdata){
//selection and map data
barra = svg.selectAll("rect").data(mdata);
ys.domain(mdata.map(function(d){
return d.nombre;
}))
xs.domain([0,d3.max(data,function(d){return d.edad})])
svg.select(".x axis").transition().duration(500).call(xaxis)
svg.select(".y axis").transition().duration(500).call(yaxis)
//update
barra.enter()
.append("rect")
.merge(barra)
.on("mouseover", function(d){
showTooltip(d,this);
}).on("mouseout",function(d){
tooltip.style("visibility", "hidden");
tooltip.html('')
d3.select(this).transition()
.duration(100)
.style("opacity", 1)
})
.transition().duration(500)
.attr("x",0)
.attr("y",function(d,i){return i*(50+1)})
.attr("width",function (d){return d.edad})
.attr("height",50)
.style("fill","green")
.style("opacity",function(d){return 1-(1/d.edad)})
//remove
barra.exit()
.transition().duration(500)
.remove()
}
function showTooltip(d,o){
tooltip.style("visibility", "visible");
tooltip.transition()
.duration(200)
.style("opacity", 1)
tooltip.append("h4").attr("class", "page-header")
.style("margin", "0px")
.style("text-align", "center").text('Juansiiii');
divDesc = tooltip.append("div")
.attr("class", "TooltipDescription")
.style("width", "50%")
.style("float", "left")
divDesc.append("h5").text('Nombre: ' + d.nombre);
divDesc.append("h5").text('Edad: ' + d.edad);
divDesc.append("h5").text('Telefono: ' + d.telefono);
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
d3.select(o).transition()
.duration(100)
.style("opacity", 0.5)
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment