so javascript newbie here, been banging my head on how to get JSON source json
loaded into d3.js Radial Dendrogram graph.
located here: d3.js Radial Dendrogram graph example
the current plan is to import JSON into python
or maybe convert the json into a 2 column (id,value) csv using python.
but i would love to understand the how this can be accomplished as i've been banging my head on javascript and d3.js for almost 2 days now.
Basically i'm trying to load the data into d3.js
to allow the visualization of the following
with the root being system
EDIT: to show the hopeful tendril flow
system --> model_type --> system_revision --> firmware_version --> firmware_build, system_name
to follow the example csv given in the link above.
id,value
systems,
systems_PowerEdge R720xd,
systems_PowerEdge R720xd_I,
systems_PowerEdge R720xd_I_1.50.50,
systems_PowerEdge R720xd_I_1.50.50_34,ldc0000
is the kind of output i would love to get.
Just coming back to this question from yesterday. As I said in my comment, you need to convert your JSON structure to the parent/child hierarchy required by d3.hierarchy. Unfortunately, your source data is not really hierarchical at all, so the only way I see to do this is in a very manual manner:
var root = {
id: "system",
children: []
};
data.systems.forEach(function(d,i){
var key = Object.keys(d)[0],
sysInfo = d[key].sysInfo;
root.children.push({
id: sysInfo.system_model,
children: [{
id: sysInfo.system_revision,
children: [{
id: sysInfo.firmware_version,
children: [{
id: sysInfo.firmware_build
}, {
id: key
}]
}]
}]
});
});
root = d3.hierarchy(root);
After that the dendrogram code remains unchanged except for fixing the text labels:
.text(function(d) { console.log(d); return d.data.id });
Full running code.
Related
I'm trying to use this widget to display 3 sets of data. the first set should be shown as a bar chart, and the rest can be displayed as lines on the chart.
From what I've read, Rickshaw Graphs should be able to do this by using the 'multi' renderer but I can't get that render to work at all.
Here is the ruby Array data object I'm sending, formatted to make it more readable:
iterationData:
[
{
:name=>"Delivered",
:renderer=>"bar",
:data=> [
{:x=>1, :y=>0},
{:x=>2, :y=>4},
{:x=>3, :y=>4},
{:x=>4, :y=>11}
]
},
{
:name=>"Estimated",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.7},
{:x=>2, :y=>5.4},
{:x=>3, :y=>8.10},
{:x=>4, :y=>10.8},
{:x=>5, :y=>13.5},
{:x=>6, :y=>16.2},
{:x=>7, :y=>18.9},
{:x=>8, :y=>21.59},
{:x=>9, :y=>24.29},
{:x=>10, :y=>26.99}
]
},
{
:name=>"Outlook",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.75},
{:x=>2, :y=>5.5},
{:x=>3, :y=>8.25},
{:x=>4, :y=>11.0},
{:x=>5, :y=>13.75},
{:x=>6, :y=>16.5},
{:x=>7, :y=>19.25},
{:x=>8, :y=>22.0},
{:x=>9, :y=>24.75},
{:x=>10, :y=>27.5}
]
}
]
and here is my calls to show the graph and to send data to the graph:
send_event in the ruby job:
send_event("#{projectID}-burnup-chart", {:series => iterationData})
dashboard.erb code:
<div data-id="23405488441-burnup-chart" data-view="Rickshawgraph" style="background-color:#ff9618" data-legend=true data-unstack=true data-renderer="bar" data-color-scheme="compliment" data-max="40"></div>
This just displays a blank widget with an orange background. The graph hasn't rendered at all. Can anyone suggest how I might achieve this? Or has anyone used a different widget to create a working burn up chart like this that they might be able to suggest?
I believe what you are trying to do is impossible because of the way that this widget marshals parameters from Dashing to Rickshaw.
Specifically, these complicated lines of code:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L193-L253
I'm not sure if Rickshaw gets mad if you send it extra data, but the author of the widget seems very concerned about sending it incorrectly. Essentially, you are falling into this case:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L237-L245
You might be able to get it to work if you added a line to that else if, like this:
else if series?.data?
# Rickshaw data. Need to clone, otherwise we could end up with multiple graphs sharing
# the same data, and Rickshaw really doesn't like that.
answer = {
renderer: series.renderer # add your renderer
name: series.name
data: series.data
color: series.color
stroke: series.stroke
}
Or better yet, just use jQuery Extend to make a new copy:
answer = $.extend(true, {}, series);
Let me know how it goes and I'll update my answer to assist if further problems arise.
I am very new to d3. I have 3 days old d3 knowledge. I was trying to make one pack layout but I am not able to call translate(of transform) function based on the data in external json file. My json file is not formatted as name, children order (which has been used most of the examples). So, can any one clarify that whether we must have the json file in proper format like in tree structure to get the proper pack or tree layout. My json file format is:
{
"sourcefile":"Script",
"structure":{
"Links":[
[
"step1",
"port1",
"step2",
"port2"
],
[
"step3",
"port3",
"step4",
"port4"
]
],
"device":{
"step1":{
"args":{
"pin":[
"XXXX",
100
]
},
"device_type":"console"
},
"lock":{
"args":{
"username":[
"XXXX",
"test"
],
"address":[
"XXXX",
"10.0.0.1"
]
},
"device_type":"Light"
}
}
}
}
It it's true..I was wondering if anyone can tell me about some online tool to format this json file into the following format..
{
"name": "Names",
"children":
[
{ "name": "John", "size": 100 }
]
}
Your intuition is correct. The pack layout requires input data formatted as a hierachy. It seems unlikely that an online tool to convert general JSON data to this structure would exist, as such a tool would almost have to be custom-built for each particular data set. However, d3 itself has utility functions to help you to create the required structure. I'm referring to the Nest utilities. Looking at your input data, it's not at all obvious how to structure it in a hierarchy, so I can't offer any specific implementations suggestions. In general, though, I'd suggest transforming your data into a simple array of objects and then use the d3.nest utilities to extract the hierarchy from the data.
I believe what I am trying to accomplish should be a fairly common task, yet I'm having difficulty getting it to work. I simply wish to create a multi-series plot from a data set containing (for each record) an ISO8601 timestamp along with multiple data points. The data is in JSON format and I'm using dojox.charting.chart "Lines" type.
I'm already aware that the Dojo charts cannot directly handle time-based axis data, let alone ISO8601. So I've already dealt with converting the x-axis to milliseconds-since-T0 server-side.
Here is a distilled example excerpt of my JSON:
[{"Offset_ms":0,"CP":250.58368,"TP":181.88211},
{"Offset_ms":360000,"CP":233.18443,"TP":119.94824},
{"Offset_ms":540000,"CP":227.15465,"TP":117.99422},
{"Offset_ms":720000,"CP":222.87495,"TP":117.55895},
{"Offset_ms":896000,"CP":218.19876,"TP":117.64221},
{"Offset_ms":900000,"CP":219.77487,"TP":117.93475}]
And the distilled JavaScript (assume the above JSON is in the variable 'sequenceData'):
var chart = new dojox.charting.Chart("sequenceDataGraph");
chart.addPlot("default", {
type: "Lines",
tension: "X"
});
chart.addAxis("x", { labelFunc: labelTimeAxis });
chart.addAxis("y", { vertical: true });
var sequenceDataStore = new dojo.store.Observable(new dojo.store.Memory({
data: {
label: "Sequence",
items: sequenceData
}
}));
addSequenceDataSeries(chart, sequenceDataStore, "TP");
addSequenceDataSeries(chart, sequenceDataStore, "CP");
chart.render();
function addSequenceDataSeries(chart, sequenceDataStore, sColumnName) {
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
}
What appears to be happening, is that Dojo Chart is not using the x-axis data at all, but instead plotting each point at a fixed interval based on the number of data points. That is, each data point seems to be assigned an ordinal, such as if Offset_ms was merely 1, 2, 3... Since my data points are not always at fixed intervals, the resulting graph is distorted.
How do I instruct Dojo Chart to use the "Offset_ms" field in the JSON data for the x-axis component?
I've scoured the tutorials, the API docs and performed numerous Google & SO searches to no avail. I've even browsed portions of the Dojo source, particularly StoreSeries.js.uncompressed.js, but I'm not finding any answers. Surely this is possible, and hopefully trivial!
Unfortunately, the official dojo documentation is seriously lacking, and I only figured out how to do something similar by browsing the dojo source. Specifically, line 135 of the StoreSeries test, http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_StoreSeries.html
The StoreSeries constructor's third argument accepts an object that maps the X and Y axis to specific fields in your data store.
Change the following line in your code from this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
to this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
{ x: "Offset_ms", y: sColumnName }));
sColumnName becomes { x: "Offset_ms", y: sColumnName }
I got a go program that outputs json data:
{ "cpu" : {
"Idle" : 9875425,
"Iowait" : 28338,
"Irq" : 5,
"Nice" : 9707,
"Softirq" : 4051,
"System" : 153933,
"Time" : 1329211407,
"User" : 392229
},
"cpu0" : {
"Idle" : 2417441,
"Iowait" : 3212,
"Irq" : 5,
"Nice" : 1419,
"Softirq" : 3935,
"System" : 62177,
"Time" : 1329211407,
"User" : 109227
},
}
I'm looking for a good efficient way to present and update a graph using javascript (say for every 1s).
There is no shortage of javascript libraries to graph data. I've worked with Highcharts, which is free for personal projects. To make a graph using your data in highcharts, you could do something like this:
var data = [] //your data from above; you'll need to convert it to an array of y-values or one of the other available formats
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
},
series: [{
name: 'Series Title',
data: data
}]
});
});
...However, as mentioned, there are lots of JS graphing libraries. To name a few:
JQPlot
D3
Processing.js
Sencha Charts
If you're looking for a more specific answer, I'm not sure folks can offer that much in response to a vague question.
I'm a big fan of dygraphs. Very powerful. Very flexible.
I like to work with the d3js library for this kind of work.
http://mbostock.github.com/d3/
It has very nice functions to update graphs with new data.
Maybe you can base your work on the "bullet charts" example.
Google has a BUNCH of apis. You should check some of them out. One of them is the chart api here. It let's you make QR codes too. Google even has some examples in the js playground: http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line
I'm trying to draw US state outlines with the D3 framework (http://mbostock.github.com/d3/) but am having issues generating the actual SVG data. I've written my code to follow the Chloropleth example (as it most closely resembles what this project needs), made sure the supplied data is in geoJSON format, and AFAIK have the backend half of this working fine.
The problem is that when I view the DOM, the <svg> object contains only one <g> element (which I created manually, per the example), and none of the child <path> elements that should under it. My code seems fairly identical to the example, and my data appears to look correct, though I am outputting MultiPolygons instead of the Polygon object that the example uses.
Our app is a RoR project with jQuery (we're only using D3 for the SVG and geography features). The test page tries to create an <svg> element under a div called theArea, based upon the selection from a dropdown select of U.S. states:
$(document).ready( function() {
$("#chooser_state").change( function() {
var status = "#status";
var statebox = "#chooser_state";
var theArea = "#theArea"
var url = "/test/get_state_geom";
var data = { state: $(statebox).val() };
$(status).text("Request sent...");
$.post(url, jQuery.param(data), function(resp) {
$(status).text("Received response: " + resp["message"]);
$(theArea).empty();
var path = d3.geo.path();
var svg = d3.select(theArea).append("svg");
var state = svg.append("g").attr("id", "state_view");
var features = resp.payload.features;
$(status).text("Created SVG object");
state.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path );
});
});
});
The data we're feeding D3 looks like this:
{
'type' => 'Feature',
'id' => '01',
'properties' => {
'name' => 'Colorado'
},
'geometry' => {
'type' => 'MultiPolygon',
'coordinates' => [
[
[
[
-106.190553863626,
40.9976070173843
],
[
-106.061181,
40.996998999999995
],
< -- and so on -- >
]
]
]
}
}
Can someone clue me in to what we're doing wrong? I am new to geo and GIS stuff. I suspect the problem lies with the data() function, as it looks like it should be creating the blank <path> objects for each Feature (though we have only one, at the moment), but the D3 documentation seems unclear (and difficult to understand).
EDIT: Just wanted to add that the geoJSON we generate was created by the geoJSON extension for the GeoRuby gem. The actual map lines were sourced from the consolidated data that US Census Bureau's cartographic boundary files, which were converted to SQL and saved with postGIS. Part of me suspects the geoJSON extension is doing something wrong, so that is my next avenue of attack.
After giving up on this and then coming back, I noticed that my FeaturesCollection was not, in fact, a collection. There's a small detail that is easy to overlook when examining geoJSON samples: the contents of the FeaturesCollection is an array of hashes, not a single hash.