Skip to content

Instantly share code, notes, and snippets.

@itzikbenh

itzikbenh/.block

Last active Jun 19, 2018
Embed
What would you like to do?
fresh block
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:10;position:fixed;top:0;right:0;bottom:0;left:0; }
body {
width: 100%;
}
svg {
width: 600px;
height: 400px;
outline: 2px dashed red;
overflow: visible;
}
div.tooltip {
position: absolute;
max-width: 200px;
height: auto;
padding: 5px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
font-family: sans-serif;
font-size:12px;
}
#chart {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg id="chart" width="600" height="400"
viewBox="0 0 600 400"
preserveAspectRatio="xMidYMid meet">
</svg>
<script>
let height = 400,
width = 600,
margin = {top: 20, right: 20, bottom: 70, left: 40};
const svg = d3.select('svg')
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
const bottomLabels = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"];
const data = [
{year: '2010', amount: 137390000},
{year: '2011', amount: 259481640},
{year: '2012', amount: 855045568},
{year: '2013', amount: 2330654149},
{year: '2014', amount: 1407867119},
{year: '2015', amount: 3713347324},
{year: '2016', amount: 3596586480},
{year: '2017', amount: 6989203462},
{year: '2018', amount: 2449381741},
];
data.forEach(d => {
d.year = d3.timeParse("%Y")(d.year);
d.year = new Date(d.year)
});
const xExtent = d3.extent(data, d => d.year);
const xScale = d3.scaleBand()
.domain(bottomLabels)
.paddingInner(.2)
.range([0, width - margin.left - margin.right]);
const yExtent = d3.extent(data, d => d.amount);
let yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.amount)])
.range([height - margin.top - margin.bottom, 0]);
const formatValue = d3.format(".1s");
const yAxis = d3.axisLeft()
.tickFormat(d => formatValue(d).replace(/G/,"B"))
.scale(yScale);
const xAxis = d3.axisBottom()
.scale(xScale);
let tooltip = d3.select('body')
.append('div')
.attr("class", "tooltip")
.style('opacity', 0);
const myChart = svg.selectAll('rect').data(data)
.enter().append('rect')
.attr('fill', 'rgba(125, 224, 230, .5)')
.attr('width', d => xScale.bandwidth())
.attr('height', 0)
.attr('x', (d, i) => xScale(d.year.getFullYear()))
.attr('y', height - margin.top - margin.bottom)
.on('mouseover', function (d) {
tooltip.transition().duration(200)
.style('opacity', .9);
tooltip.html('$' + Number(d.amount).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
.style('left', (d3.event.pageX - 35) + 'px')
.style('top', (d3.event.pageY - 30) + 'px');
tempColor = this.style.fill;
d3.select(this)
.transition()
.style('fill', 'yellow')
})
.on('mouseout', function (d) {
tooltip.transition().duration(200)
.style('opacity', 0);
d3.select(this)
.transition()
.style('fill', tempColor)
});
svg.append('g')
.attr('transform', 'translate(' + [0, 0] + ')')
.call(yAxis)
.append('g')
//.attr('transform', 'translate(' + [0, height - margin.bottom] + ')')
.attr('transform', "translate(0," + 310 + ")")
.call(xAxis);
myChart.transition()
.attr('height', (d, i) => (height - margin.top - margin.bottom) - yScale(d.amount))
.attr('y', (d, i) => yScale(d.amount))
.delay((d, i) => i * 20)
.duration(500);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment