<!DOCTYPE html>
<html>
<head>
<script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
<title>Bar chart</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id='year-selector-container'>
<input id='year-slider' class='year-range' type='range' min='2000' max='2005' value='2004'> Year: <span id='year-span'>2004</span>
</div>
<div id='type-selector-container'>
<form id='type-selector'>
<input type='radio' name='type-selector' id='rb-1' value='type1' checked />
<label for='rb-1'>Type 1</label>
<input type='radio' name='type-selector' id='rb-2' value='type2' />
<label for='rb-2'>Type 2</label>
<input type='radio' name='type-selector' id='rb-3' value='type3' />
<label for='rb-3'>Type 3</label>
</form>
</div>
<div id='barchart'></div>
<script src="bar.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function(event) {
var slider = document.getElementById('year-slider');
var output = document.getElementById('year-span');
var data;
fetch('data.json').then(function(response) {
return response.json();
}).then(function(json) {
data = json
createBar();
});
// return the right data
function getData(type) {
var arr = [];
data.forEach(function(item) {
if(type == 'type1') arr.push({"year": item.year, "value": item.type1});
if(type == 'type2') arr.push({"year": item.year, "value": item.type2});
if(type == 'type3') arr.push({"year": item.year, "value": item.type3});
});
return arr;
}
var updateRadio = function() {
typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
console.log('typeSelected:', typeSelected);
d3.selectAll('rect').remove();
drawBar(getData(typeSelected));
}
var updateSlider = function() {
//CACHE these DOM references
//var slider = document.getElementById('year-slider');
//var output = document.getElementById('year-span');
yearSelected = slider.value;
output.innerHTML = yearSelected;
console.log('yearSelected:', yearSelected);
}
d3.select('#type-selector').on('change', updateRadio);
d3.select('#year-slider').on('input', updateSlider);
var yearSelected = d3.select('#year-span').text();
var typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
console.log('yearSelected:', yearSelected);
console.log('typeSelected:', typeSelected);
/////////////////////////////////////////////////
// BAR
/////////////////////////////////////////////////
var svgBar = d3.select("#barchart").append("svg").attr("width", 450).attr("height", 200);
var marginBar = {
top: 20,
right: 20,
bottom: 30,
left: 40
};
var widthBar = +svgBar.attr("width") - marginBar.left - marginBar.right;
var heightBar = +svgBar.attr("height") - marginBar.top - marginBar.bottom;
var xBar = d3.scaleBand().rangeRound([0, widthBar]).padding(0.1);
var yBar = d3.scaleLinear().rangeRound([heightBar, 0]);
//createBar(data);
function createBar() {
var g = svgBar.append("g").attr('id', 'gBar').attr("transform", "translate(" + marginBar.left + ", " + marginBar.top + ")");
xBar.domain(data.map(function(d) {
return d.year;
}));
yBar.domain([0, d3.max(data, function(d) {
if (typeSelected == 'type1') return d.type1;
if (typeSelected == 'type2') return d.type2;
if (typeSelected == 'type2') return d.type3;
})]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + heightBar + ")")
.call(d3.axisBottom(xBar));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yBar).ticks(10, "%"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end");
var initialData = getDataFromType('type1');
drawBar(initialData, heightBar);
}
// return the right data
function getDataFromType(type) {
var arr = [];
data.forEach(function(item) {
if (type == 'type1') arr.push({
"year": item.year,
"value": item.type1
});
if (type == 'type2') arr.push({
"year": item.year,
"value": item.type2
});
if (type == 'type3') arr.push({
"year": item.year,
"value": item.type3
});
});
return arr;
}
// draw barchart
function drawBar(mydata, height) {
d3.select('#gBar').selectAll(".bar")
.data(mydata)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return xBar(d.year);
})
.attr("y", function(d) {
return yBar(d.value);
})
.attr("width", xBar.bandwidth())
.attr("height", function(d) {
return heightBar - yBar(d.value);
});
} // end draw
});
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
[
{"year": 2000, "type1": 30, "type2": 40, "type3": 30},
{"year": 2001, "type1": 75.5, "type2": 4.5, "type3": 30},
{"year": 2002, "type1": 0, "type2": 90, "type3": 10},
{"year": 2003, "type1": 15, "type2": 20, "type3": 65},
{"year": 2004, "type1": 20, "type2": 40, "type3": 40},
{"year": 2005, "type1": 50, "type2": 25, "type3": 25}
]
<html>
<body>
<div style="text-align: center; font-size: 32px">
<a href="javascript:void(0);" onclick="ifr.src='bar.html'; return false;">Bar</a> |
<a href="javascript:void(0);" onclick="ifr.src='donut.html'; return false;">Donut</a>
</div>
<iframe id="ifr" src="bar.html" style="height: 80%; width: 95%;"></iframe>
</body>
</html>
document.addEventListener("DOMContentLoaded", function(event) {
var slider = document.getElementById('year-slider');
var output = document.getElementById('year-span');
var data;
fetch('data.json').then(function(response) {
return response.json();
}).then(function(json) {
data = json
createDonut();
});
var updateRadio = function() {
typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
console.log('typeSelected:', typeSelected);
d3.selectAll('rect').remove();
drawDonut(getDataFromType(typeSelected));
}
var updateSlider = function() {
//CACHE these DOM references
//var slider = document.getElementById('year-slider');
//var output = document.getElementById('year-span');
yearSelected = slider.value;
output.innerHTML = yearSelected;
d3.selectAll('.svgG').remove();
drawDonut(getDataFromYear(yearSelected));
}
d3.select('#type-selector').on('change', updateRadio);
d3.select('#year-slider').on('input', updateSlider);
var yearSelected = d3.select('#year-span').text();
var typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
console.log('yearSelected:', yearSelected);
console.log('typeSelected:', typeSelected);
/////////////////////////////////////////////////
// DONUT
/////////////////////////////////////////////////
var widthDonut = 400;
var heightDonut = 200;
var radiusDonut = Math.min(widthDonut, heightDonut) / 2;
var colorDonut = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arcDonut = d3.arc()
.outerRadius(radiusDonut - 10)
.innerRadius(radiusDonut - 60);
var pieDonut = d3.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var svgDonut = d3.select("#donutchart").append("svg")
.attr("width", widthDonut)
.attr("height", heightDonut);
var dataNestDonut /*= d3.nest()
.key(function(d) {
return d.year;
})
.object(data);*/
function createDonut() {
dataNestDonut = d3.nest()
.key(function(d) {
return d.year;
})
.object(data);
var initialData = getDataFromYear(yearSelected);
drawDonut(initialData);
}
// return the right data
function getDataFromYear(year) {
var filterData = dataNestDonut[year].slice();
var arr = [{"typeData": "type1", "value": filterData[0].type1}, {"typeData": "type2", "value": filterData[0].type2}, {"typeData": "type3", "value": filterData[0].type3}];
return arr;
}
// return the right data
function getDataFromType(type) {
var arr = [];
data.forEach(function(item) {
if (type == 'type1') arr.push({
"year": item.year,
"value": item.type1
});
if (type == 'type2') arr.push({
"year": item.year,
"value": item.type2
});
if (type == 'type3') arr.push({
"year": item.year,
"value": item.type3
});
});
return arr;
}
function drawDonut(data) {
var svgG = svgDonut.append("g")
.attr('class', 'svgG')
.attr("transform", "translate(" + widthDonut / 2 + "," + heightDonut / 2 + ")");
var g = svgG.selectAll(".arc")
.data(pieDonut(data))
.enter()
.append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arcDonut)
.style("fill", function(d) {
return colorDonut(d.data.typeData);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arcDonut.centroid(d) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data.typeData;
});
}
});
<!DOCTYPE html>
<html>
<head>
<script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
<title>Donut chart</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id='year-selector-container'>
<input id='year-slider' class='year-range' type='range' min='2000' max='2005' value='2004'> Year: <span id='year-span'>2004</span>
</div>
<div id='type-selector-container'>
<form id='type-selector'>
<input type='radio' name='type-selector' id='rb-1' value='type1' checked />
<label for='rb-1'>Type 1</label>
<input type='radio' name='type-selector' id='rb-2' value='type2' />
<label for='rb-2'>Type 2</label>
<input type='radio' name='type-selector' id='rb-3' value='type3' />
<label for='rb-3'>Type 3</label>
</form>
</div>
<div id='donutchart'></div>
<script src="donut.js"></script>
</body>
</html>