https://github.com/mbostock/d3/wiki/Stack-Layout
http://mbostock.github.com/d3/ex/stream.html
I'm trying to make a streamgraph with D3.js. Looking at the example, we see that the data is formulated through the helper function stream_layers(n, m). In this example an array is returned as described in the API. The API describes input x, y and y0. But the example uses x, y0, y1.
My dataset is formulated similarly to the one described in the API:
{
"name": "apples",
"values": [
{ "year": -2000, "y": 91},
{ "year": -1950, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "year": -2000, "y": 9},
{ "year": -1950, "y": 49}
]
}
What would a helper function that stacks this dataset look like? The example returns a 3D array (one dimension for the number of layers, one for the number of samples m and one for the y-values at each sample).
Related
I want to create a node graph that can be edited. So obviousely I need access to its x,y properties.
How can I set the initial x,y coordinates and also access them as they update?
Other libraries I saw are pretty straight forward, just add the coordinates to the nodes object. However it doesn't seem to work on vis.
"nodes": [
{
"id": 1,
"title": "Node A",
"x": 258.3976135253906,
"y": 331.9783248901367,
"type": "empty"
},
{
"id": 2,
"title": "Node B",
"x": 593.9393920898438,
"y": 260.6060791015625,
"type": "empty"
},]
I am trying to create a scatterplot using webservice API endpoints provided by my university and Vega-lite visualization library. The goal is to have hour of day plotted on the x-axis and the count of instances on the y axis by using the following.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"mark": "point",
"encoding": {
"x": {"field": "0", "type": "quantitative"},
"y": {"field": "1", "type": "quantitative"}
}
}
I have tried to follow several examples found online and have only able to figure out how to plot one point at a time using the above code or manually input each point on the graph, however doing it manually is not an option for my purposes. My JSON file looks is as follows where the hours of day are represented by 0-23 and count of each instance is right next to it.
{"0":429,"1":231,"2":130,"3":85,"4":42,"5":1,"7":1,"8":17,"9":16,"10":795,"11":425,"12":921,"13":846,"14":1795,"15":1789,"16":2119,"17":1630,"18":1942,"19":1637,"20":1636,"21":1054,"22":843,"23":710}
I have been trying to figure this out for a while and need some help going in the right direction
Data in vega-lite is expected to be specified as a list of records; e.g. rather than
{"0":429,"1":231,"2":130}
it should be
[{"x": "0", "y": 429}, {"x": "1", "y": 231}, {"x": "2", "y": 130}]
If your data source cannot be modified, it is possible to use the fold transform to reshape your data. It would look something like this (view in vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"transform": [
{
"fold": ["0", "1", "2", "3", "4", "5", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
"as": ["x", "y"]
}
],
"mark": "point",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}
Unfortunately, there's no way to fold data like this without explicitly listing all the entries to be folded.
Is it possible to build a stacked bar chart in D3 with different stacked levels?
I've been reading about it but cud only find examples which has same stacked levels.
In other words,
Instead of this JSON -
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 11},
{ "x": 1, "y": 10},
{ "x": 2, "y": 10}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 9},
{ "x": 2, "y": 9}
]
}
];
Can we create a bar chart with -
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 11},
{ "x": 1, "y": 10},
{ "x": 2, "y": 10}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9}
]
}
];
I read -
https://bl.ocks.org/mbostock/3886208
https://bl.ocks.org/mbostock/1134768
https://github.com/mbostock/d3/wiki/Stack-Layout
This is fairly easy to do, depending on how you design your loading of data into the chart.
Essentially the process would be:
Use the data() function with the layers variable, which allows you to then work with each data set individually
Add a g element using the enter() function of the result of step 1
Call data() again, this time using the values of the attached data (.data(function(d){return d.values;}))
Use the enter() function of the result of step 3 to generate the bars
Note that to get things to actually stack you will need to keep track of the current stacked height of each x position. All you have to do is generate an array of zeroes and update the value at index d.x when setting the rectangle's y attribute.
Fiddle showing a quick sample. To make this a fully working example, you'll have to add axes/scales and all the extra things.
How I can add 3 lines to the graphic in xCharts? For make graphic with 2 lines I should write:
var data = {
"xScale": "time",
"yScale": "linear",
"type": "line",
"main": [
{
"data": getStatistic(), // Some JSON data
},
],
"comp": [
{
"type": "line",
"data": getStatistic(), // Some JSON data
},
],
};
But adding one more "comp" element doesn't work. On library website I not found graphic with more than two lines...
The answer can be found here: https://github.com/tenXer/xcharts/issues/21
main data and comp are data both Arrays. They can take many different data sets. The documentation might not explain this very well...
You can provide multiple data sets to the main Array to accomplish what you'd like. In example, here is how you might draw both pizza and tacos:
{
"main": [
{
"className": ".pizza",
"data": [
{
"x": "2012-11-05",
"y": 12
},
{
"x": "2012-11-06",
"y": 8
}
]
},
{
"className": ".tacos",
"data": [
{
"x": "2012-11-05",
"y": 8
},
{
"x": "2012-11-06",
"y": 11
}
]
}
]
}
You can add more data sets to this main Array. There is no limit.
I am a d3 newbie and I've been trying to customize the Streamgraph example (http://mbostock.github.com/d3/ex/stream.html):
I have run into some issues:
I want to assign a custom data property (for examples sake, lets just say its a label called "type") to each layer in the stream so that when you hover over that layer, a popup box appears with the "type" listed for that layer.
When I input my data source into the graph I use this code:
vis.selectAll("path")
.data(data0)
.enter().append("path")
The graph only seems to take data of the format:
[
[
{
"x": 0,
"y": 91,
"y0": 1.11
},
{
"x": 1,
"y": 290,
"y0": 1.11
}
],
[
{
"x": 0,
"y": 9,
"y0": 1.11
},
{
"x": 1,
"y": 49,
"y0": 1.11
}
]
]
Where each sub-array above corresponds to a layer in the streamgraph.
How can I pass data to the graph that allows me to add an extra "type" property for each layer?
Basically so that when I refer to the datum of a layer, I can just type something like d.type and extract that property?
I originally came up with a really hackish way to do it:
[
{
"x": 0,
"y": 9,
"y0": 1.11,
"type": "listings"
},
{
"x": 1,
"y": 49,
"y0": 1.11,
}
]
and then I refer to it in the layer datum by saying d[0].type, but this doesn't seem like the proper way to do it.
Use stack.values, and then wrap each layer's data points with some additional data for the layer. Your data will look something like this:
[
{
"type": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"type": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
]
And the stack layout like this:
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });