We Keep Coding

When having mulitple Y lines data, how can I let the chart automatically scale to show them all?

Suppose I have a linechart with multiple lines (the number is dynamic) and I would need to always scale the Y so that all lines are shown - so the scale should always be based on the range with highest values. Is there a way how to it automatically? I found some example with automatic yScaling using d3.max but that is done for a known dataset. In my case, I do not know what range will be the one to use.

Parallel coordinates with d3.js

I need to to represent a Parallel Coordinates with d3.js. First of all I have no idea if what I think is possible to achieve (and if the Parallel Coordinates is the right chart).
I will explain my idea: I take data from a database and I expose them in a JSON and I store them in an array of objects (with JavaScript).
This is an example of the data http://pastebin.com/DZcMqDMc.
I would like to represent along the abscissa axis years (though there are years repeating themself, as you can see from data example), while along the ordinate axis values of those years (values are in percent, ranging from 1 to 100).
I would like to represent two lines according to "value1" and "value2" property in the JSON file.
Is it possible? Is Parallel Coordinates the right chart?
The main problem I have right now is that I do not understand how to set right the two domains (abscissa and ordinate).
I am basing on the example Parellel Coordinates of Bostock.
For abscissa I am thinking something like that:
x.domain(
d3.extent(test,
function(d) {
return d.years;
}
)
);
It makes sense or?

Try a multi line chart.That might suit your need.
I am not sure what you are trying.

Simply do a line chart, and produce the vertical lines by formatting the ticks to go from 0 to height ( in your var xAxis code include .tickSize(0-height)). You will have to pick the right number of ticks, as in ticks(), so you just get the lines where you want them.

Check out Parcoords, a d3-based parallel coordinates library. For compatibility with d3 v5 see https://github.com/BigFatDog/parcoords-es which is based on the original Parcoords library (https://github.com/syntagmatic/parallel-coordinates) which relies on an outdated version of d3.
For examples and sample code, check out the following link: http://syntagmatic.github.io/parallel-coordinates/.

Plotting extra linear data on D3 js graph

Check out this fiddle, using D3 and plotting a line graph against dates.
http://jsfiddle.net/T546B/172/
I want to plot some further data on my graph and want to know if its possible, I would ideally like the graph to look like below:-
The extra data is linear and doesn't have a price value and I want it to be included somewhere near the middle of the graph. The data array would be in a format along the lines of:-
var eventArray = [[startdate, enddate, name]];
I was basically wondering if this is possible, plotting two types of data, using different SVG elements on one graph. - not sure how to approach this problem. Any help appreciated!

you just need to set up a second line generator with the coordinates that you want for x and y

Pie Piece Too Small

I have a dynamic data array that contains 3 ints that are used to build a pie chart. In most cases it works fine IE: [5, 10, 3]. The pie chart renders correctly and you see all the pieces.
However in some cases the numbers can be widely different. IE [1,500,250] or [400,1,2]. When this is the case you will only see the larger of the pie pieces and the smaller ones become so small they can not be seen; or clicked.
I need some way of correcting the data array for these cases. I have the ability to retain the true value while adjusting the display value so the pieces show up. What I am looking for is a check to see if it's necessary and then a relative number to adjust it by based on the other values.
Suggestions?

Well firstly I'd say you aren't so much "correcting" the data as fudging the data to meet your requirements.
Basically, there is a minimum percentage for which a slice of that proportion will be clickable and you will need to bring all pieces up to at least this size.
Of course - this can't work at the most extreme examples. If you had 1,000,000 slices all of the same value then no matter how you scaled them, some of them are going to be too small (or all of them).
You also need to be aware of how scaling certain very small slices will throw out the apparent proportions between other, larger, slices.
But - a very crude way of doing it could be something like...
var minPC = 0.5 , // the minimum %age slice visible
total; // total should be set to the sum of the values of all your slices
var minValue = total / 100 * minPC; // The smallest value visible (given the current total)
for (var slice in slices) { //assuming slices is a standard JS 'array'
if ( slices[slice] < minValue ) slices[slice] = minValue;
}
of course making the slices bigger like this will in turn increase the total - meaning that the small slices will still be less than the minimum visible percentage. You will need to make minPC sufficiently large to cope with this. And of course the more very small slices you have the worse this effect will be. You could account for this be re-scaling the larger slices.
However - I would advise you find a better way of the user interacting with the data by letting them select on/off slices - or by having slices 'explode'.

You seem to want to resize the segments of the pie if they are too small to make them visible/clickable.
May I suggest that instead of solving the problem this way (which would give an invalid
representation of the data), you could instead use labels outside of the pie chart to point at the segments? These labels could then, themselves, be made clickable.

The sum of the values in your array represent the entire "size" of the pie. The percentage of the pie each value has is the visual weight of that piece. You probably want to set a minimum threshold for the percentage size of each piece (the minimum threshold would be related to the diameter of your chart).
ie. [500, 490, 10] -> [500/1000, 490/1000, 10/1000] -> [50%, 49%, 1%]
If any value is less than your minimum threshold, you need to increase it to the minimum threshold and adjust your other values accordingly, so they all add up to 100%

It is related with fact that all points are sum and each value is calculated to pixels.

Why is Google Charts not showing the right data for me? Are the axis messed up?

http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515
If you go there on your browser, you'll notice that you see a graph. However, the axis are messed up! And it seems like I can't see the ups and downs of my line graph. WHy?
I don't get what's wrong. I just want to plot the simple stuff on a line chart. Just those data points. Nothing more, nothing less!

If you use basic text format for the chart data, the range of data value is 0 - 100. Values above 100 are truncated to 100. The data values you provided are all above 100, so they are truncated to 100.
You should use text format with custom scaling. Try this one. The range of data values is set to 0 - 2000 using chds=0,2000.
http://chart.apis.google.com/chart?cht=lc&chs=600x400&chd=t:171,811,629,507,460,390,434,379,329,312,368,329,329,329,352,330,299,323,340,325,329,1895,1047,736,617,684,620,515&chds=0,2000