Link two D3 plots - javascript

I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.

D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367

Related

How to make map with overlaid column charts using highmaps

Highmaps provides a way to implement map with overlaid pie charts, is there a way to change pie with column?
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
The mappie series is not a part of Highcharts core. It is a custom series created with Highcharts.seriesType function (you can find it here: http://code.highcharts.com/highcharts.src.js) at the beginning of the demo. You can modify provided example and create series such as mapcolumn. Although, map is not very readable and tooltip does not work correctly when rendering columns instead of pies. You give it a try and create your own custom series.
Example:
http://jsfiddle.net/wsuhws7c/

Looking for JS chart library with interactive diagrams

In my project I work on a web app that shall provide interactive charts to the user. Interactive is meant in that way that the user can adjust single data points by dragging them around in chart.
More specifically, assume a line chart consisting of six data points. The user clicks one data point and drags it to different coordinates within the chart (drag and drop). Afterwards the line should be rendered again considering the adapted coordinates.
I had a look into Chart.js already but found that this feature is not provided out-of-the-box. I rather have to implement that myself.
Are you aware of any chart library for JS that provides such feature?
UPDATE
Meanwhile I found two potential solutions:
Plugin for Highcharts
Draggable charts of FusionCharts
You can take a look to D3.js, it's battery-included and drag&drop is supported too.
But you have to make the chart in HTML/CSS yourself.

How can I adjust the labels on a DC.js pie chart?

I have a DC.js pie chart with some really small values comparatively. I'm trying to adjust the labels so they aren't on the actual chart. I want them to be off preferably with lines drawn to the slices. (something like this http://www.telerik.com/help/aspnet-ajax/media/htmlchart-piechart-simple-example.png)
I'm can't find any examples of this with DC.js and the only thing close is this (Label outside arc (Pie chart) d3.js), with d3.js, but I'm a little confused as how to implement in dc.
Anything to point me in the right direction would be greatly appreciated.
I think currently you would have to suppress the built in titles with .renderTitle(false) and then implement the custom titles in a renderlet. You would reselect the slices and then apply pretty much the code in that other question. The data will already be attached to the slices.
The titles would appear a moment later, as that's how renderlets work, but perhaps that wouldn't be such a bad effect.
Of course, I haven't tried this, just a suggestion..

different symbols in a google charts scatter plot

I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com

Google Visualization API - Line and Scatter on one Chart

Does any one know if it is possible to use the Default Google Scatter Chart in the Google Visualizations Gallery to draw a scatter chart that has both a series with points only, a series with a line of best fit and on top of this a set of lines across the chart indicating limits. i.e. at +/- 20% etc.
The chart we need is actually a Control Chart with multiple series and individual formatting of each series displayed on the chart. i.e some series with only points other series with a line of best fit.
Does any one know of a Control Chart that has already been done using the Google Visualization API?
After working with the google visualization api for a while and searching the web I would have to say that the answer here is no.
You would have to build your own custom chart and from working with the api for a while I would rather do this with another charting library like jqPlot.
You can make separate line sets in the google scatterchart. The examples are on the scatterchart page.
http://code.google.com/apis/chart/docs/gallery/scatter_charts.html

Categories

Resources