I am trying to make a heatmap using d3 which on x axis a time series, on y a number and the color is the value for the cell. The data is loaded based on the input and the domain and range can change on different input. I was not able to find such example. Does anyone have an idea how I can create that?
Thanks
So I finally got the time to write this piece of code that I was looking for. My main problem was that I had understood the scales well. So after reading a bit I could define a time scale and map it to my data with the following code:
var xscale = d3.time.scale()
.domain([startDate, endDate])
.range([padding, w - padding]);
var xAxis = d3.svg.axis()
.scale(xscale)
.orient("bottom")
.ticks(d3.time.days, 5);
You can find a working demo of my code in the following jsfiddle:
http://jsfiddle.net/TD5Sk/1/
Explore around the d3 gallery of examples, mixing and matching you should be able to find a good starting point. The co-occurrence matrix has many of the properties you describe. Even the calendar example probably has some useful pointers.
Related
I am trying to create a chart that will have a custom tick range. Having an issue on how to set up the axis though, tried using logscale too but it didn't work properly. Any help is appreciated, attaching a pic for reference.
How I want the axis to be
var y = d3.scaleLinear()
.domain(d3.extent(props.dailyDataAll, function (d) { return d.confirmed }))
.range([height, 0])
I know this really does not answer your question, but I think it may be just a common XY problem.
As such I would suggest instead of struggling to plot ticks properly, you could simply replace Y values with Math.log10(Y) which would make ticks work exactly as you wanted (100 being 2 on the Y scale, 1000 being 3, 10000 being 4 and so on, effectively one tick per order of magnitude just like in your requirements)
I'm creating a stacked chart using nvd3, similar to the example on the nvd3 website.
However, my data set is a lot more uniform than their example; I'm actually visualizing a funnel with multiple steps over time, each step describing the % that made it from the last step to this one, so it ranges from 100% to about 80%. So it ends up just looking like 4 straight rectangles (see below).
I'd like to know if there is some way of setting a minimum value to display on the y-axis so that each step only takes into account the data that is actually likely to fluctuate, leading to a clearer indication of peaks and troughs.
I've tried using .range([100, 80]) and .domain([80, 100]) but neither seems to make any difference.
For example:
var y = d3.scale.linear().range([100, 80]);
chart.yAxis
.scale(y)
.tickFormat(d3.format(',.2f'));
Full code for my example is available here.
Any ideas how to achieve this?
I was going through the following code. Here ticksize is passed a negative argument. I was thinking that the positive argument should be okay but it is not since it should draw a line from the top. I want to know why? Is it due to some internal transformation which may have took place?
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickSize(-height - margin.bottom)
.tickFormat(format);
The code is the part of link: Mike Bostocks' Object Constancy Explanation. Thanks in advance.
Things that have a negative scale in SVG are drawn upside down. Tick's are scaled in d3 so they work the same way so if you have a positive tickSize it draws outside the axis line and if it's negative it's drawn inside the line instead.
I asked a question before about d3, and they suggested me to use an ordinal scale, this would solve my problems. Indeed it solved my problems, but know I'm stuck with another issue...
It draws perfectly, but my X-axis is full of text.
As an example, I want:
1900 1904 1908 1912 ...
but I got:
190119021903190419051906. As you can see this is not clear. (this is just an example, if there were only dates I could use another scale).
Everywhere I looked they talk about axis.ticks(number). But this doesn't work. Nothing happens and I still get the same result.
I hacked a result to get less results on the x-axis:
var str = [];
var i = 0;
while(i < data.length) {
str.push(data[i].age);
i=i+8;
}
x.domain(str);
But if I do this it creates a random line and doesn't draw it perfectly anymore. Don't know how to solve this.. It's a simple line chart, nothing difficult, the only difficulty (for me) is the ordinal scale...
Hope someone can help me out.
this is how my x and x-axis is defined:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-150],1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
without the while-loop (the nasty hack), I just had the following line defining the x.domain:
x.domain(data.map(function(d) { return d.age; }));
Have a look at the documentation for axes, in particular the ticks() function. You can use it (or tickValues()) to control how many (and what) values you want to show.
If you're working with dates, you might want to use a time scale instead of the ordinal one. In particular it will allow you to control the ticks in a more meaningful way, e.g. specify that you want ticks every five years.
I'm using the d3 JS library to plot some graphs. It works fine, but I'm stuck on a weird problem which I've been struggling with for an hour - I can't set the x-axis values. Here is the graph (I added an alert that will show you the data format):
http://jovansfreelance.com/bikestats/d3/tipsy.php
I want the x-axis to show years, but for some reason that I can't see anywhere in the code, it's using decimal values instead, so instead of 2006 it has .006 - I have no idea where this is coming form, like it takes out the first digit and divides the rest by 100?!
If someone can point me to the lines of code that are doing this, that would be fine, I can take it from there.
As pointed out in another answer, a better way of handling time values is to explicitly use time scales. However, to achieve what you want it is sufficient to specify the format for the x axis explicitly. That is, to
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(h - margin * 2)
.tickPadding(10)
.ticks(7)
add
.tickFormat(d3.format("d"));
Could be related to this parseDate = d3.time.format("%Y") not working
If so, you might need
d3.svg.axis()
.scale(x)
.tickSize(h - margin * 2).tickPadding(10).ticks(7)
.tickFormat(function(d) { return d.toString(); }); // force the date value into a string
or, if you need the parse the date
.tickFormat(function(d) {
var fmt = d3.time.format("%Y");
return format.parse(d).toString()
});