Skip to content

Instantly share code, notes, and snippets.

@AndriiShtoiko

AndriiShtoiko/.block

Last active October 29, 2018 03:44
Show Gist options
  • Save AndriiShtoiko/863db16fc1b81b27e0181c20238cba2a to your computer and use it in GitHub Desktop.
Save AndriiShtoiko/863db16fc1b81b27e0181c20238cba2a to your computer and use it in GitHub Desktop.
Download ZIP
D3 study: bar charts
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;
}
.bordered {
border: 1px solid #999
}
.margin-div {
margin: 20px 0;
}
</style>
</head>
<body>
<div>
<svg id='svg1'/>
</div>
<div class='margin-div'/>
<div>
<svg id='svg2'/>
</div>
<script>
let rectWidth = 100;
let height = 400;
let data = [100, 250, 175, 200, 120, 20];
let svg = d3.select('#svg1')
.attr('height', height)
.attr('width', 600)
.attr('class', 'bordered')
let info = svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
//first elemnt at 0 point and next - 'index' * width
.attr('x', (d, i) => i * rectWidth)
// 'y' starts on 'height' - 'data/height' = 200px point for
// firts element
.attr('y', d => height - d)
.attr('width', rectWidth)
.attr('height', d => d)
.attr('fill', d => {
if (d === 250) return 'green'
return 'blue'
})
.attr('stroke', '#fff')
let min = d3.min(data);
let max = d3.max(data);
// console.log(min, max);
let extent = d3.extent(data);
// console.log(extent);
let yScale = d3.scaleLinear()
.domain(extent)
.range([height, 0])
let yAxis = d3.axisLeft()
.scale(yScale)
let axis = svg.append('g')
.attr('transform', 'translate(20, 40)')
.call(yAxis);
// console.log(axis.node());
// NEW LESSON *************************************************
setTimeout(() => {
let city = 'San Francisco';
let width = 700;
let height = 300;
let margin = {
top: 20,
bottom: 20,
left: 20,
right: 20,
};
let svg2 = d3.select('#svg2')
.attr('class', 'bordered')
.attr('height', height)
.attr('width', width)
// Generate dummy data ****************
let months = 12;
let days;
let data = [];
while (months > 0) {
days = 30;
while(days > 0) {
data.push({
date: new Date('2018-' + months + '-' + days),
[city]: Math.round(50 * Math.random())
})
--days
}
--months
}
// console.log(data);
// Finish Generate dummy data *********
// scalse
let xExtent = d3.extent(data, d => d.date)
// console.log(xExtent);
let xScale = d3.scaleTime()
.domain(xExtent)
.range([margin.left, width - margin.right]);
let yExtent = d3.extent(data, d=> d[city]);
// console.log(yExtent);
let yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margin.bottom, margin.top])
// console.log(yScale(25))
let heightScale = d3.scaleLinear()
.domain(yExtent)
.range([0, height - margin.top - margin.bottom])
let rect = svg2.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('width', 2)
.attr('height', d => heightScale(d[city]))
.attr('x', d => xScale(d.date))
.attr('y', d => yScale(d[city]))
.attr('fill', 'blue')
.attr('stroke', '#fff')
let xAxis = d3.axisBottom()
.scale(xScale)
let yAxis = d3.axisLeft()
.scale(yScale)
svg2.append('g')
.attr('transform', 'translate('+[0, height - margin.bottom]+')')
.call(xAxis)
svg2.append('g')
.attr('transform', 'translate('+[margin.left, 0]+')')
.call(yAxis)
}, 500)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment