<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); })