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?

javascriptd3.jsdimensions

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Emberjs 1.0: Data Changes don't Refresh Computed Property and Template

In my Ember.js application, I am using a datepicker which is integrated for selecting dates. When a date is clicked on the datepicker, a computed property should compare the selected date with the dates available in the timeslot to check for a match. Based ...

javascriptember.jshandlebars.jsember-router

Organizing and managing one-on-one table tennis matches using a customized data structure. Leveraging the power of Vue, JavaScript, and

Seeking advice on the best approach for storing table tennis match data in a web application. I currently have a method in place that works, but I'm open to suggestions for improvement. Here is my current idea: matches: [ { id: 1 datePlayed ...

javascriptfirebasevue.js

What is the best way to include JSON values for specific keys using JavaScript, jQuery, or AngularJS?

Below is a sample of the json: var json = var data = [{ "a": 150 }, { "a": 50 }, { "b": 100 }, { "b": 25 }]; I aim to combine the values of "a" and "b" in a new finaljson(the desired output json), like so: var finaljson = [{ "a": 200 ...

javascriptjqueryangularjsjson

Delete JavaScript functions and events from memory once the JavaScript code has been removed from the HTML file

I am encountering a situation with my website where popups loaded via ajax also load JavaScript code, which I want to remove when the popup is closed. The main site code looks like this: <body> ... <div id="popup" style="display:none"> < ...

javascriptjquerygarbage-collection

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

I am having trouble implementing the TripAdvisor widget on my website. It functions correctly when the page is refreshed, but it does not appear when navigating through links. Additionally, an error message is displayed stating that the document could not ...

javascripthtmlangularjs

In a multi-user environment, querying FaunaDB may not always retrieve the most up-to-date results

Background I've been delving into FaunaDB alongside React and managed to create some code with inspiration from this article. The project I'm working on involves a coffee poll/counter app - users are presented with various types of coffee and ca ...

javascriptreactjsmaterial-uifaunadb

Optimal Strategies for Handling CSRF Tokens with AJAX Requests in Laravel 9 and Beyond

When working with Laravel 9+, it is crucial to expose CSRF tokens for AJAX requests in order to maintain security measures. However, the placement of these tokens can impact code organization and elegance. There are two main approaches: Approach 1: Direct ...

javascriptphpajaxlaravel

Navigating through Objects in Angular 9

I am facing a challenge in Angular 9/Typescript while trying to iterate through the object response from my JSON data. Despite searching for solutions, I haven't found any that work for me. In my JSON, there is a section called "details" which contain ...

javascriptangulartypescriptoopobject

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

Implementing dynamic active class changes in a navbar with JavaScript

My goal was to have the navbar change its class to 'active' dynamically when a user clicks on the <li> tag. Can you help me pinpoint where I made a mistake? dynamicNavbar(); function dynamicNavbar() { $('.nav_w3ls .menu a'). ...

javascriptjquery

Custom AngularJS menu directive using a JSON file to generate submenus

As a newcomer to angularJs, I am looking to create a dynamic menu with submenus using a .json file. It's important for me to be able to easily add new menus and submenus through the same .json document. <a href="#" ng-repeat="item in menuHeader"&g ...

javascriptangularjsjsonangular-directive

Which symbol is preferable to use in JS imports for Vue.js/Nuxt.js - the @ symbol or the ~ symbol?

I am seeking guidance on a matter that I have not been able to find a clear answer to. Webapck typically uses the ~ symbol as an alias for the root directory. However, I have noticed that some developers use the @ symbol when importing modules using ES6 s ...

javascriptvue.jswebpacknuxt.js

How do I show a variable within my react-native render function?

I attempted to showcase information fetched by a function in my React Native rendering application. Even though I successfully retrieved the data, I am encountering issues when trying to display it on the app. This is the snippet of my code: import Reac ...

javascriptreactjsreact-native

What is the best way to retrieve data from Firebase and then navigate to a different page?

I am facing an issue with my app where I have a function that retrieves data from Firebase. However, after the completion of this Firebase function, I need to redirect it to another page. The problem is that when I press the button, the redirection happe ...

javascriptjqueryfirebase

Run the *.js file only when the current month is December

Alright, I'm stumped. I've been trying to create this script: <script> $(document).ready(function(){ var d = new Date(); n = d.getMonth(); if (n == 11) { src="extrafiles/effect/snow.js"; } }); </script& ...

javascript

What is the technique to make a *ngFor render items in a random order?

I'm working on creating an application that needs to display elements in a random order. However, due to restrictions within the application, I am unable to modify the ngFor directive. How can I achieve displaying ngFor content randomly? ...

javascriptangular

Prevent the reloading of the page by utilizing Ajax technology when submitting a form in Laravel

I'm facing a challenge with processing a form submit using ajax instead of Laravel to prevent page reloads. Unfortunately, it's not working as expected and I'm struggling to figure out the issue. Despite researching numerous examples online, ...

javascriptphpjqueryajaxlaravel-4

Oops! There seems to be an error with the <path> attribute. It looks like we were expecting a number, but received something different: "

I'm currently working on creating a basic line graph using d3.js and integrating it into a React component. However, I'm encountering this error: Error: <path> attribute d: Expected number, "MNaN,36.393574100…" Unfortunately, the similar ...

javascriptreactjsapid3.jsaxios

Storing a single JavaScript array in separate arrays depending on a specific condition

I have a JavaScript array variable where each element is an object with values like: {"ID":10075,"SPECIALIZATIONID":"17","PRESPCIALIZATIONID":11,"GROUPID":1} The entire JSON.stringify value looks like this: "[{"ID":10075,"SPECIALIZATIONID":"17","PRESP ...

javascriptjqueryjson

Performance issues with Datatables server side processing

Utilizing Datatables server-side processing with PHP, JQuery, Ajax, and SQL Server database, I encountered slow performance in features such as pagination and search. Despite working with moderate data, there is a delay of over 40 seconds when using the se ...

javascriptphpjqueryajaxdatatables