New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 3. This example modifies the line chart from January 2nd and attempts to create a scatter plot using some longitudinal education data. Props to Malcolm Maclean's D3.js Tips and Tricks V4 for detailed coding examples.
Last active
January 3, 2017 10:23
-
-
Save dbetebenner/d3c628701651f9b6bbcc8ee829ac1ad6 to your computer and use it in GitHub Desktop.
D3 Block-a-Day: Day 3, January 3rd, 2017
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license:gpl-3.0 | |
| height:500 | |
| border:no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>D3 Block-a-Day: Day 3, January 3, 2017</title> | |
| <link rel="stylesheet" type="text/css" href="styles.css"/> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> <!-- Load the d3.js library --> | |
| <style> /* set the CSS */ | |
| body { | |
| font: 20px Helvetica Neue; | |
| } | |
| .dot { | |
| stroke: #000; | |
| fill: #ffe0e0; | |
| } | |
| .axis { | |
| font: 14px Helvetica Neue; | |
| } | |
| .grid line { | |
| stroke: lightgrey; | |
| stroke-opacity: 0.7; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid path { | |
| stroke-width: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // set the dimensions and margins of the graph | |
| var margin = {top: 20, right: 20, bottom: 50, left: 70}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // set the ranges | |
| var x = d3.scaleLinear().range([0, width]); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| // define the line | |
| var valueline = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.close); }); | |
| // append the svg obgect to the body of the page | |
| // appends a 'group' element to 'svg' | |
| // moves the 'group' element to the top left margin | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| // gridlines in x axis function | |
| function make_x_gridlines() { | |
| return d3.axisBottom(x) | |
| .ticks(5) | |
| } | |
| // gridlines in y axis function | |
| function make_y_gridlines() { | |
| return d3.axisLeft(y) | |
| .ticks(5) | |
| } | |
| // Get the data | |
| d3.csv("scale_scores.csv", function(error, data) { | |
| if (error) throw error; | |
| // format the data | |
| data.forEach(function(d) { | |
| d.scale_score_2015 = +d.SCALE_SCORE_2015; | |
| d.scale_score_2016 = +d.SCALE_SCORE_2016; | |
| }); | |
| // Scale the range of the data | |
| x.domain([200,800]); | |
| y.domain([200,800]); | |
| svg.selectAll("dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 6) | |
| .attr("cx", function(d) { return x(d.scale_score_2015); }) | |
| .attr("cy", function(d) { return y(d.scale_score_2016); }); | |
| // Add the x Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).ticks(5)) | |
| .attr("class", "axis"); | |
| // text label for the x axis | |
| svg.append("text") | |
| .attr("transform", | |
| "translate(" + (width*0.1) + " ," + | |
| (height + margin.top + 30) + ")") | |
| .style("text-anchor", "middle") | |
| .style("font-family", "Helvetica Neue") | |
| .text("Scale Score 2015"); | |
| // Add the y Axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)) | |
| .style("font-family", "Helvetica Neue") | |
| .attr("class", "axis"); | |
| // text label for the y axis | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 0 - margin.left) | |
| .attr("x", - 0.75*height) | |
| .attr("dy", "1em") | |
| .style("text-anchor", "middle") | |
| .style("font-family", "Helvetica Neue") | |
| .text("Scale Score 2016"); | |
| // add the X gridlines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(make_x_gridlines() | |
| .tickSize(-height) | |
| .tickFormat("") | |
| ) | |
| // add the Y gridlines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(make_y_gridlines() | |
| .tickSize(-width) | |
| .tickFormat("") | |
| ) | |
| }); | |
| </script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| SCALE_SCORE_2015 | SCALE_SCORE_2016 | |
|---|---|---|
| 591 | 591 | |
| 471 | 513 | |
| 573 | 586 | |
| 441 | 458 | |
| 474 | 460 | |
| 635 | 697 | |
| 637 | 635 | |
| 586 | 633 | |
| 464 | 513 | |
| 580 | 586 | |
| 511 | 538 | |
| 536 | 569 | |
| 642 | 662 | |
| 499 | 533 | |
| 516 | 559 | |
| 544 | 522 | |
| 493 | 444 | |
| 436 | 428 | |
| 552 | 595 | |
| 516 | 545 | |
| 604 | 604 | |
| 694 | 643 | |
| 604 | 575 | |
| 480 | 515 | |
| 627 | 619 | |
| 604 | 577 | |
| 536 | 530 | |
| 382 | 359 | |
| 527 | 558 | |
| 549 | 561 | |
| 490 | 552 | |
| 659 | 698 | |
| 499 | 564 | |
| 491 | 475 | |
| 540 | 578 | |
| 586 | 625 | |
| 453 | 487 | |
| 477 | 515 | |
| 487 | 480 | |
| 586 | 619 | |
| 528 | 537 | |
| 519 | 554 | |
| 490 | 507 | |
| 571 | 635 | |
| 473 | 460 | |
| 569 | 550 | |
| 557 | 619 | |
| 448 | 386 | |
| 718 | 659 | |
| 477 | 465 | |
| 703 | 656 | |
| 526 | 485 | |
| 585 | 629 | |
| 392 | 328 | |
| 523 | 524 | |
| 543 | 560 | |
| 478 | 451 | |
| 500 | 552 | |
| 544 | 579 | |
| 594 | 641 | |
| 533 | 455 | |
| 397 | 436 | |
| 516 | 551 | |
| 523 | 518 | |
| 565 | 636 | |
| 385 | 296 | |
| 511 | 501 | |
| 582 | 563 | |
| 534 | 545 | |
| 459 | 515 | |
| 541 | 596 | |
| 491 | 549 | |
| 616 | 572 | |
| 437 | 455 | |
| 612 | 635 | |
| 580 | 622 | |
| 373 | 469 | |
| 625 | 609 | |
| 541 | 574 | |
| 443 | 456 | |
| 556 | 544 | |
| 539 | 538 | |
| 517 | 585 | |
| 527 | 537 | |
| 515 | 493 | |
| 510 | 517 | |
| 502 | 529 | |
| 540 | 523 | |
| 405 | 381 | |
| 649 | 643 | |
| 447 | 469 | |
| 449 | 499 | |
| 560 | 602 | |
| 569 | 641 | |
| 535 | 566 | |
| 497 | 529 | |
| 535 | 580 | |
| 477 | 494 | |
| 492 | 501 | |
| 477 | 582 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment