I'm a newbie at d3.js and need help to adapt Zoomable Sunburst to make it work with self-referencing CSV data.
Sample lines from the input CSV:
id,parentId,name,size
ROOT,NULL,Root,
RE,ROOT,General > Revenue Expenditure,
RE11,RE,Main supervision recovery etc.,
RE11A109K,RE11,Shivjayanti celebrations and lighting,170000
RE11H108,RE11,Electicity for import tax naka,2550000
RE11J,RE11,Maintaince for main building,
RE11J101A,RE11J,Electricity expenditure,11475000
RE11J101 C,RE11J,Power lift,2125000
As you can see, there are variable levels of depth. At some places the data is coming at 3rd level, at others we might have parent-child relationships going 9 levels deep, and so on. That's government budgets for you!
While there are columns in addition to these 4 that aren't critical to the visualization (so omitted here), I would be displaying their contents in a side pane on mouseover. So while non-critical, any additional columns do need to carry through and not get dropped.
I looked into many d3.nest() examples but those doesn't seem to work for parent-child self-referencing columns and data with variable levels of depth.
I'm presently using a workaround to convert this into hierarchical JSON in the flare.json format, using this DataStructures.Tree project . But looking for a more direct solution. Almost there, but not able to mix up code from different sources. Would be grateful to be shown a full top-to-bottom solution. Thanks in advance!
Got it. We include these scripts from the DataStructures.Tree project linked in the question : base.js, DataStructures.Tree.js. (you'll find them in /js/lib/ and /js/vendor/)
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="DataStructures.Tree.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
Then, we replace this line,
d3.json("flare.json", functon(error, root) {
..with these lines:
d3.csv("electrical5.csv", function(data){
var tree = DataStructures.Tree.createFromFlatTable(data),
root = tree.toSimpleObject(function(objectToDecorate, originalNode) {
objectToDecorate.size = originalNode.size;
if (objectToDecorate.children && objectToDecorate.children.length == 0) {
delete objectToDecorate.children;
}
return objectToDecorate;
});
//console.log(JSON.stringify(root));
leave everything else just as it is.
Uncomment the console.log line for debugging; it will put the json code in the browser console when you load the page. You can also make a textarea in the webpage and output the json code in that.
document.getElementById("SHOWME").value = JSON.stringify(root);
[at bottom of page]
<textarea id="SHOWME"></textarea>
it will be unformatted json code, so copy-paste it to http://codebeautify.org/jsonviewer and that ought to give you a well-formatted json.
To get more columns in apart from the regular [id,parentId,name,size] , we have to edit DataStructures.Tree.js
Locate these lines:
simpleChildRepresentation.push(decorateNode({
"name" : node.name,
"children" : children
}, node));
And insert the extra columns in the same format as the node.name line.
simpleChildRepresentation.push(decorateNode({
"name" : node.name,
//CUSTOM COLUMNS
"workcode" : node.id,
"parentcode" : node.parentId,
"department" : node.department,
"totalorextract" : node.totalorextract,
"total" : node.total,
"pages" : node.pages,
//CUSTOM COLUMNS DONE
"children" : children
}, node));
You can now directly visualize self-referencing csv data on any d3.js visualization that uses flare.json . Animations get a bit clunkier, though.
Related
I'm like to admit that my knowledge of HTML is very little.
Assume we have a button on our pagepage that calls a javascript function: check().
The check() function withdraws an array (contantly updated) of values, e.g. string, from a server. If each element of the array has a certain property, e.g. contain a letter "a", then it wants to print those strings on the webpage.
The upperbound of the array size retrieved from the server is known but we do not know in advance how many elements satisfies the condition checked by check().
Question how to print the elements found by check() on a HTML file (a webpage).
Let's assume javascrip is in the the HTLM file too.
With something like <div id="destination"></div> in the HTML as a placeholder, you can use JavaScript to loop through your array of items and insert each one into the HTML with:
document.getElementById('destination').innerHTML += '<p>' + myData + '</p>';
I made a choropleth map of Chicago's 77 neighborhoods in D3.
The only challenge is, it's hard to know which neighborhood is which.
So, what I did was make divs with p elements (containing the neighborhood names) in the body of my HTML file and positioned them into a blank spot in my svg/canvas.
See a visual here.
What I'm trying to do is make it so when you hover over the name, the geographic boundary of the neighborhood highlights. Somehow I need to relate the geography to the text, but I have no idea how.
For a more robust solution, you would ideally want to add an id field to your data. This assumes that your data is some format (such as JSON). You may already have a unique identifier that you can use instead, but if not the following should work.
var i = 0;
for (var x in dataSet)
dataSet[x].id = ++i; //Or i++ for zero-based indexing
Now it depends on how you are generating the svg elements, but ideally you are using the enter function of d3. In that case, just create the result of enter as a variable and use it to append both the path (map portion) as well as the text.
var dataSelect = svg.selectAll(".item").data(data.items);
var dataEnter = dataSelect.enter();
dataEnter.append("path").....
dataEnter.append("text").....text(function(d){return d.label;}) //Using text because this is drawn inside the SVG.
With using the data and enter functions, the created objects automatically have the id data bound to them.
This makes it a simple case of text.id == path.id in your mouseover function.
svg.selectAll(".itemText").on("mouseover", function(textItem){
svg.selectAll(".item").each(function (cityItem){
if (cityItem.id == textItem.id)
d3.select(this).style("fill", "green");
else
d3.select(this).style("fill", function(d){return d.color;});
})
});
I've done this in a fiddle which you can see here
Note that this does not use p elements because ideally, if you're using SVG then you probably should use text elements. If you have to use p elements, then you can still use this general technique, but instead using p.text() as the matching factor on mouseover instead of id, assuming that the name is bound to your path data somewhere.
I am using D3plus for data visualization . but in the x axis wrong data is showing instead of what i wrote in .x("year") to show .
http://jsfiddle.net/MituVinci/a77kz0dr/
enter code here
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data(sample_data) // data to use with the visualization
.type("scatter") // visualization type
.id("Reason") // key for which our data is unique on
.x("year") // key for x-axis
.y("Female") // key for y-axis
.draw()
I also want to resize the width and height of this and also want to show it using an external json file how can i do it ?
Since you have "Reason" as your .id() variable, D3plus is aggregating all data points that have the same "Reason". So the "x" position for "Family Feud" is 2010+2011+2012+2013+2014 or 10060, which is where all of your bubbles are located.
If you want to display each bubble individually, you could create a separate variable called "ReasonYear", concat the text of the Reason and Year fields together and then use .id("ReasonYear") for your visualization.
Use .width() and .height() to control the width and height respectively of your visualization.
Use .data() to load data from an external JSON file
Documentation can be found here: https://github.com/alexandersimoes/d3plus/wiki/Visualizations
I am completely stumped on this one. Everything's working fine (or fine enough for now) and all I need is to get the data back out of the factory in a non-json format. I've got a semi-working plunker with all the details.
Basically, the first page (under the Ctrl controller) is where a user can check a bunch of boxes. There's also an ng-switch between sets of options (the real things are much, much larger lists than these), so the checkboxFactory maintains the user's choices. When the user goes to the next page (or "next page" in the plunker because faking it), they can see what they chose. Those choices will then get wrapped up in a json post back to the server. I need to show the user-friendly name, but also have the id# of the choice, for the server.
If I put value="{{item.name}}" in the original checkbox ng-repeat, everything is fine. Except for the fact that then I have a factory of names, and not the server-required ids. Doing a second array in the factory (one for selected names, one for the corresponding selected ids) seems like overkill, when theoretically I could just add each selection as an object, and extract the properties as needed on the second page.
In reality, it's not working. Here's what I get if I echo the factory, after selections are made:
[ "{\"id\":1,\"name\":\"Firstplace\"}", "{\"id\":2,\"name\":\"Second place\"}" ]
...and I'm not sure, but those backslashes seem to be turning every selection into strings, because there are quotes just inside the square brackets. I've tried editing line 54 in the script, but I get errors. It doesn't like this:
if (checked && index == -1) {
if (setup) elem.prop('checked', false);
else scope.list.push({
id:"scope.value.id",
name:"scope.value.name"
});
On the html side, it doesn't like any of the variations I've tried in the ng-repeat, either. It seems like the source of all nightmares is that pushing is creating deformed json. I've tried all of these the second page/output:
{{item}}
{{item.name}}
{{item.item.name}}
The only one that works is {{item}} and unsurprisingly it's pretty ugly. Has anyone run into this before, and have any hints on how to fix this? Many thanks in advance.
using # will turn your object into a string, you should just use a reference to your item object instead and use =.
Change {{item}} to just item as a reference:
<input type="checkbox" name="group1" value="item" ng-model="isChecked" checkbox-list='checkedCity' />
In directive use =:
scope: {
list: '=checkboxList',
value: '='
},
see updated plunker
This may be a little confusing to describe.
Basically, I am parsing multiple external JSON feeds that display in different views depending on the 'active tab' displayed. They both share the same partial template, so they both look exactly the same, just different content.
The problem that I am facing now is, that in some feeds, some keys are placed in an array and others are not.
For example, the feeds parses this kind of data:
JSON Feed 1 - One 'attributes' inside of 'link'
"link":{
"attributes":{
"href":"www.link1.com"
}
}
JSON Feed 2 - Two 'attributes' inside of 'link'
"link":[
{
"attributes":{
"href":"www.link1.com"
}
},
{
"attributes":{
"href":"www.link2.com"
}
}
]
The only way I am able to get the value "www.link1.com" is via:
For Feed 1:
link1
And for Feed 2:
link1
I am trying to figure out what would be the best way to do:
1) If link[0] exists - display it, else if [link] exists, display that instead.
2) Or if targeting the activeTab would be safer? For instance, if activeTab = view2 or view4, use [link][0], else if activeTab = view1 or view3 use [link], else if I do not want it to be displayed, do not display anything.
Also a relatable question, if I am on view2 can I only display [link][0] on that view?
Any feedback would be appreciated. Thanks!
In your model controller, you can reconstruct the JSON objects to make them similar. The value of link in both feeds should be an array.
Then in your template you can simply use ngRepeat to get the items from inside the array.
Okay - so I found a solution to one of the questions above: "How to only display [link][0] in a specific view"
Pro: It's a simple code that depends on the activeTab / view that is being displayed.
Con(?): Since I am really a newbie to AngularJS - not sure if this is the best solution.
Basically:
Depending on the ng-view that is currently displayed, than a specific JSON object will be displayed, such as:
<a ng-show="activeTab == 'view1' || activeTab == 'view3'" ng-href="{{item['link'][0]['attributes']['href']}}">
<h6>Link1 from Feed2</h6>
</a>
Although the primary question is still unresolved: How to swap/switch JSON objects (key,values) if one exists, and not the other. I am still definitely trying to find a solution, although any help is still appreciated.
Please let me know what you think, or how I can improve the solution to the problem!
Thanks!
Roc.