Get list of selected items in parallel coordinates graph - javascript

I saw this beautiful example of a parallel coordinate graph and implemented it for my own data visualization webservice: http://bl.ocks.org/mbostock/7586334
However, I need to get a list of the selected items and show it to the user. Like in this example if you brush for 4 cylinder cars only, I want to have a list of all car names that are now painted in the foreground.
I thought about a jquery selector on g.foreground path and query for all displayed items.
but then I need to code the information in the element.
Or is there even a d3.js built-in for that kind of functionality?

Related

Make points on radar charts clickable and access data associated with the indicators. (Echarts)

The points on the radar charts are clickable but wherever we click on the complete one spiral returns the same data. I want to make points separately clickable and get the data with respect to the indicators.
Specifically, I want to make red highlighted point and get the data associated with indicator 5.
I am using echarts for it.
https://echarts.apache.org/examples/en/editor.html?c=radar
I tried click events handling on charts and log the data wherever we click. It returns the same data associated with a complete one spiral but I expect to get separate data associated with the indicator.

How to highlight a portion of Google Bar Charts determined by category filter?

I'm wanting to replicate a bar chart done in Power BI using google charts, and one of the features I am attempting to implement is this filter effect as shown by the two pictures I've attached a link to.
Bar Chart Before Filtering
Bar Chart After Filtering
I can add example data in a reply if necessary, but the concept is that the bar chart before shows 100% of data made up of sub categories, and on selecting a category from a drop down menu, the percentage coming from that sub category is highlighted while the rest is made transparent. I've searched through the Google Charts documentation and previous questions however I haven't found any information on how to implement this or if this effect is even possible. The controls included in the API seem to only be able to redraw the chart entirely, not keep the chart and highlight the portion filtered.
I've considered having two charts overlaid on top of each other, with the chart on top changing based on the user category selection and the chart on bottom remaining static, however, I'm not sure if that implementation is optimal or possible. Ideally, I would also be able to replicate this effect on other categorical based charts, such as a pie chart. I'm wondering if anyone has any ideas on a workaround in order to create a similar effect, or some input on whether this effect is even possible using the google charts API and JavaScript/HTML/CSS.

Making SVG file interactive in D3.js

I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important

Shield UI Pie chart hierarchical functionality

I have a question regarding ShieldUI pie chart. What I need is to provide following functionality on a web page. Initially a pie chart will represent some data. When user clicks on a slice
I need that slice’s compound data to be broken down taking up the whole chart. Let’s give an example with sales volumes. Initially we have the sales volumes for all the four quarters of the year. Than the user clicks on the first quarter slice. And it divides into let’s say months, or weeks. All that data I need to take up the whole chart. In other words in need some sort of multi dimensional data zooming.
I searched for some sort of hierarchical pie charts, but what they do is to show all the data a once, which is not quite I really need.
Looking at what you need it might be not the chart itself, but the relation of multiple charts that provide the functionality you want.
You may take a look at this answer:
Linking graphs of two Shield UI Charts
The number of related and subordinate charts will be equal to the data depth you have. For instance if you have 3 levels- quarters, weeks and days, you will have 3 related chart. The users will first click on the quarter slice, than on the week.
You could even more fully match the functional behavior needed by using one container for rendering all the charts to. There is however one disadvantage that you will need a button or a link to provide users the possibility to return to the top level.

NVD3 Line Chart with View Finder

Anyone know if there is a way to hide the view finder, while still having the chart display a subset of the data? If I filter the data before sending it to the chart, the chart lines are skewed instead of contiguous.
I'm trying to filter on a date range subset of the data, while keeping the lines contiguous with the entire set of data.
I noticed in the source, on line 362, they filter on !d.disabled. I'm wondering if I can hook into that somehow. Does anyone know the proper usage pattern for this?
The view finder is actually Square's Crossfilter found here [0] if you wanted to browse the source and view more documentation.
However, I would just set the display attribute to none in CSS of the svg containing the crossfilter and be done with it.
[0] http://square.github.io/crossfilter/

Categories

Resources