Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete_flag
- LavalX/CB22x/2013_Spring,MHxPC130442623,1,0,0,0,United States,NA,NA,NA,0,2012-12-19,2013-11-17,,9,,,0,,1
- LavalX/CS50x/2012,MHxPC130442623,1,1,0,0,United States,NA,NA,NA,0,2012-10-15,,,9,,1.0,0,,1
- LavalX/CB22x/2013_Spring,MHxPC130275857,1,0,0,0,Canada,NA,NA,NA,0,2013-02-08,2013-11-17,,16,,,0,,1
- LavalX/CS50x/2012,MHxPC130275857,1,0,0,0,United States,NA,NA,NA,0,2012-09-17,,,16,,,0,,1
- LavalX/ER22x/2013_Spring,MHxPC130275857,1,0,0,0,France,NA,NA,NA,0,2012-12-19,,,16,,,0,,1
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Graphs</title>
- <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
- <style type="text/css">
- .axis path,
- .axis line {
- fill: none;
- stroke: black;
- shape-rendering: crispEdges;
- }
- .axis text {
- font-family: sans-serif;
- font-size: 11px;
- }
- </style>
- </head>
- <body>
- <script type="text/javascript">
- //Width and height
- var w = 500;
- var h = 300;
- var padding = 30;
- // Get the data
- d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) {
- data.forEach(function(d) {
- d.registered = +d.registered;
- d.start_time_DI = +d.start_time_DI;
- });
- }
- //Create scale functions
- var xScale = d3.scale.linear()
- .domain([0, d3.max(dataset, function(d) { return d[0]; })])
- .range([padding, w - padding * 2]);
- var yScale = d3.scale.linear()
- .domain([0, d3.max(dataset, function(d) { return d[1]; })])
- .range([h - padding, padding]);
- var rScale = d3.scale.linear()
- .domain([0, d3.max(dataset, function(d) { return d[1]; })])
- .range([2, 5]);
- //Define X axis
- var xAxis = d3.svg.axis()
- .scale(xScale)
- .orient("bottom")
- .ticks(5);
- //Define Y axis
- var yAxis = d3.svg.axis()
- .scale(yScale)
- .orient("left")
- .ticks(5);
- //Create SVG element
- var svg = d3.select("body")
- .append("svg")
- .attr("width", w)
- .attr("height", h);
- //Create circles
- svg.selectAll("circle")
- .data(dataset)
- .enter()
- .append("circle")
- .attr("cx", function(d) {
- return xScale(d[0]);
- })
- .attr("cy", function(d) {
- return yScale(d[1]);
- })
- .attr("r", function(d) {
- return rScale(d[1]);
- });
- //Create X axis
- svg.append("g")
- .attr("class", "axis")
- .attr("transform", "translate(0," + (h - padding) + ")")
- .call(xAxis);
- //Create Y axis
- svg.append("g")
- .attr("class", "axis")
- .attr("transform", "translate(" + padding + ",0)")
- .call(yAxis);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement