Built with blockbuilder.org
Last active
January 11, 2018 23:14
-
-
Save mukhtyar/61d40e36f4c187c5a36207fda5a00e6d to your computer and use it in GitHub Desktop.
D3 - Get data from API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; } | |
| #chart { | |
| margin: 3em; | |
| } | |
| .bar { | |
| background-color: blue; | |
| height: 20px; | |
| margin-top: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id="chart"></svg> | |
| <script> | |
| var rectWidth = 10; | |
| var chartHeight = 400; | |
| var chartWidth = 700; | |
| function render(data) { | |
| var svg = d3.select('#chart') | |
| .attr('height', chartHeight) | |
| .attr('width', chartWidth); | |
| // bars includes update selection | |
| var bars = svg.selectAll('rect') | |
| .data(data, d => d.value); | |
| // exit | |
| bars.exit().remove(); | |
| // enter | |
| var enter = bars.enter().append('rect') | |
| .attr('width', rectWidth) | |
| .attr('stroke', '#FF00FF') | |
| .attr('stroke-width', '2'); | |
| // enter + update | |
| bars = enter.merge(bars) | |
| .attr('x', function(d, i){ | |
| return i * rectWidth; | |
| }) | |
| .attr('y', function(d){ | |
| return chartHeight - d.value; | |
| }) | |
| .attr('height', function(d){ | |
| return d.value; | |
| }) | |
| .attr('fill', 'blue'); | |
| } | |
| var url = 'http://api.cal-adapt.org/api/series/tasmax_year_livneh/1950-01-01/2005-01-01/?pagesize=100&g=%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B-121.46875%2C38.59375%5D%7D'; | |
| d3.json(url, function(data){ | |
| var tasmaxData = data.results.map(function(year){ | |
| return { | |
| date: year.event, | |
| value: +year.image | |
| }; | |
| }); | |
| console.log(tasmaxData); | |
| render(tasmaxData); | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment