This is the first time I am using D3 and was wondering whether someone could explain how I can create the Bilevel Partition with only two layers.
A complete & not complete section. then the complete section shows avergae corrrect and incorrect.
I've had a look at this code http://bl.ocks.org/mbostock/5944371
but I am not fully aware of what it does.
The code doesn't really care what data you throw at it, as long as it is formatted the way it expects.
Right now, this is the JSON file it is loading in.
Make your own JSON file that looks like
{
"name": "sections",
"children": [
{
"name": "complete",
"children": [
{"name": "correct", "size": 10},
{"name": "incorrect", "size": 30}
]
},
{
"name": "incomplete",
"size": 20
}
]
}
And see if it works when you load that in instead of flare.json. If you load the file locally, use firefox to check out the code, chrome will block requests for local files.
I have it working somewhat on tributary, you can change the data and the code, and fork it if you want to save your edits. here it is
Related
I have a JSON file that contains lots of nodes. Each node has a unique id. The following is an example skeleton structure of the JSON file.
{
"node1": {
"id": "1",
"name": "student",
"properties": {
"name": "Ram",
"lastname": "Kumar",
"age": "20"
}
},
"node2": {
"id": "2",
"name": "Teacher",
"properties": {
"name": "Ram",
"subject": "Computers"
}
}
Now, this was just sample data. Suppose, I have to find node 2, provided I have the position of the node in the file. That is it's beginning and the end. I create a read stream from the start position and the end position of the file to get the object within the complete JSON object in the file. Now, using JSON.parse function I am able to create an object within the program after parsing it.
But, now I use a writestream to make the changes in the object at the required positions after computing them.
For example, I have to edit the subject property of the teacher, and the main rule is I cannot completely write the object again. Rather, create a writestream at the position where there is subject property and just edit that value.
So, the question is how to do so? And that to with multiple positions to edit, that is editing multiple properties, without rewriting them all.
I know I might face an issue if I use multi-threading for this to simultaneously edit the multiple properties at once, but I need a work around that too.
I have this json data that is gotten from an API end point.
[{
"id": 1,
"style": "A",
"color": "black",
"size": "30",
"quantity": "122.00"
},
{
"id": 2,
"style": "B",
"color": "maroon",
"size": "24",
"quantity": "48.00"
},...]
I know I can use array.map() to loop over the data and give me a table with headers 'style','color','size', and 'quantity' with corresponding data rows below.
What I want to do is transform the rendering into this table format as it is more human-readable and a big plus would be to have the cells editable also (e.g. data ties back to state). Specifically, the sizes are in the column headers. How can I do this using either plain react/javascript logic or even better is there a popular React package that has this capability? Currently looking at react-table and react-virtualized but don't have enough experience on these packages to do something complex. Some code would be highly appreciated.
Here is the image of the table which i created.Hope you are looking for this
And here is the link for the project
https://github.com/AdnanShah/ReactJS-KretaHub-
I'm trying to improve this graph visualisation with d3 lib
I'm using json like this
{"name": "START", "children": [{"name": "1", "children": [], "state": ["(free left)", "(free right)"]}], "state": ["(free up)", "(free down)"]}
And I need to show the "state" information about node on click. For now it doesn't matter how, alert() for example.
How should I change click() function? What should I use?
I'm trying to use Symphony CMS to output its XSL as JSON, for use in the angular phonecat app example from the tutorial. My list view json is output as an array with [{ }] brackets around it. My detail view json is output with only { } around it:
{
"position": 1,
"order": 3,
"total": "1",
"id": "sunt",
"sym_id": "21",
"cat": "back-end",
"imageUrl": "http://localhost:8080/workspace/images/phones/Nondell-streak-7.0.jpg",
"name": "Sunt",
"done": "No",
"priority": "medium",
"date-created" : "18 November 2015",
"date-modified" : "19/11/15 10:41am",
"date-due" : "18/11/15 2:13pm",
"snippet": "Quam nihil molestiae"
}
When loading my page the list view loads. When I click on an item the detail view tries to load but I get: SyntaxError: Unexpected token ,. Why? The syntax seems normal to me?
A big problem I am struggling with is that my json is created dynamically with the CMS but no actual files are on the server as far as I know.
Before I was getting the error: Error in resource configuration for action get. Expected response to contain an object but got an array so I made some changes so the list is output as an array, and the single views are output as an object.
My json is generated on localhost:8080/json/{parameter}. The param is 'todos' when not set. So my list view is situated at localhost:8080/json/todos. The param takes the selected object's name, so my detail view would be at localhost:8080/json/foo when I press the link generated by angular.
I hope my question is complete and makes sense :D
I'm very new to d3 and would like some insight before I invest too much time into this code. This zoomable treemap (http://jsfiddle.net/08agmhej/, which I originally got from http://bost.ocks.org/mike/treemap/) uses d3 transitioning to only show two levels of data hierarchy at a time. The data is provided in a JSON file in the following format:
{
"name": "layout",
"children": [
{"name": "AxisLayout", "value": 6725},
{"name": "BundledEdgeRouter", "value": 3727}}
}
I would like to add a second dataset to the JSON that looks like the below code and allow the user to interact with the dataset via a dropdown such as in this example (http://mbostock.github.io/d3/talk/20111018/treemap.html)
{
"name": "layout",
"children": [
{"name": "AxisLayout", "value": 6725, "othervalue" : 2},
{"name": "BundledEdgeRouter", "value": 3727, "othervalue" : 2}
]
}
Is this possible or is it not since d3 couldn't handle the hidden node levels? For example, if zoomed in what would happen if the data source was changed, then zoomed out.