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
Related
I'm working on a system to draw points in a picture, the user with a touch screen will draw points in the picture, these points are going to be stored in the database in a format like this:
The system is working pretty well, but I have a new challenge. I would like to show all the points per reference in my backend, interactively. I would like to ask you if someone knows a library to do the job?, my backend is sending it into the view a JSON with the points concerning. Just to add more details, one piece could have X quantity of problems and X quantity of points per problem. Qlikview provide a solution to this problem, but we are not able to use the service.
Thanks for your help.
You can use HTML5 Canvas to render picture and draw lines, points etc on it.
Documentation
Similar thread
Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
I've searched around and not finding a proper solution/explanation on how to get this right. Essentially what I'm trying to plot would resemble something of the following:
| #
|# #
|## ##
|______
fb tw
So essentially two categories, facebook (fb) and twitter (tw). Each category needs two bars for previous month and current month (they are counts). The data is retrieved from server side data.
What I need to know is how to get this chart to work using flot? Fiddle of what I have so far here: http://jsfiddle.net/thorne51/ExUH7/1/
I've tried using the orderBars plugin (as is apparent with the order property in the bars objects) with no success, not that I'm exactly sure what this does. Still very new to flot.
Edit
If anyone knows where decent documentation on flot and its plugins exist, or a tutorial, please share :)
You didn't have the Flot Orderbars plugin included in your fiddle. I included it and updated the fiddle: http://jsfiddle.net/ExUH7/4/
I would suggest you think about changing either the x-axis categories or the labels of your data, having them both be 'facebook' and 'twitter' leads to a confusing graph.
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.
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.