xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Barchart</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.container{
letter-spacing: 2px;
margin-left: 200px;
margin-top: 30px;
font-weight: bold;
}
.toolTip {
position: absolute;
display: none;
font-size: 12px;
font-weight: bold;
min-width: 80px;
height: auto;
background: rgba(0, 0, 0, 0.8);
padding: 12px;
color: #fff;
border-radius: 2px;
text-align: center;
}
#graphic-container{
font-size: 8px;
position:absolute;
margin-top: 480px;
margin-left: 230px;
}
</style>
</head>
<body>
<div class="container">
Total Cars in 2009-2012
</div>
<div id="graphic-container">
Do not be hesitated to play with interaction!
</div>
<script type="text/javascript">
var car_years;
var width = 500;
var height = 500;
var barPadding = 5;
var padding = 50;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
d3.csv("cars.csv",function(dataset){
car_years = d3.nest()
.key(function(d) { return d.Year; })
.rollup(function(v) { return v.length;})
.object(dataset);
var dataset = Object.values(car_years);
var year = Object.keys(car_years);
var regtangle = svg.selectAll("rect").data(dataset).enter().append("rect")
.attr("x",function(d,i){ var adjust=0; if(i>0){adjust = barPadding;} return i*(width/dataset.length)+padding-adjust;})
.attr("y",function(d){return height-(Math.round(d/5))-padding;})
.attr("width",width/dataset.length - padding)
.attr("height",function(d){return Math.round(d/5);})
.attr("fill","rgba(165,42,42,0.7)")
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html( "Amount: "+"<span style='color:red'>" + d.toLocaleString('en') + "</span>");
d3.select(this)
.attr("fill", "rgba(169,169,169,0.8)");
})
.on("mouseout", function(d){
tooltip.style("display", "none");
d3.select(this).attr("fill", "rgba(165,42,42,0.7)");
});
var yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){ return d; })]).range([height-padding,padding]);
var xScale = d3.scaleLinear().domain([0,year.length]).range([0,width]);
var yAxis = d3.axisLeft(yScale);
svg.append("g").attr("class","axis").attr("transform","translate(" + padding + ",0)").call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x",-height/2+padding)
.attr("y", 0-padding+barPadding)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.attr("fill", "#5D6971")
.text("Number of Cars");
var xAxis = d3.axisBottom(xScale).tickValues([0.3,1.27,2.27,3.27]).tickFormat(function(d,i){ return Object.keys(car_years)[i]});
svg.append("g").attr("class","axis").attr("transform","translate("+padding+"," +(height-padding)+")").call(xAxis);
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
cars.csv | index.html |