I have an area chart I am using from http://bl.ocks.org/mbostock/3883195 with a simple modification of using json data.
The json is returned without issue, and no other errors present themselves, however, no chart is displayed.
The x and y axes are displayed, but no chart.
jsfiddle.net/oqc19yff/
Any pointers welcome.
Kev
This is incorrect:
x.domain(d3.extent(data, function(d) { return d.event_time; }));
Reason:
Because x is an ordinal scale.
Instead it should have been:
//declare a variable array
var k = [];
data.forEach(function(d) {
d.event_time = d.event_time;
d.total = +d.total;
k.push(d.event_time);//in that array store all the event_time
});
Now set that array as domain of x.
x.domain(k);
working code here
Related
I have the following parsing code of time in h:m:s format
var ISO8601format=d3.time.format("%Y-%m-%dT%H:%M:%SZ");
var hoursandminsformat=d3.time.format("%H:%M:%S");
e.time=hoursandminsformat(ISO8601format.parse(e.time));
I have a json file with reading at different times from different sensors.
Sample data is=
[
{"id":1,"time":"2015-03-29T20:32:24Z"},
{"id":2,"time":"2015-03-29T20:32:24Z"},
{"id":3,"time":"2015-03-29T20:32:24Z"},
{"id":1,"time":"2015-03-29T20:33:24Z"},
{"id":2,"time":"2015-03-29T20:33:24Z"},
{"id":3,"time":"2015-03-29T20:33:24Z"},
]
I am going to plot a dc.js rowchart where there will be time in minutes in the x axis and frequency in the y axis. I am using the following code to do this. But its returning NaNs.
var freqchart= dc.lineChart("#chart1");
var countByTime=ndx.dimension(function (d) {return d.time; });
var freqbyTimeGroup = countByTime.group().reduceCount();
freqchart.width(400).height(200).transitionDuration(500)
.dimension(countByTime).group(freqbyTimeGroup).elasticY(true).x(
d3.time.scale().domain([d3.min(data,function(d){return d.time;}),
d3.max(data,function(d){return d.time;})])).xUnits(d3.time.minutes).yAxisLabel("Frequency").xAxisLabel('Time').elasticX(true)
How can I solve this problem? Here is the jsfiddle that's not working
Hurray I got the solution. Here is the code
var data=[
{"id":20,"time":"2015-03-29T20:32:24Z","speed":20},
{"id":21,"time":"2015-03-29T20:32:24Z","speed":15},
{"id":22,"time":"2015-03-29T20:32:24Z","speed":16},
{"id":23,"time":"2015-03-29T20:33:25Z","speed":14},
{"id":20,"time":"2015-03-29T20:33:26Z","speed":20},
{"id":21,"time":"2015-03-29T20:34:24Z","speed":10},
{"id":22,"time":"2015-03-29T20:34:24Z","speed":15},
{"id":23,"time":"2015-03-29T20:35:24Z","speed":15},
]
// The datset is much larger with many detector. This is sample
var dateformat=d3.time.format("%H:%M:%S").parse;
var ISO8601format=d3.time.format("%Y-%m-%dT%H:%M:%SZ");
var hoursandminsformat=d3.time.format("%H:%M:%S");
data.forEach(function(d) {
d.time=d.time.substring(11,19);
d.time=dateformat(d.time);
});
Here is the working jsfiddle
I am using NVD3 to visualise data on economic inequality. The chart for the US is here: http://www.chartbookofeconomicinequality.com/inequality-by-country/USA/
These are two lineCharts on top of each other. The problem I have is that there are quite a lot of missing values and this causes two problems:
If I would not make sure that the missing values are not visualised the line Chart would connect all shown values with the missing values. Therefore I used the following to not have the missing values included in the line chart:
chart = nv.models.lineChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1]== 0 ? null : d[1]; })
But still if you hover over the x-axis you see that the missing values are shown in the tooltip on mouseover. Can I get rid of them altogether? Possibly using remove in NVD3?
The second problem is directly related to that. Now the line only connects values of the same series when there is no missing values in between. That means there are many gaps in the lines. Is it possible to connect the dots of one series even if there are missing values in between?
Thank you for your help!
As Lars showed, getting the graph to look the way you want is just a matter of removing the missing values from your data arrays.
However, you wouldn't normally want to do that by hand, deleting all the rows with missing values. You need to use an array filter function to remove the missing values from your data arrays.
Once you have the complete data array as an array of series objects, each with an array of values, this code should work:
//to remove the missing values, so that the graph
//will just connect the valid points,
//filter each data array:
data.forEach(function(series) {
series.values = series.values.filter(
function(d){return d.y||(d.y === 0);}
);
//the filter function returns true if the
//data has a valid y value
//(either a "true" value or the number zero,
// but not null or NaN)
});
Updated fiddle here: http://jsfiddle.net/xammamax/8Kk8v/
Of course, when you are constructing the data array from a csv where each series is a separate column, you can do the filtering at the same time as you create the array:
var chartdata = [];//initialize as empty array
d3.csv("top_1_L-shaped.csv", function(error, csv) {
if (error)
return console.log("there was an error loading the csv: " + error);
var columndata = ["Germany", "Switzerland", "Portugal",
"Japan", "Italy", "Spain", "France",
"Finland", "Sweden", "Denmark", "Netherlands"];
for (var i = 0; i < columndata.length; i++) {
chartdata[i].key = columndata[i];
chartdata[i].values = csv.map(function(d) {
return [+d["year"], +d[ columndata[i] ] ];
})
.filter(function(d){
return d[1]||(d[1] === 0);
});
//the filter is applied to the mapped array,
//and the results are assigned to the values array.
}
});
is there a way to get the start and end values of the quantizes of an quantize scale.
The range is defined by 5 colors ans the domain by d3.min and d3.max function on my data from an json file.
I need them for my legend of an choropleth map.
Thank you for helping.
Carsten
Thats my code
var quantizecolors = ["#d7191c","#fdae61","#ffffbf", "#a6d96a","#1a9641"];
var colorEnerg = d3.scale.quantize().range(quantizecolors);
colorEnerg.domain([
d3.min(collection.features, function(d){return d.properties.EB/d.properties.BEVZ;}),
d3.max(collection.features, function(d){return d.properties.EB/d.properties.BEVZ;})
]);
I assume that you're asking about the minimum and maximum domain values. Apart from saving them when you're setting them, you can also call colorEnerg.domain() without any values, which will return the array [min, max].
You can get the position of the breaks by computing the number and position of intervals:
var dom = colorEnerg.domain(),
l = (dom[1] - dom[0])/colorEnerg.range().length,
breaks = d3.range(0, colorEnerg.range().length).map(function(i) { return i * l; });
I am trying to build a sortable chart based off of Mike Bostock's recent health care chart on NYT: http://www.nytimes.com/interactive/2013/09/24/us/health-care-premiums.html
My issue is that my some of the columns in the chart require a custom scale, rather than a single scale for the entire key. I am wondering if there is a technique for assigning a custom scale for each column or set thereof?
Mike's table has a single scale for all the columns within the key:
var x = d3.scale.linear()
.domain([0, 11000])
.range([0, 320]);
....
row.transition()
.delay(function(d, i) { return i * 8; })
.selectAll(".g-table-bar")
.each("start", function(d) { this.style.width = x(d) + "px"; });
Ideally, I would like to assign a automatic variable scale based on each individual variable/column. Is this possible? It seems that d3.min and d3.max can only be used for an individual variable but it's likely I'm wrong.
Thanks. Ian
I having trouble getting the data on the graph. I only get one data set bar in.
You can see it here : http://infinite-fjord-1599.herokuapp.com/page2.html
But when I console.log the foreach for it. It displays all the objects:
data.days.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d.values[name]}; });
console.log(d.ages);
});
The code on jsFiddle. http://jsfiddle.net/arnir/DPM7y/
I'm very new to d3.js and working with json data so I'm kinda lost here. I took the example of the d3.js example site and modified it.
See the updated fiddle here: http://jsfiddle.net/nrabinowitz/NbuFJ/4/
You had a couple of issues here:
Your x0 scale was set to a domain that displayed a formatted date, but when you were calling it later you were passing in d.State (which didn't exist, so I assume it was a copy/paste error). So the later days were being rendered on top of the first day.
There was a mismatch between the way you were selecting the group g element and the way you were appending it - not actually a root cause here, but likely to cause problems later on.
To fix, move the date formatting to a different function:
function formatDate(d) {
var str = d.modified;
d.date = parseDate( str.substring(0, str.length - 3) );
var curr_month = d.date.getMonth() + 1;
var curr_date = d.date.getDate();
var nicedate = curr_date + "/" + curr_month;
return nicedate;
}
and then use the same function for the scale setup:
x0.domain(data.days.map(formatDate));
and the transform (note the fix in the selector and class here as well):
var state = svg.selectAll("g.day")
.data(data.days)
.enter().append("g")
.attr("class", "day")
.attr("transform", function(d) {
return "translate(" + x0(formatDate(d)) + ",0)";
});
There are a couple of small things that threw you off. First, the domain of the x0 scale should be an array of datetime objects, not an array of strings:
x0.domain(data.days.map(function(d) {
var str = d.modified;
d.date = parseDate( str.substring(0, str.length - 3) );
return d.date;
}));
will return datetimes, not strings like it was before (minor nitpick: really not a fan of this use of map, I would add the date property separately in a forEach function as the data is loaded).
Second, x0 needs to be passed a property that actually exists:
var state = svg.selectAll(".state")
.data(data.days)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.date) + ",0)"; });
Before, you were using x0(d.state) which is a vestige from the grouped bar example (several others still exist; I've changed the minimum to get your project working). Since the value didn't exist, all of the rectangles were getting drawn over each other.
Additionally, we need to format the axis labels so we aren't printing out the entire datetime object all over the labels:
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom")
.tickFormat(d3.time.format("%m-%d"));
Finally, I noticed that the newest dates were being printed on the left instead of the right. You could sort the results of data.days.map( ... ) to fix that, I just reversed the range of x0:
var x0 = d3.scale.ordinal()
.rangeRoundBands([width, 0], .1);
fixed files