We Keep Coding

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/.

custom d3 scale for values and distance

I've got to display a chart of a couple of million values in relation with distance ( expressed in meters ), I'm pretty new to the d3 philosophy so I'm finding a hard time getting my head around this.
The data that I've got to put on screen, are stored in a file that is quite hard to use, this is the format:
CLK 2
-0.000051
-0.000084
..
..
-0.000084
-0.000116
CLK 3
-0.000084
-0.000084
-0.000051
..
-0.000149
-0.000051
CLK 4
-0.000051
-0.000116
..
-0.000042
-0.000122
so basically, the int value aside of every "CLK" is the number of the meter, and all the values between any "CLK" and "CLK" are to be evenly distributed in the chart.
To make myself clear, this is an (ugly) example of the type of visualization I'd like to achieve:

Adjusting Shield UI JavaScript chart when NULL values are present

I am using Shield UI JavaScript chart to show some monthly data to my visitors. However the available data doesn’t always equal 12 months. On the other hand I have categorical values on my X axis;
January, February and so on.
I am using a line chart type and for months where there are no adjacent values I do get a point which makes my chart to look some messy.
I tried to adjust the
seriesSettings: {
line: {
drawNullValues: true
}
}
property, however the look remains. Any ideas?

Since you have categorical values – the names of the 12 months, it wouldn’t make much sense using the drawNullValues. This is because once there is a values (even null) for a point, it takes it’s place on the X axis.
Your chart will look much better, if you use the appropriate type- let’s say bar so that data is easy to see and months with and without data will be easy to distinguish.

NVD3 Sparkline not rendering correctly from CSV file

I'm trying to use NVD3 with d3.js to make a simple sparkline. I've successfully created several sparklines with .csv data, but when I tried to use a different data set, it gave a very strange looking sparkline. See here. If I change the first data value from 92 to 0, it successfully shows the sparkline.
Is this a bug in NVD3 or am I doing something wrong?

The problem was that the y values were strings. I changed
monthlyData.push({x: data[i].Month, y: data[i].Data});
to
monthlyData.push({x: data[i].Month, y: +data[i].Data});
so that the y value becomes a number. Here's the updated version.

Grouped and stacked multiBarChart with NVD3

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars
I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues 'behind').
Starting with multiBarChart() with .stacked(true) first I tried merging both weeks into a single array of 14 bars, where the x position could help group the bars. I tried to form my combined array of objects where .x properties' values are 0, 0.3, 1, 1.3, 2, 2.3, etc.
Unfortunately unlike lineChart() it doesn't use the x value for positioning.
Another idea is to exploit the group .stacked(false), providing 4 items (instead of 2) with the same x value. These then appear overlaid on top of each other instead of stacked.
Here the spacing looks good, but how do I stack these 2 by 2?

Hey I just developed grouped+stacked bar chart on d3.js. It is not NVD3 but it may help you.
Source
Demo

Let me just say up front that I am SO not an nvd3 expert. I'm barely past the getting-started stage myself.
That said, it looks like you're making this too hard on yourself.
I think you really want to send nvd3 two sets of data, with the x's matching between the two. (E.g., (1,y1a) corresponding to (1,y2a), then (2,y2a) with (2,y2b), etc.)
You can see this more clearly by the following:
Head to their Live Code page
Select the Group/Stacked Bar Chart.
Select the Data (JSON) tab.
Replace the first function with the following, and observe the resulting x values.:
function() {
return stream_layers(2,10,.1).map(function(data, i) {
alert( 'Stream '+i+': '+JSON.stringify(data));
return {
key: 'Stream' + i,
values: data
};
});
}
Best as I understand it, that's the model you're looking for.