How to input data in d3.js AreaChart And what need to code to achieve one chart and individual tootip info - charts

I am trying to implement D3.js charts and using nvd3.js examples for it, I want to show two data set in one area(Means Want to Draw Chart for Sum of Facebook and Twitter positive sentiments with respect to time, in one area chart with respect to time). And want to show one tooltip which shows indvidual contribution of facebook and twiiter and total, As you can see in Attached image. I have done only for facebook or twiter not for both in one chart.
Q: How to input data in d3.js AreaChart And what need to code to achieve these results.
Good Answer will be highly appreciated.
Thanks.
Expected Result Image.
http://hudld.com/tidylab/testing.html

Related

How to make google timeline chart with vertical orientation?

Google charts powerful and easy tool. I really like it. Unfortunately I didn't found the way to make it show timeline in vertical orientation. For example I need columns to represent weekdays and rows to represent time. May some one know if it is possible to do with google charts at all?
https://developers.google.com/chart/interactive/docs/gallery/timeline
I've tried to find for example option named "orientation":"vertical" but nothing like this.

Is there any library that supports this kind of drop-off chart?

I want to visualize applicant drop-off at different stages of the hiring process. Here is the perfect example of what I want to achieve.
It shows, in red color, the drop-off at every stage.
I know about the "Sankey Chart". That isn't a fit for this scenario. Does anyone know what this chart is called? And if any chart library supports this?
Thanks.

crossfilter | animate through date range

I've built a d3 world (heat)map. Each country has a fill colour corresponding to a value.
I want to improve the map by using crossfilter to allow users to see historic as well as current data. So far so good. But as well as all the funky features of crossfilter, I want the user to be able to press 'play' and see how the shading of countries changes over time.
Has anyone done this or do you know of native support for this that i'm missing? I can't find anything on it via google.
thanks
Emma
I haven't done exactly this, but the basic idea would be that after the user presses "play", you would want to programmatically change the filter on your Crossfilter date dimension over time and re-render your charts after each change. You'll probably want to use requestAnimationFrame (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to do this.

Highcharts or Fusioncharts,which one to select

I have used Highcharts for drawing different types of graphs and for simple charts like stack, column, bar, pie etc.
But when I searched for GANTT chart I realize that it is not available in Highcharts. In the mean time I came across FusionCharts, can anyone please explain me which one to use and why? I'm a beginner in this area.
im working with amcharts since few years and I needed to make the same decision in the past and I'm super happy that I've choosen Amcharts it's super easy to use and to integrate in projects , I can just recommend this one it's pretty flexible, I guess you can also simulate the GANT chart if you simply combine few bar charts together :)

Anyway to overcome the 5 custom icon urls per request?

From the Google Image API documentation
Static Maps service allows up to five unique custom icons per request. Note that each of these unique icons may be used multiple times within the static map
I have more than 5 custom icons per request, maybe up to 40.
Is there a way to overcome this? Is it possible to use sprites in static maps to overcome this?
Here's how I got around this:
You probably already know how, and depending on your source it's going to be different anyway, but collect up all your map data. Required bits are going to be: center point, zoom, map type, and output image size. I am going to assume sensor (if the application has access to GPS) is false. Also you are going to need all of your marker information which will include the icon you are going to use, and the geo coordinates of them.
I POSTed this all to the CF page that is going to make all the magic happen.
Map your first 5 points as normal. Get the results as a .png
Map your next 5 points but add "style=feature:all|visibility:off" to the query string, get result as a .png. This will give you a png with a transparent background but will have all of your marker icons on it. It will be the same size as your initial map, and the markers will be placed correctly withing that rectangle.
Watermark that image on top of your initial map. NOTE: this step is probably going to vary the most depending on your language of choice and what image manipulation features it offers.
Repeat 4 and 5 until you have all of your markers.
Write out you image with all of the markers now on it.
Serve up a link to that file instead of using the normal google link.
I have a more detailed explanation here with some code example in ColdFusion.