Exploring the functionality of dimensions in d3 parcoords

Question

Exploring the functionality of dimensions in d3 parcoords

I am diving into the world of d3 and experimenting with

Behold, a simplistic example directly from the website.

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>

<script>
var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .createAxes();
</script>

I've been playing around with hiding specific dimensions using # parcoords.dimensions(dimensions). Anyone have an elegant solution for this?

javascript d3.js dimensions

Answer 1

Answer №1

Upon reviewing the fiddle that Gerrat had created, it appears that the manipulation of dimensions did not yield the expected results. The names of dimensions were eliminated in the fiddle, yet the connections between them still depict the original data. This behavior strikes me as peculiar and may indicate a potential bug.

In response to this, I have crafted a new fiddle that applies pre-filters to the data:

data.forEach(function(e, j) {
    var temp = {};
    filteredDimensions.forEach(function(d, i) {
        temp[d] = e[d];
    })
    filteredData.push(temp);
})

You can access the functioning fiddle here

Answer 2

Upon reviewing the fiddle that Gerrat had created, it appears that the manipulation of dimensions did not yield the expected results. The names of dimensions were eliminated in the fiddle, yet the connections between them still depict the original data. This behavior strikes me as peculiar and may indicate a potential bug.

In response to this, I have crafted a new fiddle that applies pre-filters to the data:

data.forEach(function(e, j) {
    var temp = {};
    filteredDimensions.forEach(function(d, i) {
        temp[d] = e[d];
    })
    filteredData.push(temp);
})

You can access the functioning fiddle here

Answer 3

Answer №2

To incorporate the .dimensions() call, simply place it after .ticks(), but before .createAxes():

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .dimensions([1,2,4])
  .render()
  .createAxes();

You can view a working example on Jsfiddle here

User1614080's approach involves filtering the data in advance, an alternative method that may be simpler and more accessible than your original request. Utilizing his technique with dimension names (check out the jsFiddle here) yielded successful results as well.

The positioning of dimensions post .render() is key for proper display, though the exact reason eludes me.

EDIT: Upon further investigation, I realized the importance of calling .render() after updating dimensions (referenced briefly here). Both examples have been amended to resolve any inconsistencies in axis alignment.

Answer 4

To incorporate the .dimensions() call, simply place it after .ticks(), but before .createAxes():

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .dimensions([1,2,4])
  .render()
  .createAxes();

You can view a working example on Jsfiddle here

User1614080's approach involves filtering the data in advance, an alternative method that may be simpler and more accessible than your original request. Utilizing his technique with dimension names (check out the jsFiddle here) yielded successful results as well.

The positioning of dimensions post .render() is key for proper display, though the exact reason eludes me.

EDIT: Upon further investigation, I realized the importance of calling .render() after updating dimensions (referenced briefly here). Both examples have been amended to resolve any inconsistencies in axis alignment.

Exploring the functionality of dimensions in d3 parcoords

Answer №1

Answer №2

Similar questions

I am having difficulty in receiving accurate speech recognition through the microphone while using the Azure Speech to Text service in a

I keep encountering the issue "auth is not a function" every time I try to call my authentication function within a route

Value as a String inside an Object

Tips for invoking a controller method in HTML code

How to attach input to function invocation in Angular 2

The Chrome browser does not recognize Sys.WebForms

The boxslider plugin is malfunctioning when accessed in Sitecore's preview mode

Iterating through an object in Javascript using dynamically changing property names

Send a webhook post request without causing a redirection

Is there a way to retrieve the request object within loopback operational hooks?

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

Improving the efficiency of JSON data retrieval in JavaScript

Utilize a promise or await statement with a dynamically generated string variable

Express/axios fails to properly configure cookies and headers for response delivery

Is the latest Swiper JS version compatible with outdated web browsers?

How can I replicate the function of closing a tab or instance in a web browser using Protractor/Selenium?

The web server is serving an HTML file instead of the expected JSON response

JQGrid will automatically conceal any row that contains a false value in a given cell

not capable of outputting findings in a sequential manner

Passing a property to a click event handler in ES6 with React: What's the best approach?