Murray (2017) suggests the following code for loading a csv file and parsing columns usign D3.js V4. This code no longer works in V5. How can it be restructured in order to work? Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Line chart</title>
<script type="text/javascript" src="/../../d3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var dataset;
//Function for converting CSV values from strings to Dates and numbers
var rowConverter = function(d) {
return {
date: new Date(+d.year, (+d.month - 1)), //Make a new Date object for each year + month
average: parseFloat(d.average) //Convert from string to float
};
}
//Load in data
d3.csv("mauna_loa_co2_monthly_averages.csv", rowConverter, function(data) {
var dataset = data;
//Print data to console as table, for verification
console.table(dataset, ["date", "average"]);
}
For v5, d3-fetch is your friend as d3-request has been deprecated.
For instance:
d3.csv("/path/to/file.csv", rowConverter).then(function(data){ do whatever })
Related
I want to display reviews on a webpage but have trouble with JSON parsing and formatting. Any help is greatly appreciated. I can handle the HTML and CSS markup, I just need to loop through each new review and get the reviewer, reviewtext, pictureurl, etc.
So far, it's only able to get the amount of reviews. I'm new to JSON and am having trouble parsing the reviews and getting the format right.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/financial-sanity-now-los-angeles-2/reviews";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer API-KEY-GOES-HERE',
},
method: 'GET',
dataType: 'json',
success: function(data){
// Grab the results from the API JSON return
var totalresults = data.total;
// If our results are greater than 0, continue
if (totalresults > 0){
// Display a header on the page with the number of results
$('#results').append('<h5>We discovered ' + totalresults + ' reviews!</h5>');
// Itirate through the JSON array of 'reviews' which was returned by the API
$.each(data.reviews[id], function(id, review) {
// Store each review object in a variable
var id = review.id;
var reviewtext = reviews[id].text;
var reviewrating = reviews[id].rating;
// Append our result into our page
$('$results').append(reviewtext + reviewrating + reviews);
});
} else {
// If our results are 0; no reviews were returned by the JSON so we display on the page no results were found
$('#results').append('<h5>We discovered no results!</h5>');
}
}
});
</script>
</body>
</html>
Minor mistakes with the code, but it's fine; your each function was a bit messy and you accidentally used $results as a reference which should've been #results; but it's all good your getting it!
Check out the code below (note Yelp only allows 3 reviews to be fetched; so when you see 8 total; it won't fetch more than 3);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/financial-sanity-now-los-angeles-2/reviews";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer API-KEY-GOES-HERE',
},
method: 'GET',
dataType: 'json',
success: function(data){
// Grab the results from the API JSON return
var totalresults = data.total;
// If our results are greater than 0, continue
if (totalresults > 0){ console.log(data);
// Display a header on the page with the number of results
$('#results').append('<h5>We discovered ' + totalresults + ' reviews!</h5>');
// Itirate through the JSON array of 'reviews' which was returned by the API
$.each(data.reviews, function(i, item) {
// Store each review object in a variable
var author = item.user.name;
var reviewtext = item.text;
var reviewrating = item.rating;
// Append our result into our page
$('#results').append('Author: <b>' + author + '</b><br> Review: ' + reviewtext + '<br>Rating: ' + reviewrating + ' <hr>');
});
} else {
// If our results are 0; no reviews were returned by the JSON so we display on the page no results were found
$('#results').append('<h5>We discovered no results!</h5>');
}
}
});
</script>
</body>
</html>
being new to plotting chart with the external api data and lack of knowldge leads me to ask
HOw to plot a chart with coingeko charts api data? link to get json formated api data is:
https://api.coingecko.com/api/v3/coins/ethereum/market_chart?vs_currency=btc&days=30
i had used this sample code and replace the link however only empty chart gets populated without plotting any data points
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Rendering Chart with dataPoints from External JSON"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
$.getJSON("https://api.coingecko.com/api/v3/coins/mustangcoin/market_chart?vs_currency=btc&days=max&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart.render();
});
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
The API returns:
{
prices: Array,
market_caps: Array,
total_volumes: Array,
}
First you need to select which data you want, you cannot mix them up together.
Secondly, you should create chart new CanvasJS.Chart after you have received the JSON result (in the function() {} body, not before that. Right now, it is uncertain whether the chart is actually getting the updated dataPoints, or is aware about it being updated after you have created the chart.
If you want to update the chart after creation you need to do what their docs says: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/updating-chart-options/
I'm using my Ubuntu server to run automated speed tests and am recording the data in a csv file. I'd like to now plot all this data in a graph. The csv file is called data.csv in the same directory as index.html and it contains the following:
time,ping,down,up
1454190169992.8655,25.40,61.1,18.2
1454196940589.804,24.57,65.8,18.2
1454200093536.6118,26.39,66.8,18.2
1454235805528.2244,25.21,59.3,18.1
1454235966417.7297,25.01,59.4,18.2
1454236051628.0317,24.68,59.8,18.2
1454239827546.229,26.63,64.6,18.2
index.html currently looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="nv.d3.css" />
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="nv.d3.min.js"></script>
</head>
<body>
<svg id="chart" style="width:500; height:500;"></svg>
</body>
<script type="text/javascript">
d3.csv("data.csv", function(error, data){
console.log(data)
// create an empty object that nv is expecting
var exampleData = [
{
key: "totals",
values: []
}
];
// populate the empty object with your data
data.forEach(function (d){
d.value = +d.value
exampleData[0].values.push(d)
})
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
.x(function (d) { console.log(d); return d.time })
.y(function (d) { return d.ping })
d3.select('#chart')
.datum(exampleData)
.attr("id", function (d) { console.log(d); })
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
</html>
I have some trouble in visualization
I tried to make column chart for ph from my database
all the data is in json style and you can access under url
http://magnetic-tenure-93211.appspot.com//get_data/ph
My main reference is google chart document
https://developers.google.com/chart/interactive/docs/php_example
and I can only red box written "Table has no columns", not the chart. could you help me to solve this problem?
my client codes are following...
<html>
<head>
<!--Load the AJAX API-->
<meta charset="utf-8">
<link rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
console.log("1")
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
console.log("3")
function drawChart() {
console.log("2")
var jsonData = $.ajax({
url: "http://magnetic-tenure-93211.appspot.com//get_data/ph",
dataType:"json",
async: false
}).responseText;
console.log(jsonData)
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
</body>
</html>
and I use python Flask to make server and json return codes are following...
#app.route('/get_data/ph', methods=['GET'])
#crossdomain(origin="*", methods=['GET'])
def getPhData():
sensorData = SensorData.query.order_by(desc(SensorData.create_date)).all()
phData = [{
"cols":[ {"id":"", "label":"Topping", "type":"string"}, {"id":"", "label":"Slices", "type":"number"}],
"rows":[ {"c": [{"v":str(sd.create_date), "f":"null"}, {"v":sd.ph,"f":"null"}]} for sd in sensorData]
}]
return json.dumps(phData)
I'm trying to put a Google map in my page and make it so that when the page loads the map will display exactly the location of the user. In order to do so, I've taken the google maps API code and inserted it into my HTML5 page. At first the browser did ask for permission to share my location but it isn't actually showing this location on the map; I've tried with two or more combinations of functions but it is still not working.... please, I need help! If anyone can tell me what is wrong with the code please do:
<html lang="en" manifest="halma.manifest">
<head>
<meta charset="utf-8">
<title>helmas</title>
<link rel="stylesheet" type="text/css" href="css2.css">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAycdS3aS7dItIegOaJzT2RBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiGkO1l1KdZvNzo-8b-o7M21o4UA"></script>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<<body onload="loadMap()" onunload="GUnload()">
<article>
<div id="map" style="width:100%;height:800px;"></div>
<script>
if (navigator.geolocation) {
// try to get the users location
}
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.watchPosition(showPositionOnMap, errorMessage,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 });
}
else {
alert("Geolocation is not supported by this browser");
}
var map = null;
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.2021, 0.1346 ), 12); // (sets the map centre to Cambridge UK)
map.setUIToDefault();
}
function showPositionOnMap(position) {
var geoCoords = new GLatLng(position.coords.latitude, position.coords.longitude);
map.addOverlay(new GMarker(geoCoords));
}
function errorMessage(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
</script>
Perhaps the sensor parameter in the maps invocation needs to be set to "true" - at the moment you have it set to "false". So your script tag should contain this url
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAycdS3aS7dItIegOaJzT2RBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiGkO1l1KdZvNzo-8b-o7M21o4UA"></script>
For more info:
Google Maps Api sensor location