I just finished watching the documentation video on archive.org a couple times and thought a great use case would be offering a text filter that would apply a data visualisation within a node and applied to one of the available d3 libraries.

For example, something like:

<d3.libraryname>{json.data.options}</d3>

Comments

jriddiough@gmail.com’s picture

I'm still exploring the details of how the filters are applied in conjunction with the charts. It seems like this is entirely possible and could be a way to bridge a usability gap that I perceive.

Current problem: The person that knows D3 is going to have the responsibility through the full workflow - from configuration to display. The Views integration solves this for views based solutions, though even that will require a fair bit of Drupal configuration access and knowhow.

Proposed: This would help to make a publishing workflow available. If the D3 & Drupal expert had the specifications, a D3 Library could be provided that can be picked up by data curators and publishers (in the case that such a team has specialists) Library author publishers could create libraries that are a step closer to plug and play.

It probably isn't something you would want to do for a massive dataset - but for many use cases this would be great.

It could be extended to have something like:

[d3code]{libraryname: d3_example_pie, data-source: json('url')}[/d3code]
[d3code]{libraryname: d3_example_pie, data-source: custom_data_function()}[/d3code]

This is a slightly/barely working example:

/**
 * @file
 * D3 Filter module file.
 */

/**
 * Implements hook_filter_info().
 */
function d3filter_filter_info() {
  $filters = array();
  $filters['d3'] = array(
    'title' => t('Embed a d3 graph'),
    'process callback' => 'callback_d3filter_process',
  );
  return $filters;
}

function callback_d3filter_process($text, $filter, $format, $langcode, $cache, $cache_id) {
 //
 $text = preg_replace('|\[d3code\](.+?)\[/d3code\]|se', "'$1'", $text);
 // Inserts d3_example_bar
 $text = str_ireplace('d3test-data', d3_example_bar(), $text);
  return $text;
}

I'm not going to put too much effort in right now, because I know there is supposed to be a patch coming out very soon. Once the new code is out - I may work on things in this direction further.

asherry’s picture

This is something I've been thinking about in the background, it could be one solution. I was thinking about also using the visualization module to turn a particular visualization into an entity, and then maybe you can use a field or entity reference to embed from within a node.
Your solution is a little like tokens, that seems like another great idea.

I guess this just brings up the question of data sources though. There is still going to be a great deal of difficulty getting the end user to understand the necessary field requirements of a particular library, and how those are going to work with whatever data source they are trying to use. With the views patch coming out there is at least a few ways the end user can see what is needed, I'm not so sure with this method or something with entities.

Thoughts?

jriddiough@gmail.com’s picture

StatusFileSize
new508.48 KB

It seems like embeding a graph into the node either way still brings up the question of informing the end user of the field requirements. I am not so familiar with the Visualization module so if that is a good option, I'm just not familiar with how it works currently.

In hook_filter_info, there is a 'tips callback': The name of a function that returns end-user-facing filter usage guidelines for the filter. See callback_filter_tips() for details.

Perhaps each D3 library could also have a documentation / implementation file. The tips callback could be somthing like: "Embed a D3 Chart with [your data]. Find acceptable data formats and paremeters for enabled D3 Charts here"

quick demonstration example

You might be able to see why I like this solution from the image. The person writing an article already has access to input mathmatical formulas and code snippits. The last piece would be finding a way to permit graphing and charts. They could use rendered images or embed some third party widget, though this (D3 implementation) could be better.

The tip callback would point to the aggregated documentation from the various libraries. That would require some additional coding to organize and render, though it might not be too bad.

jriddiough@gmail.com’s picture

StatusFileSize
new52.7 KB

Attached a mockup of what the aggregated documentation could look like. Working with the 'examples' that are already available. It is still a little bit complicated to ask people to provide the JSON and read into the code. At the same time, this follows a pattern that is similar to how many jQuery libraries work and are documented.

jelo’s picture

I think this is an excellent idea, actually almost what I am looking for. I build sites with panels and I was hoping someone would be interested in building a panels integration. That way it could be completely separated, although it leaves the issue of the front-end builder needing to ensure that the data is delivered in the right format for the library.

If we were to create a custom pane with the configuration options:
- library to use: essentially a list of all available D3 library options
- data source: could be a entity field, json feed or custom text (formatted array)
this would allow placement of the pane anywhere in the site plus the ability to configure the visualization.

asherry’s picture

Category: Feature request » Plan

Sorry it took so long to respond to this. I'm not sure if either of you can still bring this to fruition but I do like the ideas.

I think of both these as very much related, embedding visualizations in content. The difficulty I've had in figuring something out is the actual method of specifying the data source.

- A url: I think this is a good feature, though not necessarily going to work in every case
- A custom function: a little dangerous as this is now content that is mixed with code. Maybe 'possible' but I wouldn't want to make this a main feature.

I'd also like to see references to other 'visualization entities'. I think this is where I've been stuck. The visualization module does do quite a bit, but at the moment there isn't really any integration between this module and that one.