I am working with D3 to try and create a simple bar chart. My x-axis uses ScaleTime and my y-axis uses ScaleLinear. In the pictures below, you can see that the values I've put for the domain (date values) go past the the range. Shouldn't the ticks be confined to the line? Been struggling with this for a while and haven't been able to find anything on the internet.
Graph
Inspect Element
EDIT
After applying .clamp, this is the result
New Graph
And here is the main part of my code I'm looking at (some of the values are arbitrary)
Code
I think this is because clamping is disabled by default on time scales:
Constructs a new time scale with the specified domain and range, the default interpolator and clamping disabled.
It's hard to suggest a fix without seeing your code, but try something like this:
d3.scaleTime()
.domain([domain)
.range([range])
.clamp(true)(Date.now())
Related
dc.js has been great, and now I'm trying to understand how to use it for data with multiple dimensions.
I have time series data (csv), which contains the number of people that fit a certain attribute on a given day - e.g. the number of brown-haired people age 65+. A simplified version of it looks like this (There are 5 options for hair color, 5 for age group, and about 200 dates):
Date, Hair Color, 0-18, 19-39, 40-64, 65+
1/1/21, Brown, 5, 3, 10, 2
1/1/21, Blonde, 15, 2, 4, 1
1/2/21, Brown, 2, 8, 0, 2
1/2/21, Blonde, 11, 6, 7, 4
...
I'd like to be able to plot the cumulative counts over time for each sub-population. The complication is that I'd like to show
A plot aggregated by hair color
(so summing over all age groups), which can then be toggled (ideally by clicking on one of the lines) to show:
A plot for a given hair color
disaggregated by age group.
(Note that in the mockups, I'm normalizing counts to show it as a cumulative percentage. I've been doing that calculation straightforwardly with valueAccessors.)
My question is: how do I create the dimensions and groups to create these plots?
I'd prefer not to create individual variables for each age group (I'd like it to be generic enough to expand to finer categories). But I'm having trouble understanding how to use reduce and filters to achieve my desired outcome.
Also, should I be doing it all as linecharts in a compositeChart, or in a series chart? There is the added wrinkle that I plan to then annotate the chart with extra trendlines added in from d3.
Thanks!
The series chart is a convenience class that generates a composite chart underneath.
It allows you to specify your data using a 2D key, where one component is the key to be used for the X values in the chart, and one component is another key to be used for splitting the data into multiple layers - lines, in your case. You also give it the "prototype" of the layer chart, in the form of a function that returns a partially-initialized chart.
It sounds like you are on the right track, so I won't attempt to give a complete answer, just a few hints. Please feel free to follow up in the comments, and I will edit this answer to fill in details.
Flattening the data
You will probably want to flatten your data so that there is only one value per row, i.e. structure it with an Age column and a Value column. This is a general best practice for working with crossfilter.
It's possible to work with the data as you have it, but
you won't be able to filter by age, since filtering in crossfilter is by row
aggregating across ages will be more complicated, requiring custom reductions
Using multikeys and series chart
Following the series chart example, you might define your dimension as
const colorDateDimension = cf.dimension(d => [d['Hair Color'], d.Date]);
Now any group on this dimension will aggregate by both hair color and date.
Now if you're using the series chart, you can extract the components with
chart
.seriesAccessor(({key}) => key[0])
.keyAccessor(({key}) => key[1])
You could use the third parameter of the series chart chart function to determine the color or dash style of the layer, e.g.:
const dashStyles = {
'0-18': [3,1],
'19-29': [4,1,1,1],
// ...
};
.chart(function(c, _, subkey) {
return new dc.LineChart(c).dashStyle(dashStyles[subkey]);
})
Interaction
dc.js does not natively support the kind of drill-down you are describing. It would be easier to have one chart which is by hair color and another chart which is by age. Then when no hair color is selected, the age chart will show all hair colors, and when no age is selected, the hair color chart will show all ages.
If you want drill-down as you describe, you will have to write custom code to apply the filter and swap the chart definition when a hair color is clicked. It's not terribly complicated but please ask a follow-up question if you can't figure it out - it's better to keep SO questions on a single topic.
Annotating with D3
This part is pretty simple no matter how you implement the charts.
You will implement a pretransition handler and use chart.selectAll to add the content you need. There are many examples here on SO, so I won't go into it here.
Conclusion
I hope this gets you started. I've answered your specific question and given some hints about other assumptions or implicit questions within your question. It will be some work to get the results you want, but it is definitely possible.
Need to display line in a line-chart , with the ability to move the tiles, to see a max bitrate value line, to see labels and axis pointers on hover, grouped with a table and time Slider.Y dimension needs to display "bitrate total" or "bitrate Avg" (as defined in code). X dimension needs to display 15 min interval in scope of weeks.
I can upload my data into a table but not into the line graph. I can see points on the graph using .renderDataPoints() but no lines.
I checked the data - could not find any null/NaN values being returned, not using any old version of colors.
The code can be found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. Tried to replace my CSV with var data but nothing is being displayed at the moment in the fiddle. The code as whole is displayed in https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI
Any help would be greatly appreciated.
Here's my go-to-answer for how to put data into a jsFiddle. Basically it's easiest to stick it in an unused tag in the HTML. bl.ocks.org / blockbuilder.org is easier for this.
Here's a fork of your fiddle with the data loaded that way:
http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/
I also had to remove the spaces from the column names, because those got d3.csv confused and caused the BITRATE calculations to fail.
There was also some stray code inside the renderlet which was failing with a complaint about dim not existing.
The main reason why data was not displaying was because the input groups were not producing usable aggregated data. Your data is very close together in time, so aggregating by week would aggregate everything.
The way to debug this is to put a breakpoint or a console.log before the chart initialization and look at the results of group.all()
In this case bitrateWeekMinIntervalGroupMove and minIntervalWeekBitrateGroup were returning an array with one key/value pair. No lines can be drawn with one point. :)
It looks like you originally wanted to aggregate by 15 minute intervals, so let's get that working.
For whatever reason, there are two levels of aggregation in crossfilter, the dimension level and the group level. The dimension will have first crack at generating a key, and then the group will further refine these keys.
Your min15 function will map each time-key to the 15-minute mark before it, but it needs data that is higher than 15 minutes in resolution. So let's put these groups on the dateDimension, which hasn't already been mapped to a lower resolution:
var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...
Great, now there are 30 data points. And it draws lines.
I made the dots a bit smaller :) because at 30 pixels it was hard to see the lines.
Zooming in using the range chart reveals more of lines:
There still seem to be glitches in the reduce function (or somewhere) because the lines drop to zero when you zoom in too far, but hopefully this is enough to get you moving again.
My fork of your fiddle: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/
I am trying to show machine states over time. Part of this is to reproduce/automate a report that used to be done by hand. It consists of coloring 2minute 'time slices' in Excel based on what the machine is doing.
(Sorry, not enough reputation to post a picture, but it is a classic heatmap where the state drives the color. Some non DC-JS fiddle: http://jsfiddle.net/ww6Lbnc5/4/)
I was able to generate most of what I want in the following jsfiddle:
http://jsfiddle.net/hwhfxz2t/14/
See fiddle for code.
The total state duration (for selected time frame) is shown in the pieChart, followed by the individual state lines and then the heatmap that people are used to. (the ZOOM and date selection buttons do not work in the fiddle but are there to select specific data ranges or zoom in if you like).
The line charts uses the original representation of the states, which consists of a time the state is entered and a duration.
In order to make the heat map work, I had to (I think) take the original data and convert it into individual minute chunks and mark them with a state. So for instance the original data specifying:
RUN state starting 14:30 for 300 seconds
becomes:
14:30=RUN, 14:31=RUN, 14:32=RUN, 14:33=RUN and 14:34=RUN
The code in lines 233-297 loops through the original data and generates a new one that does this. In cases where there is more than one state within a given minute, the last state survives.
This works okay but it seems that this code is exactly what is normally done in group().reduce(add,remove,init). But in this case I need to add multiple timeslots depending on the duration of a state.
Also, because it is now using a different crossfilter, maps do not update each other.
Here are my questions related to this:
Can I display a heatmap without supplying information for all individual
'cells'? (i.e. straddle cells based on a value, similar to rowspan in a table)
Can I add multiple values at once inside group().reduce()?
Is there an easy way to invert the yAxis so 0 is at the top?
When clicking a row in the heatmap, it selects a column and vice-versa?
I'm not sure if this should be in the crossfilter group. If so please ignore my rambling. If someone knows how to keep the charts linked by grouping better, please let me know.
--Nico
Concerning Question 3:
DC.js heatmaps currently do not support custom order functions on axis but there is a pull request that has been merged into the developing branch and should be accessible to the public soon.
You could manually edit the dc.js file to set the sorting in heatmaps to a custom function. In the latest (2.0.0-beta10) version it is the following line:
rowValues.sort(d3.ascending);
and accordingly
colValues.sort(d3.ascending);
I am trying to plot a time series (a seismograph) with a corresponding spectrogram in R.
Since I would like to compare the time series with the spectrogram, the X axis labels on the time series need to line up with the X axis labels on the spectrogram. However, I'm having a lot of trouble with this. The best I've been able to do so far is use
par(mar=c(0,10,0,8))
and try to manually force the spectrogram labels to line up with the time series labels by tweaking the spectrogram margin. Of course this is only approximate and they still do not line up perfectly. Is there a way to make the axes generated by the code below match up with each other?
par(mfcol=c(2,1))
plot(seq_len(1000)*0.01, sin(2*pi*seq_len(1000)*0.01), type="l",xlab="Time",
ylab="Amplitude", main="Time Series", xlim=c(1,10))
image(seq_len(1000)*0.01,seq_len(100)*0.1,array(runif(1000000),dim=c(1000,100)),
xlab="Time", ylab="Frequency", main="Spectrogram", xlim=c(1,10))
Thanks in advance!
This seems to work:
par(mfcol=c(2,1))
plot(seq_len(1000)*0.01, sin(2*pi*seq_len(1000)*0.01), type="l", xaxs="i")
image(seq_len(1000)*0.01,seq_len(100)*0.1,array(runif(1000000),dim=c(1000,100)),
xlab="Time", ylab="Frequency", main="Spectrogram")
Just drop the xlim= arguments and use xaxs="i" in the plot() function to match the default for image().
You can either add xaxs='i' to the call to plot (this removes the extra padding so it lines up with the image plot), or you could use par('usr') after the 1st plot to see what the x limits are and use those values in the xlim call in image.
It turns out that this is way easier than it looked initially. The secret is to make a "dummy plot" and then add the image to the plot. So here's how the new, working code looks:
par(mfcol=c(2,1))
plot(seq_len(1000)*0.01, sin(2*pi*seq_len(1000)*0.01),
type="l",xlab="Time",ylab="Amplitude", main="Time Series")
plot(c(0,10), c(0,10), type="n") #Dummy plot with axis limits for our spectrogram
image(seq_len(1000)*0.01,seq_len(100)*0.1,array(runif(1000000),dim=c(1000,100)),
xlab="Time", ylab="Frequency", main="Spectrogram",add=TRUE)
Similar, but conversely, to Greg Snow's answer, you could add xaxs='r' to the call to image as follows:
par(mar=c(0,10,0,8))
par(mfcol=c(2,1))
plot(seq_len(1000)*0.01, sin(2*pi*seq_len(1000)*0.01), type="l",xlab="Time",
ylab="Amplitude", main="Time Series", xlim=c(1,10))
image(seq_len(1000)*0.01,seq_len(100)*0.1,array(runif(1000000),dim=c(1000,100)),
xlab="Time", ylab="Frequency", main="Spectrogram", xlim=c(1,10), xaxs="r")
Don't forget to save your par() setting first.
(maybe I should have put that above)
I'm trying to create a jqplot with multiple lines plotted on it, where the number of data series depends on user input.
Now I want to use two different y-axes for certain kinds of results, but the jqplot documentation only shows how to assign different y-axis to series in a static way.
Is there a dynamic solution?
you will need to change the option string when ever you need to have different y axises, But still you will need to re draw the chart as well..