my code:
function d3_chart() {
// sample data array
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data("./extra/acc.csv", {"filetype": "csv"}) // data to use with the visualization
.type("line") // visualization type
.y("x") // key to use for y-axis
.x("timestamp") // key to use for x-axis
.draw() // finally, draw the visualization!
}
my csv:
timestamp,x,y,z
0,2019-02-28 12:20:19.631,1.072,-0.153,10.113
1,2019-02-28 12:20:19.731,1.072,-0.153,10.419
2,2019-02-28 12:20:19.831,1.072,-0.153,9.96
3,2019-02-28 12:20:19.931,1.072,-0.153,10.113
4,2019-02-28 12:20:20.031,1.072,-0.153,10.113
5,2019-02-28 12:20:20.132,1.225,-0.153,9.96
6,2019-02-28 12:20:20.231,1.225,-0.153,9.96
7,2019-02-28 12:20:20.331,1.225,-0.153,9.96
8,2019-02-28 12:20:20.431,0.919,-0.306,9.5
9,2019-02-28 12:20:20.531,0.919,0.459,9.807
10,2019-02-28 12:20:20.631,1.225,0.153,10.113
11,2019-02-28 12:20:20.731,1.379,-1.992,10.113
12,2019-02-28 12:20:20.831,1.838,-0.306,9.653
13,2019-02-28 12:20:20.931,0.153,0.766,10.113
14,2019-02-28 12:20:21.032,0.459,1.532,10.266
15,2019-02-28 12:20:21.133,1.072,0.0,9.96
I just got getting message:
No Data Available
What is wrong? I don't find any example in internet with csv loading via this library
Or something know how graph chart from csv via general D3 with simple example?
d3plus seems to be using v3.5.15 of d3.js. Regardless of that, you will need to tell d3plus of how to load the data. Reading the API documentation it seems you will have to load the data using
d3plus.dataLoad(path, [formatter], [key], [callback]) as explained here.
Alternatively, you can use d3.js to parse your csv file and pass it as the data. To do this you can use the
d3.csv.parse(string[, accessor]) as provided in the d3.js CSV API.
Keep in mind in both cases you will need to format your timestamps in the correct time format (For d3.js Time Format API doc), for you to be able to use the time scales. Also at least for d3.js when the data is parsed from CSV all values are string values and hence you will need to change the type of the values using an type conversion function. You can read more about this in a great guide on how to read data by Learnjsdata (d3.js v3, or d3.js v5)
There are several examples out there for d3.js v3 on importing the data for processing which may be a better option overall. Also consider d3plus has not got a github commit in over a year so the library may not be well supported.
I hope this helps and at least gives you a start. If you need more help please leave a comment below.
I created a webcrawler which crawls a website and stores the data into mysql. Next, I would like to visualise the amount of the single response codes of the crawled websites using a pie chart. I decided to use d3.js but I don't know how to visualise the total values of the response codes. For example if I have the following data stored in a json file:
{"crawl":[
{"url":"http:/www.example.com", "responseCode":"200"},
{"url":"http:/www.example.com/page1", "responseCode":"200"},
{"url":"http:/www.example.com/page2", "responseCode":"301"}
{"url":"http:/www.example.com/page3", "responseCode":"200"},
{"url":"http:/www.example.com/page4", "responseCode":"404"},
]}
is it possible to visualise how many websites returned a 200, how many returned 301 etc.? So in this case I would like to create a pie chart with the values
200 = 3
301 = 1
404 = 1
Is this possible without having the absolute values?
The brushing on my D3.js parallel coordinates stopped working when I switched from loading the json data from a file to preloading it with jquery. I did this so that I could apply some filters to the data prior to loading it into the parallel coordinates.
The parallel coordinates are still rendering, but I am not unable to use brushing. When I do, it returns a blank result (nothing is selected).
I create the parallel coordinates here:
var pc = d3.parcoords({
dimensionTitles: {
nplay_video: "video plays",
final_cc_cname_DI: "country",
LoE_DI: "education level",
nevents: "# of events",
nforum_posts: "# of forums posts",
nchapters: "# of chapters",
ndays_act: "# days active"
}
})('#example')
And load the data
function refreshCoordinates(data){
// generate the parallel-coordinates
pc.data(data)
.ticks(4)
.mode("queue")
.color(color)
.composite("darker")
.alpha(0.15)
.render()
.dimensions(['LoE_DI','ndays_act', 'nchapters', 'nplay_video', 'nevents', 'nforum_posts', 'grade', 'certified'])
.createAxes()
.brushMode("1D-axes")
.interactive()
.reorderable();
}
The data is loaded, filtered using jquery, and updated when the user selects different attributes. Everything but the brushing seems to be working fine. I'm pretty new to D3.js so hopefully I'm just making a silly mistake. Thanks!
EDIT: If I load from a json file, then the brushing works. When I update the data I call a function to...
pc.data(data).render().updateAxes();
This is when the parallel coordinates stop being able to be brushed.
Is it possible to retrieve data from an svg via d3?
I have following scenario:
on page Resize I need to update the widths of an svg which was generated on a server via d3 . So for example the x-axis. However the client side d3 library has no knowledge of the svg. I noticed that with each DOM object there is a __ chart__ object. Is there some way i can access the range and domain for example and update them accordingly?
When you create an SVG on the server and transfer it to the client, only the actual SVG DOM gets transferred, not any javascript objects or properties (such as the d3 __data__ property) that you used in creating it.
So in order to attach data to the SVG elements that actually gets passed with the file, you would need to create an attribute of that element that contains the data. Then you can select the element client side and parse the data attribute.
Example:
/*** Server Side ***/
/* if `bars` is a d3 selection of rectangles in a bar graph */
bars.attr("data-name", function(d){return d.name;})
.attr("data-value", function(d) {return d.value;});
/*** Client Side ***/
var bars = d3.selectAll("rect.bar")
.datum(function(){
return {
name: this.getAttribute("data-name"),
value: this.getAttribute("data-value")
}
})
.on("click", function(d,i){
/* do something with the data */
});
That works if the data in question is simply a few numbers or names that you want to use in tooltips or similar interaction. It doesn't work for a complex object like a chart function. If you're need to redraw/resize the chart client-side, I really don't see any performance benefit in trying to draw the graphs server-side.
You can create server scripts to parse all your data into a ready-to-use format, maybe even run the d3 layout functions to create a ready-to-draw JSON array. But then draw the graph client-side.
I am trying to transition between two GeoJSON objects, but have been unable to find any information on how to include more than one GeoJSON file. I am happy with the final transformation, but cannot find anything on multiple GeoJSON files.
I can currently plot one map like so:
d3.json("goldatt2.json", function (data) {
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var path = d3.geo.path().projection(d3.geo.equirectangular());
var areas = group.append("path")
.attr("d", path)
How would I change this so that two GeoJSON files are called and can be transformed?
I found this example, http://bl.ocks.org/mbostock/3081153 but in this example there is only GeoJSON object that is then transformed to a circle.
Getting the Data is separate task with respect to transforming it.
So you could, in theory, have multiple ajax calls to fetch the data you need before you decide to do whatever with that data.
Mike Bostock has a Queue implementation for this purpose.
If you are using JQuery with D3, you could look into Deferred an example of which is posted here.
Once you have the data-sets that you need, you can now decide how you want to transform the data or provide transitions between them.
Pseudo-code:
var files = ["file1.json", "file2.json"];
//Fetch Data for both files and create a data set object of this format
var dataset = {
"file1.json": {/*geojson data for file1*/},
"file2.json": {/*geojson data for file2*/}
}
for(var item in dataset) {
var data = dataset[item];
//Do whatever transformation you need
}