loading data directly from a string

Sergio Fernández

unread,

Jul 19, 2012, 10:00:25 AM7/19/12

to d3...@googlegroups.com

Hi,

this is my first time using this awesome library, so thanks for creating and supporting it!

I'm trying to render some data that actually comes from the server side in the same request that the html view, so I'd like to load it directly from a string. Sorry, but I was checking the API with find how to do it.

Something like:

d3.load("{ ... }");

Anyone can point me the right documentation for such task?

Thanks in advance.

Greetings,

Marc Fawzi

unread,

Jul 19, 2012, 10:32:11 AM7/19/12

to d3...@googlegroups.com

I'm wrapping a CSV string inside JSON because it just happens that the SQL to generate CSV is simpler than the SQL to generate JSON and also because I need to grab a lot of data points initially and CSV is tons more compact than JSON

I use d3.json.parse(string) to convert the CSV data to format suitable for .data() ... You can JSON.stringify to see what it produces

If you're building the CSV string manually you may need to inject \r\n at the end of each row and be sure to conform to the CSV spec

Sent from my iPhone

Frank Guerino

unread,

Jul 20, 2012, 8:09:31 AM7/20/12

to d3...@googlegroups.com

Hi Sergio,

If I'm reading your request properly, I believe I do this in a number of examples that may be useful to you...

In each example, the relevant data is housed within the HTML page as associative arrays. I've done this so I can understand how the data needs to look in its raw form, because JSON and CSV may not always be available.

I hope they help.

My Best,

Frank

Sufyan Jamil

unread,

Sep 27, 2012, 3:20:34 AM9/27/12

to d3...@googlegroups.com

this code works for me .. try this if u havnt found the solution yet ..

var mydata = '<%=json %>';   // this is my sample json string

            var myjson = JSON.parse(mydata); // i have parsed my json string to json

            //            d3.json(myjson, function (json) {   // you have to comment this because we have parsed our json string
          force.nodes(myjson.nodes).links(myjson.links).start(); //now replace json with myjson in this code so....
            var link = svg.selectAll("line.link").data(myjson.links).enter().append("line").attr("class", "link").style("stroke-width", function (d) { return Math.sqrt(d.value); });
            var node = svg.selectAll("circle.node").data(myjson.nodes).enter().append("circle").attr("class", "node").attr("r", 5).style("fill", function (d) { return color(d.group); }).call(force.drag);

if u get any issue , feel free to contact.

Regards
Sufyan Jamil

Vicky

unread,

Jan 17, 2013, 5:36:18 AM1/17/13

to d3...@googlegroups.com

Hi,

I am using d3 in aspx page. I am feeding json file as input and used JSON.parse as suggested by you (thanks a lot).

I am getting the output in localhost. but after hosting it on server (IIS), i am getting a blank page.. :(

I have tried different things.. Any idea why it is happening???

PFA the source file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.node

{

stroke: #fff;

stroke-width: 1.5px;

}

.link

{

stroke: #999;

stroke-opacity: .6;

}

</style>

</head>

<body>

<div>

<asp:HiddenField ID="hdnData" runat="server" />

</div>

</form>

//var ret = document.getElementById('hdnData').value;

var myjson = jsonParse(ret);

var width = 960;

var height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()

.charge(-120)

.linkDistance(50)

.size([width, height]);

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

d3.json("multiple.json", function (error, graph) {

force

.nodes(myjson.nodes)

.links(myjson.links)

.start();

var link = svg.selectAll("line.link")

.data(myjson.links)

.enter().append("line")

.attr("class", "link")

.style("stroke-width", function (d) { return Math.sqrt(d.value); });

var node = svg.selectAll("circle.node")

.data(myjson.nodes)

.enter().append("circle")

.attr("class", "node")

.attr("r", 20)

.style("fill", function (d) { return color(d.group); })

.call(force.drag);

node.append("title").text(function (d) { return d.name; });

force.on("tick", function () {

link.attr("x1", function (d) { return d.source.x; })

.attr("y1", function (d) { return d.source.y; })

.attr("x2", function (d) { return d.target.x; })

.attr("y2", function (d) { return d.target.y; });

node.attr("cx", function (d) { return d.x; })

.attr("cy", function (d) { return d.y; });

});

</script>

</body>

</html>

Regards.

am

unread,

Jan 17, 2013, 9:55:37 PM1/17/13

to d3...@googlegroups.com

Hi Vicky,

You might need to add an MIME type for getting a JSON file from IIS server.

extension: .json

Type: application/json

Hope it helps :)

Thanks,

Anwarhusen

Vicky

unread,

Jan 18, 2013, 1:08:32 AM1/18/13

to d3...@googlegroups.com

Thanks for the reply.. I have already tried but no success :(

Reply all

Reply to author

Forward