Learn how to efficiently import data into d3.js from several JavaScript arrays, and create a dynamically updating chart without the need to refresh the page

I currently have two arrays: one is a list of numbers called nums, and the other is a list of strings titled places.

For example:

nums=[1,2,3,4,5]

places = ["house","gym", "work", "school", "park"] 

Both arrays are the same length.

I am looking to create a bar chart using these arrays that resembles the one found at http://bl.ocks.org/mbostock/3885304, but with data sourced from these arrays instead of a tsv file.

In Mike Bostock's code, the data is read in from a tsv file using the following code snippet:

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

Furthermore, I will be receiving updates from a server where some bars will change while others remain constant. Instead of refreshing the page, I aim to update only the changing bars. Would it be advisable to use a library like React for this project, or do you have any other recommendations? Any assistance would be greatly appreciated. Thank you!

Answer №1

To incorporate Mike Bostock's code, start by creating an array named data with properties num and place:

var data=[]; 
for(var i=0; i<nums.length; i++){
var obj = {num: nums[i], place: places[i]};
data.push(obj);
}

You can then eliminate the d3.tsv call. Remember to update references from d.letter and d.frequency to d.place and d.num in Mike's code.

In your javascript, set up a listener for the event indicating when the data is updated, triggering your chart plotting function accordingly.

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

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Recently, I decided to dive into Vue.js as a way to revamp an existing frontend app that was originally built using Scala Play. My goal is to explore the world of component-based web design and enhance my skills in this area. Initially, everything seemed ...

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

You can click on the link within the Leaflet Popup to trigger JavaScript functionality

My leaflet map is functioning with GeoJSON polygons and popups attached to each one. These popups display information about the polygon. I want a link inside the popup that, when clicked, triggers a JavaScript function to retrieve and display smaller polyg ...

Prevent repetitive content on your Node.js server

After realizing my small image hosting has many duplicate content, I am looking for a solution to prevent this issue in the future. My idea is to use either checksum or hash code so that whenever a new file is uploaded, it will be hashed and compared with ...

The term 'EmployeeContext' is being utilized as a namespace in this scenario, although it actually pertains to a type.ts(2702)

<EmployeeContext.Provider> value={addEmployee, DefaultData, sortedEmployees, deleteEmployee, updateEmployee} {props.children}; </EmployeeContext.Provider> I am currently facing an issue mentioned in the title. Could anyone lend a hand? ...

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

Unveiling concealed content with JQuery

Here is a link to my pen: http://codepen.io/anon/pen/IszKj I am looking to achieve the functionality where clicking on either "any status" or "any date" will reveal a hidden div containing a list of options. My main query is about the best approach to ta ...

Are you experiencing difficulty loading ng-view in AngularJs?

I am new to AngularJs. I am currently using a wamp server and have successfully loaded the HTML page, but unfortunately the view is not being displayed. I have added ng-app to the body as well, but still unable to load the view. <!DOCTYPE html> ...

Refreshing Bootstrap table data after an AJAX post request

I have implemented a bootstrap table to display rows from a database in MVC ASP.NET. The data is stored in a ViewBag and then returned with the ViewBag included as data to be displayed. Here is an example of how it looks: <div class="row rpad"> ...

The Bootstrap alert refuses to close when the close button is clicked

I'm attempting to utilize a Bootstrap alert for displaying a warning. The alert automatically fades and dismisses after a period of time, but I want to provide the user with the option to manually close it. I've included jQuery and js/bootstrap.m ...

Accessing a Child Component Function in Material UI

Utilizing the Material UI framework, I am constructing an application with React. Included in this application is a Dialog feature that permits users to modify various information about an object (referencing the code below). The dialog consists of two but ...

Speedy method for declaring array elements incrementally - Java

Assume I have 10 integer variables, named x1 to x10. Defined below is an integer array: Int[] countup = new Int[10]; I wish to assign values to the array elements in the following manner: countup[0] = x1; countup[1] = x1 + x2; countup[2] = x1 + x2 + x3 ...

Ways to transfer variables between JavaScript files using a deferred function

I am encountering an issue while trying to retrieve a json object from another JS file. It appears to be a timing problem as the setTimeout function I added runs twice; first with the object correctly populated, and then again with the object becoming unde ...

The default choice vanishes once a non-empty option is chosen

Here is a simple example illustrating my issue: JSFiddle. Initially, I have an empty/default option, but when I select something else from the drop-down, this default option disappears. How can I keep this default option visible after making a selection? ...

What is the process of comparing one regular expression against another in JavaScript?

I'm looking to check for matches between two regular expressions. To achieve this, I use the .test method on each one. If either of them returns true, I consider them a match. const regexify = (str) => new RegExp( '^' + str ...

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

I have successfully implemented RowGroup to store 3 different tables, which is working great. However, I am facing an issue with the onRowSelect function not functioning properly. When I click on any row of the RowGroup tables, nothing happens. On another ...

Generate a JSON object specifically for the modified input fields upon submitting the form

Is there a way to generate a JSON object only with the input fields that have been modified before submitting the form? How can I capture and store each changed value in the form as JSON data? $(document).ready(function() { $('#save').clic ...

Tool tips not displaying when the mouse is moved or hovered over

I have customized the code below to create a multi-line chart with tooltips and make the x-axis ordinal. However, the tooltips are not displaying when I hover over the data points, and I want to show the tooltips only for the data in the variable. https:/ ...

Numerous JSON entities

Curious to know if it's achievable to load more than one JSON file with just a single jQuery.ajax() call. Or do I have to make separate calls for each file? Warm regards, Smccullough ...