I have some code which generates an array; at each index there is an array with an x and y coordinate. I wanted to plot the points as a graph using d3.js, but am not sure how to go about that.
I have looked at the site and the examples but have found nothing that would help me with this task. This link here is an example of the type of graph I am trying to create, except I want to be able to create multiple graphs on one grid.
I basically need some guidance on how to get started, because I am completely lost. Any help would be appreciated.
This might better be a comment but I don't have comment access. First of all what is the name of the type of graph you link to in your question? It's not your basic pie or bar graph.
If you want multiple sets of data on one graph, what type of graph do you want? I can't visualize what you are trying to do so I don't know how best to help. Here is a good list of tutorials that link out to examples of how to use D3.
Related
I am extremely new to D3 so please bear with me. I've tried to consult lots of tutorials but think I just need a bit of help to get my head around this.
So I am trying to visualise the impact of COVID on sectors in geographical areas. The information is found in a JSON file which is mapped to a variable `covid'. You can select the county you wish to visualise by doing 'covid.data.____', so to select Aberdeen I have done
const aberdeen = covid.data.Aberdeenshire;
The data (from console.log(aberdeen) looks like:
As you can see there are both positive and negative values for the sectors. I want to plot a bar chart which looks something like this, but obviously modified so that the axes only go from +100% to -100% (image from https://bl.ocks.org/gurjeet/83189e2931d053187eab52887a870c5e):
The issue is that the example code is using a JSON file, but I want to be able to plot the data from the JSON object as shown. Please can someone help? I've been going round in circles with this one :( Thank you in advance
I want to create a better visualization than the one you can see in the image:
Currently, this is a HTML page with spans as rectangles. Of course I got follow this way to get a more dynamic presentation of the data. But I'm curious, if this can be done with D3.js in a better way.
Is there a chart/visualization type that can be used to achieve this?
I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that
I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows
Goal:
Visualize data that Y is amount of quantity and for the X is the date.
Problem:
Do you have a recommended data visualization tool for jquery?
The request is to enable to click on the colored block and you will retrieve a tooltip or something about amount of .....
and a list that should be displayed below the graph.
Do you know any data visualization that you can recommend me?
A concrete example that fit to the criteria is the Stackoverflow's graph.
Thanks!
Try Highcharts. If you are looking for simple to use, this is probably your best bet. If you are looking for more customization, I recommend you take a look at d3.
I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.