I am currently exploring the use of d3.js to visualize data that is stored within the sparkfun cloud, which is an IoT cloud platform. I came across an example that utilizes Google Chart for visualizing data from sparkfun cloud by using a specific script:
<!DOCTYPE html>
<html>
<head>
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<!-- EXAMPLE SCRIPT -->
<script>
// onload callback
function drawChart() {
var public_key = 'dZ4EVmE8yGCRGx5XRX1W';
// JSONP request
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temp');
data.addColumn('number', 'Wind Speed MPH');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.tempf),
parseFloat(row.windspeedmph)
]);
});
var chart = new google.visualization.LineChart($('#chart').get(0));
chart.draw(data, {
title: 'Wimp Weather Station'
});
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width: 100%;"></div>
</body>
</html>
Instead of utilizing Google Chart, I wish to utilize d3.js for plotting the data as it offers greater flexibility. However, I encountered difficulties with the implementation and attempted to extract data from the website using d3.js json extractor, based on information from related questions (1, 2):
var data1;
var url = "https://data.sparkfun.com/output/dZ4EVmE8yGCRGx5XRX1W.json"
d3.json(url, function (json) {
if (error) return console.warn(error);
//data1 = json;
data1=json;
consol.log(data1)
//code here
})
Unfortunately, this approach did not yield the desired results. As I am relatively new to d3.js and JavaScript, I believe there may be key pieces of information missing in my implementation. Any guidance or directions on how to proceed would be greatly appreciated. Thank you!