Skip to content

Instantly share code, notes, and snippets.

@eoiny

eoiny/d3_load_csv_json.html

Last active August 30, 2016 08:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eoiny/7f29ac5554e3290880fe1e025100b78f to your computer and use it in GitHub Desktop.
Save eoiny/7f29ac5554e3290880fe1e025100b78f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3_load_csv_json.html
<!DOCTYPE html>
<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<h1>Loading CSV and JSON with D3.</h1>
<p>Look in the console for logging info after the data loads.</p>
<p>If you open the console after loading, you'll need to reload the page.</p>
<p>We're printing the contents of the files to the screen here, just to show they load.
<p class="csvdata"></p>
<p class="jsondata"></p>
<script>
//Load in contents of CSV file
d3.csv("data/test_data.csv", function(data1) {
//Now CSV contents have been transformed into
//an array of JSON objects.
console.log("The first file is csv...")
//Log 'data' to the console, for verification.
console.log(data1);
$("p.csvdata").text(JSON.stringify(data1));
});
d3.json("stationReads.json", function(data2) {
//Now json contents have been loaded into
//an array of JSON objects.
console.log("This file is json!")
//Log 'data' to the console, for verification.
console.log(data2);
$("p.jsondata").text(JSON.stringify(data2));
});
// Notice that the objects look the same. d3.csv() parses rows as objects.
// Also this is a good point to talk about scope and breakpoints.
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<h1>Loading CSV and JSON with D3.</h1>
<p>Look in the console for logging info after the data loads.</p>
<p>If you open the console after loading, you'll need to reload the page.</p>
<p>We're printing the contents of the files to the screen here, just to show they load.
<p class="csvdata"></p>
<p class="jsondata"></p>
<script>
//Load in contents of CSV file
d3.csv("data/test_data.csv", function(data1) {
//Now CSV contents have been transformed into
//an array of JSON objects.
console.log("The first file is csv...")
//Log 'data' to the console, for verification.
console.log(data1);
$("p.csvdata").text(JSON.stringify(data1));
});
d3.json("stationReads.json", function(data2) {
//Now json contents have been loaded into
//an array of JSON objects.
console.log("This file is json!")
//Log 'data' to the console, for verification.
console.log(data2);
$("p.jsondata").text(JSON.stringify(data2));
});
// Notice that the objects look the same. d3.csv() parses rows as objects.
// Also this is a good point to talk about scope and breakpoints.
</script>
</body>
</html>
Raw
js_errors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script -> -->
</head>
<body>
<div id="content">
<h2>Welcome to a Page of Errors</h2>
<p>In order to get the "You did it" to appear below here, you need to use your Chrome console window, fix the code in an editor, reload, and get the output of each of the problems to appear.</p>
<p>Send me a screen shot copy of your console output as "proof."</p>
</div>
</body>
<script type="text/javascript">
// this is a javascript function.
function simple_add(arg1, arg2) {
return arg1 + arg2;
}
// so is this. Because it's defined as a var, it needs to appear before it's referred to on the page.
var subtract = function(arg1, arg2) {
return arg1 - arg2;
};
// this is an object
var myobject = {
cats: 2,
dogs: 5,
burrowingOwl: 10
};
console.log("Welcome to the problems in Javascript that you should fix.");
var mydata = [
{
Name: "Alice",
Experience: 20,
Title: "Data Journalist"
},
{
Name: "Bob",
Experience: "10",
Title: "Associate Editor"
},
{
Name: "Carmen",
Experience: NaN,
Title: "Senior Editor"
}
];
// fix this to fill in your name and display this in the console.
//console.log("Hi, my name is " + your name here).
// fix this so you can refer to burrowing owls:
//console.log("Problem 1, owls:", myobject's burrowing owls);
// fix to call the function with the cats and dogs properly
//console.log("Problem 2, Add 2 values:", simple_add(myobject's cats, myobject's dogs));
// fix to reference the first object in the list.
console.log("Problem 3, the first json object is (fix the index in brackets):", mydata[0]);
// A very simple function is needed here...
console.log("Problem 4, print the size or length of the mydata array using the right function in place of the array object name here:", mydata.length);
// Fill in the function, args, and fix the args so this works:
console.log("Problem 5, subtract experience of Bob from Alice, which requires fixing the data so subtraction works:"+ (mydata[0].Experience-mydata[1].Experience));
// Create another list of data objects expressing these estimates from 2014:
// Florida's population is 19,893,297, and it has 27 seats in the US House of Reps.
// California's population is 38,802,500, and it has 53 seats in the US House.
// Texas's pop is 26,956,958, and it has 36 seats in the US House.
//
// Create a function that calculates the population per house seat for any object.
// Console.log the output for all 3 states' pop per house seat.
var seatData = [
{
State: "Florida",
Pop: "19893297",
Seat: "27"
},
{
State: "California",
Pop: "38802500",
Seat: "53"
},
{
State: "Texas",
Pop: "26956958",
Seat: "36"
}
];
function seatCalc (pop, seat) {
return popPerseat = +pop/+seat;
}
console.log(seatData[2].Pop)
console.log("Your page should now display the last h2 element...");
// Raw DOM manipulation without jquery or d3: fix the missing variable with the results of the part above.
var child = document.createElement("h2");
child.innerHTML = "You did it! Texas has a Population per House Seat of " + seatCalc(seatData[2].Pop,seatData[2].Seat);
document.getElementById("content").appendChild(child);
</script>
</html>
Raw
stationReads.json
{
"start": 1466168400000,
"interval": 900000,
"value": {
"10042": [
"",
"",
"",
"",
"-0.281",
"-0.280",
"-0.281",
"-0.281",
"-0.281",
"-0.253",
"-0.181",
"-0.155",
"-0.131",
"-0.096",
"-0.062",
"-0.016",
"0.010",
"0.033",
"0.028",
"0.045",
"0.015",
"0.023",
"0.009",
"0.011",
"0.008",
"0.003",
"0.009",
"0.016",
"0.042",
"0.072",
"0.080",
"0.105",
"0.146",
"0.121",
"0.111",
"0.125",
"0.103",
"0.088",
"0.074",
"0.023",
"0.003",
"-0.021",
"-0.063",
"-0.074",
"-0.146",
"-0.195",
"-0.240",
"-0.267",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.281",
"-0.265",
"-0.233",
"-0.170",
"-0.132",
"-0.080",
"-0.035",
"-0.007",
"-0.004",
"0.011",
"0.018",
"0.011",
"0.021",
"0.031",
"-0.016",
"-0.031",
"-0.017",
"-0.031",
"-0.044",
"-0.035",
"-0.059",
"-0.011",
"-0.023",
"0.018",
"0.029",
"0.044",
"0.057",
"0.083",
"0.087",
"0.064",
"0.042",
"0.039",
"-0.025",
"-0.064",
"-0.096",
"-0.113",
"-0.140",
"-0.200",
"-0.282",
"-0.282",
"-0.281",
"-0.281",
"-0.281",
"-0.282",
"-0.281",
"-0.281",
"-0.282",
"-0.281",
"-0.281",
"-0.282",
"-0.281",
"-0.281",
"-0.230",
"-0.177",
"-0.097",
"-0.037",
"0.011",
"0.037",
"0.068",
"0.099",
"0.107",
"0.093",
"0.089",
"0.081",
"0.051",
"0.052",
"0.080",
"0.067",
"0.027",
"0.036",
"0.027",
"0.042",
"0.078",
"0.110",
"0.133",
"0.144",
"0.144",
"0.142",
"0.109",
"0.086",
"0.053",
"0.020",
"-0.007",
"-0.024",
"-0.076",
"-0.114",
"-0.174",
"-0.213",
"-0.250",
"-0.270",
"-0.281",
"-0.281",
"-0.282",
"-0.281",
"-0.282",
"-0.281",
"-0.281",
"-0.282",
"-0.282",
"-0.281",
"-0.233",
"-0.170",
"-0.139",
"-0.096",
"0.002",
"0.054",
"0.085",
"0.070",
"0.089",
"0.130",
"0.122",
"0.118",
"0.084",
"0.087",
"0.063",
"0.019",
"-0.006",
"0.009",
"-0.008",
"0.002",
"0.039",
"0.040",
"0.068",
"0.094",
"0.099",
"0.111",
"0.110",
"0.089",
"0.067",
"0.044",
"0.020",
"0.005",
"-0.024",
"-0.101",
"-0.133",
"-0.160",
"-0.235",
"-0.281",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.281",
"-0.282",
"-0.282",
"-0.281",
"-0.278",
"-0.195",
"-0.142",
"-0.095",
"-0.042",
"0.047",
"0.103",
"0.150",
"0.196",
"0.212",
"0.263",
"0.260",
"0.259",
"0.264",
"0.281",
"0.291",
"0.264",
"0.266",
"0.297",
"0.269",
"0.299",
"0.312",
"0.344",
"0.370",
"0.395",
"0.421",
"0.418",
"0.388",
"0.407",
"0.362",
"0.370",
"0.249",
"0.236",
"0.291",
"0.179",
"0.063",
"-0.006",
"-0.040",
"-0.066",
"-0.094",
"-0.093",
"-0.114",
"-0.127",
"-0.135",
"-0.143",
"-0.151",
"-0.157",
"-0.164",
"-0.171",
"-0.154",
"-0.138",
"-0.097",
"-0.103",
"-0.033",
"0.028",
"0.130",
"0.223",
"0.194",
"0.200",
"0.221",
"0.228",
"0.161",
"0.206",
"0.153",
"0.195",
"0.180",
"0.103",
"0.143",
"0.124",
"0.113",
"0.049",
"0.040",
"0.135",
"0.176",
"0.178",
"0.194",
"0.132",
"0.131",
"0.079",
"0.113",
"0.022",
"0.023",
"-0.030",
"-0.013",
"-0.108",
"-0.170",
"-0.204",
"-0.272",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.269",
"-0.170",
"-0.116",
"-0.006",
"0.051",
"0.112",
"0.139",
"0.189",
"0.231",
"0.240",
"0.310",
"0.297",
"0.277",
"0.289",
"0.299",
"0.306",
"0.255",
"0.253",
"0.215",
"0.229",
"0.236",
"0.238",
"0.217",
"0.210",
"0.254",
"0.278",
"0.231",
"0.235",
"0.193",
"0.107",
"0.101",
"0.117",
"-0.002",
"-0.006",
"-0.033",
"-0.136",
"-0.148",
"-0.218",
"-0.282",
"-0.281",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.281",
"-0.281",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.227",
"-0.153",
"-0.052",
"-0.012",
"0.069",
"0.082",
"0.122",
"0.166",
"0.183",
"0.220",
"0.205",
"0.177",
"0.209",
"0.165",
"0.135",
"0.106",
"0.059",
"0.054",
"0.027",
"0.068",
"0.105",
"0.120",
"0.116",
"0.146",
"0.114",
"0.123",
"0.111",
"0.134",
"0.125",
"0.104",
"0.016",
"0.005",
"-0.067",
"-0.114",
"-0.134",
"-0.175",
"-0.273",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.277",
"-0.221",
"-0.127",
"-0.034",
"-0.001",
"0.074",
"0.149",
"0.240",
"0.288",
"0.349",
"0.352",
"0.354",
"0.387",
"0.403",
"0.397",
"0.370",
"0.332",
"0.273",
"0.304",
"0.293",
"0.289",
"0.289",
"0.273",
"0.307",
"0.330",
"0.301",
"0.277",
"0.273",
"0.287",
"0.233",
"0.177",
"0.150",
"0.101",
"0.094",
"0.042",
"-0.077",
"-0.141",
"-0.234",
"-0.263",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.281",
"-0.282",
"-0.196",
"-0.115",
"-0.042",
"0.009",
"0.086",
"0.108",
"0.123",
"0.179",
"0.192",
"0.193",
"0.184",
"0.129",
"0.136",
"0.125",
"0.100",
"0.027",
"0.013",
"0.036",
"0.015",
"0.005",
"0.044",
"0.050",
"0.080",
"0.125",
"0.085",
"0.064",
"0.060",
"0.064",
"0.056",
"0.001",
"-0.051",
"-0.108",
"-0.101",
"-0.138",
"-0.210",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.282",
"-0.281",
"-0.282",
"-0.282",
"-0.281",
"-0.281",
"-0.281",
"-0.280"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment