score:2
Accepted answer
d3 json
function is asynchronous. so your code to create the line is executed before the json data actually arrived. you need to move the line creation code into the json
function:
d3.json("https://api.myjson.com/bins/53grr", function(error, data) {
// log the returned object on console unless error
if (error) return console.error(error);
console.log(data);
var days = data.data.weather;
// step through each day
days.foreach(function(d) {
// step through each hour
d.hourly.foreach(function(h) {
dailyraintotal = dailyraintotal + parsefloat(h.precipmm);
});
// add data to day
day = {date: new date(d.date), rain: dailyraintotal.tofixed(2)};
// push day to results array
linedata.push(day);
// reset the total
dailyraintotal = 0;
});
var vis = d3.select("#visualisation"),
width = 600,
height = 250,
margins = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xrange = d3.time.scale().range([margins.left, width - margins.right]).domain([d3.min(linedata, function (d) {
return d.date;
}),
d3.max(linedata, function (d) {
return d.date;
})
]),
yrange = d3.scale.linear().range([height - margins.top, margins.bottom]).domain([d3.min(linedata, function (d) {
return d.rain;
}),
d3.max(linedata, function (d) {
return d.rain * 1.2;
})
]),
xaxis = d3.svg.axis()
.scale(xrange)
.ticksize(5),
yaxis = d3.svg.axis()
.scale(yrange)
.ticksize(5)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margins.bottom) + ")")
.call(xaxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margins.left) + ",0)")
.call(yaxis);
var linefunc = d3.svg.line()
.x(function (d) {
return xrange(d.date);
})
.y(function (d) {
return yrange(d.rain);
})
.interpolate('linear');
vis.append("svg:path")
.attr("d", linefunc(linedata))
.attr("stroke", "blue")
.attr("stroke-width", .5)
.attr("fill", "none");
});
Source: stackoverflow.com
Related Query
- Creating a line grpah from array of data objects
- Creating a line graph from array of data objects
- Make a line chart in D3.js loading data from an array
- D3JS Plotting Line Graph From Array Data (Data is undefined error)
- Get d3 Extent (Min/Max) from multiple line data array
- Loading data from MySQL to use in D3 for creating line graph
- D3 - How to create multiple line charts from an array of objects
- Converting data from an array of objects of one kind to another
- How to get the data from given array of objects in d3.js
- creating D3 Word Cloud by using an array of json objects instead of reading from json file
- Creating a line graph taking data from database
- D3js take data from an array instead of a file
- How to get maximum value from an array of objects to use in d3.scale.linear().domain()
- In d3, how to get the interpolated line data from a SVG line?
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- Creating a D3.js Collapsible Tree from CSV data
- Displaying Data from Multidimensional Array in D3.js
- d3.js - max and min value from json data which has array of values
- How can I use D3.js to take an array of Javascript objects use them in a line graph?
- Traverse Array of objects to generate d3 Sankey Chart data
- Date and time transition from data with line
- Copy data from csv into array in D3
- Simple Line chart from AngularJS array
- how to get data with tsv or csv to array in d3.js from a txt file?
- d3 line and area charts not updating with new data array
- Selecting a specific value from an array of objects in javascript
- Chart is not showing the data array of objects
- d3.js — creating HTML table from 2 dimensional array but excluding the first inner array?
- d3 line and points on map from csv data
- How to change JSON data to Javascript array of objects with D3
More Query from same tag
- D3js collapse objects with duplicate properties
- Why are HTML elements appending after the <script> tag
- Reverse data of grid in d3.js
- d3 doesn't plot tree when there are exclusively single children?
- d3.js datetime: hour not displaying correctly on y-axis
- Setting variable width on d3 tree nodes
- d3 zoom consumes event and prevents mouseover
- D3 - align leftmost side of circle to x-axis time scale
- d3 adding data attribute conditionally
- How to add links dynamically to a D3 Tree
- Use words as tick labels with unequal intervals in D3.js
- How to prevent a SVG marker (arrow head) to inherit path's stroke width?
- How to select existing chart and update it in NVD3.js
- D3.js: 'this' implicitly has type 'any' because it does not have a type annotation
- d3js set tickValues for time scale axis
- Getting two different output from same json
- Onclick event fires, but append-code is not executed
- d3.js - Query regarding interpolate values
- Angular directive async data not binding?
- D3 what is the difference between these two way of data binding?
- Execute Javascript-File with Button click in d3
- SVG Drop Shadow Layering
- How to request d3 data from service?
- Adding hover effect in d3 word cloud
- How to show tooltip for an SVG element that is inside a zoomable SVG rectangle?
- d3.js inner bubble chart
- d3.js zoom transition with map tiles
- D3 Performance with large data ( & feedback needed)
- d3.js mypaths is not a function
- How to translate SVG and all its children