Skip to content

Instantly share code, notes, and snippets.

@nbryant
Last active September 14, 2015 13:10
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 nbryant/2dc50b892378a6dc2813 to your computer and use it in GitHub Desktop.
Save nbryant/2dc50b892378a6dc2813 to your computer and use it in GitHub Desktop.
Webcharts - Chart with Multiple Marks
STATION STATION_NAME DATE TPCP TSNW EMXT EMNT Monthly Mean Max Monthly Mean Min Monthly Mean
COOP:311535 CARY NC US 201401 221 24 67 8 46.4 24.2 35.3
COOP:311535 CARY NC US 201402 350 41 71 15 52.1 31.4 41.7
COOP:311535 CARY NC US 201403 507 2 78 16 55.3 32 43.6
COOP:311535 CARY NC US 201404 305 0 87 32 71.6 46.3 59
COOP:311535 CARY NC US 201405 573 0 90 46 79.8 57.7 68.7
COOP:311535 CARY NC US 201406 250 0 95 52 86.3 64.8 75.6
COOP:311535 CARY NC US 201407 760 0 96 61 85.6 67.4 76.5
COOP:311535 CARY NC US 201408 856 0 89 59 81.1 65.6 73.4
COOP:311535 CARY NC US 201409 421 0 91 53 77.3 63.1 70.2
COOP:311535 CARY NC US 201410 327 0 84 41 72.9 49.7 61.3
COOP:311535 CARY NC US 201411 418 0 74 21 55.2 34.6 44.9
COOP:311535 CARY NC US 201412 535 0 72 27 52.3 35.9 44.1
COOP:311535 CARY NC US 201501 418 0 68 10 48.1 28.7 38.4
COOP:311535 CARY NC US 201502 265 56 70 7 43.5 22.5 33
COOP:311535 CARY NC US 201503 327 0 82 21 60.2 38.2 49.2
COOP:311535 CARY NC US 201504 578 0 83 37 70.9 48.4 59.7
COOP:310212 APEX NC US 201401 279 28 65 9 47.3 24.5 35.9
COOP:310212 APEX NC US 201402 350 55 72 18 52.9 32.5 42.7
COOP:310212 APEX NC US 201403 574 0 78 16 55.8 32.8 44.3
COOP:310212 APEX NC US 201404 338 0 87 33 71.6 47.2 59.4
COOP:310212 APEX NC US 201405 580 0 91 48 80.4 58.3 69.3
COOP:310212 APEX NC US 201406 308 0 96 52 87 65.4 76.2
COOP:310212 APEX NC US 201407 659 0 97 61 86.5 67.7 77.1
COOP:310212 APEX NC US 201408 875 0 91 60 82.9 66.2 74.5
COOP:310212 APEX NC US 201409 400 0 94 54 78.9 63.6 71.3
COOP:310212 APEX NC US 201410 240 0 84 41 73.7 48.9 61.3
COOP:310212 APEX NC US 201411 408 0 76 21 56.7 35.1 45.9
COOP:310212 APEX NC US 201412 509 0 73 28 53.5 36.5 45
COOP:310212 APEX NC US 201501 422 0 69 10 49.5 29.2 39.3
COOP:310212 APEX NC US 201502 297 61 71 7 44.9 23.5 34.2
COOP:310212 APEX NC US 201503 380 0 83 21 61.1 38.7 49.9
COOP:310212 APEX NC US 201504 453 0 83 37 71.6 49 60.3
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201401 305 30 70 9 46.9 25.8 36.4
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201402 287 43 73 23 54.1 32.3 43.2
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201403 637 0 79 25 57.1 35 46.1
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201404 511 0 85 32 72.9 49.5 61.2
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201405 547 0 92 46 82.5 58.6 70.5
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201406 450 0 97 57 89 67.6 78.3
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201407 607 0 97 62 89.6 69 79.3
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201408 782 0 97 59 86.4 67.5 76.9
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201409 498 0 97 54 80.9 63.6 72.3
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201410 463 0 84 39 74.5 51.2 62.9
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201411 369 0 72 21 56.6 35.9 46.3
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201412 448 0 70 28 54.2 36.7 45.4
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201501 224 0 72 15 48.3 28.9 38.6
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201502 294 0 72 7 45.6 23.4 34.5
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201503 362 0 76 22 59.7 38.7 49.2
COOP:317079 RALEIGH STATE UNIVERSITY NC US 201504 492 0 83 38 71 51.6 61.3
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201401 196 19 69 7 48.1 25.2 36.7
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201402 300 37 73 23 53.5 33.4 43.4
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201403 505 2 79 16 57.9 34 46
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201404 523 0 86 31 72.3 48 60.2
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201405 401 0 92 45 81.4 58.3 69.8
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201406 331 0 97 52 88.8 65.8 77.3
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201407 896 0 98 60 88.1 68.7 78.4
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201408 687 0 92 58 84.6 67.1 75.9
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201409 591 0 96 54 79.9 64.4 72.2
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201410 218 0 86 39 75 51 63
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201411 378 0 76 19 58.1 35.8 47
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201412 497 0 74 26 53.8 35.6 44.7
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201501 335 0 69 11 49.5 30 39.8
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201502 291 79 72 7 45 24.6 34.8
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201503 328 0 82 20 62.7 39.8 51.3
COOP:317069 RALEIGH DURHAM INTERNATIONAL AIRPORT NC US 201504 526 0 84 33 72.5 50.6 61.5
COOP:312993 FALLS LAKE NC US 201401 219 20 67 7 47.2 24.5 35.9
COOP:312993 FALLS LAKE NC US 201403 556 3 77 15 56.2 30.6 43.4
COOP:312993 FALLS LAKE NC US 201404 449 0 88 31 72.6 43.5 58.1
COOP:312993 FALLS LAKE NC US 201405 488 0 88 46 77.8 55.8 66.8
COOP:312993 FALLS LAKE NC US 201406 418 0 90 51 83.6 63.2 73.4
COOP:312993 FALLS LAKE NC US 201407 587 0 93 58 83.9 66.8 75.4
COOP:312993 FALLS LAKE NC US 201408 372 0 86 58 79.5 65.3 72.4
COOP:312993 FALLS LAKE NC US 201409 793 0 90 54 76.3 62.9 69.6
COOP:312993 FALLS LAKE NC US 201410 392 0 80 39 70.4 49.4 59.9
COOP:312993 FALLS LAKE NC US 201411 400 0 72 20 54.8 33.6 44.2
COOP:312993 FALLS LAKE NC US 201412 503 0 70 25 52 33.2 42.6
COOP:312993 FALLS LAKE NC US 201501 353 0 68 11 48 27.1 37.5
COOP:312993 FALLS LAKE NC US 201502 300 118 71 7 43.7 21.9 32.8
COOP:312993 FALLS LAKE NC US 201503 348 0 82 19 60.4 35.6 48
COOP:312993 FALLS LAKE NC US 201504 331 0 84 32 71.4 46.5 58.9
COOP:316122 NEW HILL NC US 201401 218 0 66 3 47 21.8 34.4
COOP:316122 NEW HILL NC US 201402 190 0 73 20 55.8 31.3 43.5
COOP:316122 NEW HILL NC US 201403 569 0 76 16 55.9 30.3 43.1
COOP:316122 NEW HILL NC US 201404 367 0 88 31 73.1 43.3 58.2
COOP:316122 NEW HILL NC US 201405 790 0 92 44 81.4 55.3 68.4
COOP:316122 NEW HILL NC US 201406 204 0 96 49 87.6 62.6 75.1
COOP:316122 NEW HILL NC US 201407 564 0 97 59 87.1 65.5 76.3
COOP:316122 NEW HILL NC US 201408 636 0 91 53 83.1 64.6 73.9
COOP:316122 NEW HILL NC US 201409 301 0 94 53 79.5 62.5 71
COOP:316122 NEW HILL NC US 201410 225 0 84 38 74.2 47.6 60.9
COOP:316122 NEW HILL NC US 201411 412 0 75 16 56.8 32.1 44.5
COOP:316122 NEW HILL NC US 201412 483 0 73 24 52.8 33.6 43.2
COOP:316122 NEW HILL NC US 201501 426 0 68 10 49.2 26.5 37.9
COOP:316122 NEW HILL NC US 201502 171 0 71 6 46.4 21.7 34
COOP:316122 NEW HILL NC US 201503 246 0 82 18 62 36.1 49
COOP:316122 NEW HILL NC US 201504 702 0 84 32 71.7 47.2 59.5

This simple line chart is created with Webcharts and plots temperature over time between January 2014 and April 2015 in Wake County, NC. A line plots the average of the six station readings, each of which is represented by a circle. Data sourced from the National Climatic Data Center.

<html lang="en">
<title>Webcharts - Chart with Multiple Marks</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
</head>
<body style="padding:1em;">
</body>
<script src="manyMarks.js" defer></script>
</html>
var settings = {
"max_width":"500",
"x":{
"label":"",
"type":"time",
"column":"DATE",
"format": "%b'%y"
},
"y":{
"label": function(){return this.config.y.column+" (F)"; },
"type":"linear",
"column":"Monthly Mean"
},
date_format: "%Y%m",
"marks":[
{
"type":"circle",
"per":["STATION_NAME", "DATE"],
"tooltip":"[STATION_NAME]\n$x\n$y",
summarizeY: "mean"
},
{
"type":"line",
"per":[],
summarizeY: "mean",
attributes: {stroke: "#555"}
}
],
color_by: "STATION_NAME",
"gridlines":"xy",
"legend": {
"label": "Station"
}
};
var controls = webCharts.createControls("body", {location: "top",
inputs:[
{type: "dropdown", option: "y.column", label: "Y Values", values: ["Monthly Mean Max","Monthly Mean Min","Monthly Mean"], require: true},
{type: "subsetter", value_col: "STATION_NAME", label: "Filter by Station", multiple: true}
]
});
d3.csv("593576.csv", function(error, data){
webCharts.createChart("body", settings, controls).init(data);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment