We Keep Coding

Issue graphing tan(x) when limiting it by range

For this, I have been using the Vega Editor.
So I initially had the code for showing sin and cos absolutely fine, then when I tried to add tan, I understandably had some issues with scale, as the y values of tan were relatively huge when it approached the points where the function becomes undefined.
In order to tackle this, I added a range filter on the tan element, but it seems to be trying to join the points either side of when it is undefined. For some reason, this has also altered the sin line.
Here is the code I have so far:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Plots three functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"calculate": "tan(datum.x)",
"as": "tan(x)"
},
{
"filter": {
"field": "tan(x)",
"range": [-1, 1]
}
},
{
"fold": [
"sin(x)",
"cos(x)",
"tan(x)"
]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
How I can I get this data to not try and join up points but it instead let the tan line rise until it is out of the range? I also have very little idea what is happening with sin line, it is fine without the addition of the tan line.
Any help is greatly appreciated.

To avoid drawing a line between adjacent points, you'll need to split each segment into a separate group: the detail encoding is useful for this. Unfortunately, a grouping like this will apply to all the lines affected by the encoding, so to avoid breaks in the sin(x) and cos(x) curves, you'll need to split the tangent into a separate layer.
Here is how you might do this (open in editor):
{
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "sin(datum.x)", "as": "sin(x)"},
{"calculate": "cos(datum.x)", "as": "cos(x)"},
{"calculate": "tan(datum.x)", "as": "tan(x)"},
{"calculate": "floor(datum.x / PI - 0.5)", "as": "phase"}
],
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {
"field": "value",
"type": "quantitative",
"scale": {"domain": [-3, 3]}
},
"color": {"field": "key", "type": "nominal", "title": null}
},
"layer": [
{"transform": [{"fold": ["sin(x)", "cos(x)"]}], "mark": "line"},
{
"transform": [{"fold": ["tan(x)"]}],
"mark": {"type": "line", "clip": true},
"encoding": {"detail": {"field": "phase", "type": "ordinal"}}
}
]
}

d3 vertical bar chart

How can I draw chart like this?
I have data (for example):
{
"USA": {
"value": 10,
"companies": [ "Apple", "Google" ],
"color": "red"
},
"Germany": {
"value": 3,
"companies": [ "SAP" ],
"color": "green"
}
}
"value" is for the left side.
"companies" is for the right side.
"value" != "compnaies" length.
I can't figure out what kind of graph I must use.
I'll try hierarchy, but it must have only one root.

i made a small poc but i'm not sure what you want so i can't really got much further please take a look at this : https://jsfiddle.net/z9bcfdvk/
i used the dataser you provided and added one entry:
Let me know if you want more detail.
var data = [
{
country: "USA",
"value": 10,
companies: ["Apple", "Google"],
"color": "#123445"
},
{
country: "Germany",
"value":
3,
companies:
["SAP"],
"color":
"#987456"
}, {
country: "France",
"value":
1,
companies:
["RENAULT"],
"color":
"#8b9838"
}
]

Fill gaps in NVD3.js

I am trying to make horizontal grouped stacked bar graph in NVD3.js.
Everything works great until I got a "gap" in my JSON data like bellow:
[{
"key": "Education & news",
"values": [{
"label": "2014-02-26",
"value": 702
}, {
"label": "2014-02-27",
"value": 204
}, {
"label": "2014-02-28",
"value": 3213
}]
}, {
"key": "Entertainment",
"values": [{
"label": "2014-02-26",
"value": 21
},
//Missing entry for 2014-02-27
{
"label": "2014-02-28",
"value": 3213
}]
}]
The error which I got is Uncaught TypeError: Cannot read property '1' of undefined in d3.js. The example and the error of the problem I put on http://jsfiddle.net/vaa3V/
Can I somehow fill gaps automatically?

#shabeer90's comment is on track. You can use underscore.js to get the domain values and apply a sensible default.
//Find domain values
DEFAULT = 0
defaults = _.chain(data)
.pluck('values')
.flatten().pluck('label')
.uniq()
.value()
.map( function(item){ return {label:item, value:DEFAULT} })
// Group by 'label' so we can apply defaults
defaults = _.groupBy(defaults, 'label'))
// Apply defaults
_.each(data, function (series) {
grouped = _.groupBy(series.values, 'label')
series.values = _.flatten( _.defaults(grouped, defaults))
})
Should give you:
[
{
"key": "Education & news",
"values": [
{
"label": "2014-02-26",
"value": 702
},
{
"label": "2014-02-27",
"value": 204
},
{
"label": "2014-02-28",
"value": 3213
}
]
},
{
"key": "Entertainment",
"values": [
{
"label": "2014-02-26",
"value": 21
},
{
"label": "2014-02-28",
"value": 3213
},
{
"label": "2014-02-27",
"value": 0
}
]
}
]

highcharts zoom bug (column chart)

There's a zooming bug that we're struggling.
If you zoom in the left side of the chart, the right side of the chart is zoomed.
Simple example:
http://jsfiddle.net/andrut/TfG6c/
I do it like that:
{
"chart": {
"renderTo": "container",
"zoomType": "xy",
"type": "column"
},
"plotOptions": {
"series": {
"groupPadding": 0.04
}
},
"series": [{
"name": "col0",
"data": [{
"y": 93723,
"color": "#773676"
}]
}, {
"name": "col1",
"data": [{
"y": 68630,
"color": "#ff9900"
}]
}]
}
Is there any workaround to fix this? I haven't found anything interesting anywhere...
Thanks,
Karol

You need to set minRange paramter
yAxis:{
minRange: 1000
},
http://jsfiddle.net/TfG6c/1/

How to use an existing object for data in a multi bar graph?

I am using the nvd3 library to make a bar graph, and I'm running into some trouble trying to figure out how to use my object properly. If I try and use the object that I created from a JSON file, the graph doesn't behave properly(see the picture that I've provided. the bars are off center). I'm building off of a multi-bar graph example so my guess is that it's still trying to display the graph as if there would be multiple bars for each x value.
function dataFactory(seriesNum, perSeries) {
return new d3.range(0,seriesNum).map(function(d,i) { return { //will return the amount of streams to be seen on the graph
key: 'Stream ' + i,
values: new d3.range(0,perSeries).map( function(f,j) {
return {
y: 10 + Math.random()*100, // a random value is given to y and the range of 0-perSeries is put into j
x: j
}
})
};
});
}
However, using the above function and calling it to be used for data works properly. Does anyone know what I have to do to get my object to behave like the object that comes from this function?
My json file if you need to see it:
{
"Member1": {
"key":"test10",
"values": [
{
"x": "test10",
"y": 20
}
]
},
"Member2":{
"key":"test9",
"values": [
{
"x": "test9",
"y": 10
}
]
},
"Member3":{
"key":"test8",
"values": [
{
"x": "test8",
"y": 4
}
]
},
"Member4":{
"key":"test7",
"values": [
{
"x": "test7",
"y": 12
}
]
},
"Member5":{
"key":"test6",
"values": [
{
"x": "test6",
"y": 30
}
]
},
"Member6":{
"key":"test5",
"values": [
{
"x": "test5",
"y": 8
}
]
}
,
"Member7":{
"key":"test4",
"values": [
{
"x": "test4",
"y": 27
}
]
},
"Member8":{
"key":"test3",
"values": [
{
"x": "test3",
"y": 17
}
]
},
"Member9":{
"key":"test2",
"values": [
{
"x": "test2",
"y": 2
}
]
},
"Member10":{
"key":"test11",
"values": [
{
"x": "test11",
"y": 53
}
]
},
"Member11":{
"key":"test13",
"values": [
{
"x": "test13",
"y": 55
}
]
},
"Member12":{
"key":"test14",
"values": [
{
"x": "test14",
"y": 104
}
]
},
"Member13":{
"key":"test15",
"values": [
{
"x": "test15",
"y": 12
}
]
},
"Member14":{
"key":"test16",
"values": [
{
"x": "test16",
"y": 87
}
]
}
}