<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>index.html</h1>
<script src="index.pack.js"></script>
</body>
</html> <html>
<head>
<link rel="stylesheet" href="index.css">
<title>Learn D3.js</title>
</head>
<body>
<h1>First heading</h1>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="index.js"></script>
</body>
</html> // javascript
var dataset = [1, 2, 3, 4, 5];
d3.select('body')
.selectAll('p')
.data(dataset)
.enter()
.append('p') // appends paragraph for each data element
.text('D3 is awesome!!');
//.text(function(d) { return d; });
// javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter() // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = svgWidth / dataset.length;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) { // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 400, barPadding = 5;
var xScale = d3.scaleLinear()
.domain([0, dataset.length])
.range([0, svgWidth]);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([svgHeight, 0]);
var svg = d3.select('svg') // javascript
var data= [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 300;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var xScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, svgWidth]);
// javascript
var svgWidth = 600, svgHeight = 500;
var svg = d3.select("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("class", "svg-container");
var line = svg.append("line")
.attr("x1", 100)
.attr("x2", 500)
.attr("y1", 50)
.attr("y2", 50)
.attr("stroke", "red") // javascript
var data = [
{"platform": "Android", "percentage": 40.11},
{"platform": "Windows", "percentage": 36.69},
{"platform": "iOS", "percentage": 13.06}
];
var svgWidth = 500, svgHeight = 300, radius = Math.min(svgWidth, svgHeight) / 2;
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var g = svg.append("g")
.attr("transform", "translate(" + svgWidth / 2 + "," + svgHeight / 2 + ")"); //API to fetch historical data of Bitcoin Price Index
const api = 'https://api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
/**
* Loading data from API when DOM Content has been loaded'.
*/
document.addEventListener("DOMContentLoaded", function(event) {
fetch(api)
.then(function(response) { return response.json(); })
.then(function(data) {
var parsedData = parseData(data);
drawChart(parsedData);
})
.catch(function(err) { console.log(err); })
