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
Related
I'm new to dc.js and I've been trying to create a time series data along with other charts I would eventually cross-filter as well. The graph plots just fine but the data doesn't show up. here is what the data looks like:
month,day_of_week,hour,day,date,geo
Jan,Thursday,2,1,1/1/15,"33.87865278,-87.32532778"
Jan,Thursday,22,1,1/1/15,"34.91044167,-86.90870833"
Jan,Thursday,1,1,1/1/15,"32.14200556,-85.75845556"
.
.
.
Dec,Saturday,0,4,12/19/15,"31.43981389,-85.5103"
I've tried to plot a time series based on the 'date' column and my approach is as follows:
d3.csv("hwy.csv", function(data) {
drawMarkerSelect(data);
var dateFormat = d3.time.format('%m/%d/%Y');
data.forEach(function (d) {
d.dates = dateFormat.parse(d.date);
d.dateRange = d3.time.month(d.dates);
});
});
function drawMarkerSelect(data) {
var xf = crossfilter(data);
var all = xf.groupAll();
trialChart = dc.lineChart(".trial .trial-line");
var trial = xf.dimension(function(d){ return d.dateRange; });
var trialGroup = trial.group();
trialChart
.dimension(trial)
.group(trialGroup)
.height(120)
.width(900)
.x(d3.time.scale().domain([new Date(2014, 12, 01), new Date(2015, 11, 31)]))
.xUnits(d3.time.months);
---Other Charts here as well ---
dc.renderAll();
As of now, this code returns empty chart with x and y bars. I want the total count of cases for each day on y axis and the corresponding date on the x axis.
Your time and support is appreciated!
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
I have a data with id and distance like the following
var data=[
{"id":1,"distance":0.506},
{"id":2,"distance":0.506},
{"id":3,"distance":0.506},
{"id":4,"distance":0.506},
{"id":5,"distance":0.506},
{"id":6,"distance":0.106},
{"id":7,"distance":0.0065},
{"id":8,"distance":0.106},
{"id":9,"distance":0.106}
]
I want to crossfilter the data so that only the data whose distance is > 0.2 remains after the filter. I am using the folllowing code to do the crossfilter. But its not working.
var ndr=crossfilter(data);
var fild=ndr.dimension(function(d){if(d.distance>=0.2){return d;}});
data=fild.top(Infinity);
So the output data should be the following
var filtereddata=[
{"id":1,"distance":0.506},
{"id":2,"distance":0.506},
{"id":3,"distance":0.506},
{"id":4,"distance":0.506},
{"id":5,"distance":0.506}
]
Can anyone help me to fix the problem?
I have found the solution. This is the working code
var ndr=crossfilter(data);
var fild=ndr.dimension(function(d){return d;});
var fildata=fild.filterFunction(function(d){if(d.distance>=0.2){return d;}});
data=fild.top(Infinity);
I am making a bubble chart using dc.js , crossfilter.js but bubbles are not showing in the chart !!!! It is just showing x axis and y axis but the bubbles are disappeared.
I was trying make this bubble chart in click to see
here is my code :
var dateDim = ndx.dimension(function(d) {return d.Date;});
var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;
console.log(minDate);
console.log(maxDate);
//var ageDim = ndx.dimension(function(d){return +d.Age;});
var daySum = dateDim.group().reduceSum(function(d){return 1;});
//print_filter("ageSum");
// var hits = dateDim.group().reduceSum(function(d) {return d.Age;});
var brush = d3.svg.brush();
suicideBubbleChart
.width(990).height(200)
.transitionDuration(1500)
.dimension(dateDim)
.group(daySum)
.colors(d3.scale.category10())
.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.time.scale().domain([minDate,maxDate]))
.r(d3.scale.linear().domain([0, 4000]))
.minRadiusWithLabel(15)
.yAxisLabel("Suicides")
.elasticY(true)
.yAxisPadding(100)
.elasticX(true)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true);
Thank you.
I fixed enough to start getting stuff showing up on the chart.
There was a space before Date that caused that field name to come out wrong, and the date format was wrong, and I added a radiusValueAccessor.
var dateFormat = d3.time.format('%m/%d/%Y');
...
.r(d3.scale.linear().domain([0, 10]))
.radiusValueAccessor(function(d) {
return d.value;
})
http://jsfiddle.net/gordonwoodhull/wjeonreq/15/
Obviously it is still not the chart you want, but hopefully now that you have some stuff showing up on the screen, you can start to shape and debug it.
In particular, you will need a valueAccessor in order to place the bubbles in Y, and a Y scale.
It is one of the frustrating things about dc & d3 that if something doesn't work, then you just get an empty chart. The way I tracked this down, after dealing with the errors above, which showed up in the console, was
look at daySum.all() to make sure the data was okay (it was, after the date correction)
Inspect the svg element in the Elements tab of the Developer tools. The g.chart-body inside there has the actual content. I saw that the bubbles were there but had radius zero. Then I looked back at the stock example to see what radius setup must be missing.
I try to dynamically change the number of ticks on an axis via an input field
// updated by an input field
var nNumberOfTicks;
function updatenumberofticks(nValue) { nNumberOfTicks = nValue; }
// definition of the axis
var xAxis = d3.svg.axis()
.orient('bottom')
.ticks(nNumberOfTicks)
.scale(xScale);
but it doesn't work. See here: https://jsfiddle.net/stefanooo/cn2xo56w/3/.
This example works perfectly when changing xmin. What do I have to change to make it work for the number of ticks also?
You need to give the updated number of ticks to the axis component after changing it, e.g.
d3.select("#numberofticks").on("change", function() {
updatenumberofticks(+this.value);
vis.select('.xaxis').transition().call(xAxis.ticks(+this.value));
});
Complete example here.