Parsing and Displaying JSON Data from a Python DataFrame in D3

Question

Parsing and Displaying JSON Data from a Python DataFrame in D3

Trying to create a stock chart, I encountered an issue with parsing the json file output by my python dataframe. The example code from http://bl.ocks.org/mbostock/3884955 does not seem to fit the format of my data:

The json looks like this:

var dataset = [{"1412121600000":{"Long":100.0,"Short":100.0,"Combined":100.0},
                "1412208000000":{"Long":100.7259540416,"Short":99.9845645596,"Combined":100.7105186013},
                "1412294400000":{"Long":100.4436402904,"Short":98.8837985253,"Combined":99.3194897889},
                "1412553600000":{"Long":100.4436402904,"Short":98.9995341224,"Combined":99.4357353278},
                "1412640000000":{"Long":99.5664445414,"Short":100.5277244418,"Combined":100.1022654968},
                "1412726400000":{"Long":101.6333965937,"Short":98.7695530192,"Combined":100.4296105442},
                "1412812800000":{"Long":101.8552090464,"Short":100.7284660335,"Combined":102.6406329748},
                "1412899200000":{"Long":101.5628181559,"Short":101.8782213959,"Combined":103.5175690128},
                "1413158400000":{"Long":100.6352059402,"Short":103.5518262499,"Combined":104.27263855},
                "1413244800000":{"Long":99.5664445414,"Short":103.3915337819,"Combined":103.0038388108},
                "1413331200000":{"Long":98.3464414352,"Short":104.0910952724,"Combined":102.4386550712}}];

I'm unsure how to format the key as the date and access the relevant node correctly. My attempts based on the provided example have been unsuccessful:

d3.json(dataset, function(error, data) {
    data.forEach(function(d) {
        ??
    });

javascript json d3.js

Answer 1

Answer №1

If you're looking to tidy up your data, I suggest starting with reformatting. Each point should follow this structure:

{"date":"1412121600000","values":["Long":100.0,"Short":100.0,"Combined" :100.0]}

Then, you can easily reference them using .date or .value. For instance, if "date" should be on the x-axis, you can use:

.attr('x',function(d){return d.date;})

and maybe utilize Date.parse() function.

Take a look at how Mike deals with it:

data.forEach(function(d) {
d.date = parseDate(d.date);
  });

var parseDate = d3.time.format("%Y%m%d").parse;

He has "date" as a column and accesses it accordingly. Using JSON, you can achieve similar organization.

Answer 2

If you're looking to tidy up your data, I suggest starting with reformatting. Each point should follow this structure:

{"date":"1412121600000","values":["Long":100.0,"Short":100.0,"Combined" :100.0]}

Then, you can easily reference them using .date or .value. For instance, if "date" should be on the x-axis, you can use:

.attr('x',function(d){return d.date;})

and maybe utilize Date.parse() function.

Take a look at how Mike deals with it:

data.forEach(function(d) {
d.date = parseDate(d.date);
  });

var parseDate = d3.time.format("%Y%m%d").parse;

He has "date" as a column and accesses it accordingly. Using JSON, you can achieve similar organization.

Parsing and Displaying JSON Data from a Python DataFrame in D3

Answer №1

Similar questions

Simplified jQuery function for multiple div mouseover operations

An Unexpected Token Leads to a SyntaxError in Jest's CSS-Modules

Retrieve information from various MongoDB collections

"Enhance Your Website with Slider Swipe Effects using CSS3 and

Tips for improving performance with ng-repeat directive?

Using TypeScript: Implementing array mapping with an ES6 Map

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

What are the best practices for implementing optional chaining in object data while using JavaScript?

What could be causing errors with my kick command?

OutOfBoundsException due to an invalid index value for the string length

Can you identify the nature of the argument(s) used in a styled-component?

Is there a way to display an alert using JavaScript that only appears once per day?

Google Maps API - Custom Label for Map Markers

Tips for effortlessly enlarging an element

Does TypeGraphQl have the capability to automatically format SQL queries?

Creating unique appbars for different sections on my sidebar in ReactJs

MVC - transforming a model into a JSON object

Improving JavaScript Functions: Minimize duplication of helper methods

Issue with Angular $compile directive failing to update DOM element

Getting PHP Post data into a jQuery ajax request can be achieved by using the `$_POST