Skip to content

Instantly share code, notes, and snippets.

@esjay
Last active April 1, 2017 20:02
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 esjay/8b2c6c695468fac6bb6f0c7a84ba9eaf to your computer and use it in GitHub Desktop.
Save esjay/8b2c6c695468fac6bb6f0c7a84ba9eaf to your computer and use it in GitHub Desktop.
fresh block
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.area {
fill: lightsteelblue;
}
</style>
</head>
<body>
<script>
var data = [
{
"_id":"58df691f2528f110a7afd213",
"is_snow":0,
"humidity_pct":95.5,
"dewpoint_C":1.594329833984375,
"fcst_hour":6,
"pressure_hPa":1009.8999633789062,
"windpolar_deg":-127.97186169217467,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":2.137481689453125,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":3.200000047683716,
"precip_mmhr":2.879999876022339,
"is_rain":1,
"windspeed_kmhr":24.62654411005912,
"rvr_km":3.4022282673768647,
"is_freezing_rain":0,
"is_ice_pellets":1
},
{
"_id":"58df6ace2528f110a7cce408",
"is_snow":1,
"humidity_pct":97.20000457763672,
"dewpoint_C":1.162872314453125,
"fcst_hour":7,
"pressure_hPa":1010.3999633789062,
"windpolar_deg":-121.5739435799609,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":1.546966552734375,
"cloud_coverage_pct":84,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":2.700000047683716,
"precip_mmhr":3.240000009536743,
"is_rain":1,
"windspeed_kmhr":23.605524017910643,
"rvr_km":3.26453700686132,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58df6c722528f110a7e9f5fd",
"is_snow":0,
"humidity_pct":95,
"dewpoint_C":1.330291748046875,
"fcst_hour":4,
"pressure_hPa":1010.5,
"windpolar_deg":-137.70360089308434,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":1.964447021484375,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":3.3000001907348633,
"precip_mmhr":2.1599998474121094,
"is_rain":1,
"windspeed_kmhr":23.86061309819752,
"rvr_km":3.751511778752527,
"is_freezing_rain":0,
"is_ice_pellets":1
},
{
"_id":"58df6e1d2528f110a70707f3",
"is_snow":0,
"humidity_pct":96,
"dewpoint_C":1.4027099609375,
"fcst_hour":5,
"pressure_hPa":1009.8999633789062,
"windpolar_deg":-127.4417641450116,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":1.87457275390625,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":2.6000001430511475,
"precip_mmhr":3.240000009536743,
"is_rain":1,
"windspeed_kmhr":23.62078206188025,
"rvr_km":3.26453700686132,
"is_freezing_rain":0,
"is_ice_pellets":1
},
{
"_id":"58df701f2528f110a72419e8",
"is_snow":0,
"humidity_pct":89.70000457763672,
"dewpoint_C":1.367340087890625,
"fcst_hour":2,
"pressure_hPa":1011,
"windpolar_deg":-144.07315711819757,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":2.759246826171875,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":4.800000190734863,
"precip_mmhr":3.240000009536743,
"is_rain":1,
"windspeed_kmhr":26.686292419985957,
"rvr_km":4.800000190734863,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58df71d22528f110a7412bdd",
"is_snow":0,
"humidity_pct":93.5,
"dewpoint_C":1.404693603515625,
"fcst_hour":3,
"pressure_hPa":1011,
"windpolar_deg":-141.45799166259093,
"ts":"2017-04-01T07:00:00.000Z",
"temp_C":2.197296142578125,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":2.4000000953674316,
"precip_mmhr":3.5999996662139893,
"is_rain":0,
"windspeed_kmhr":24.568894036956948,
"rvr_km":3.1441439260868336,
"is_freezing_rain":0,
"is_ice_pellets":1
},
{
"_id":"58dfd2f591d1d66307caac67",
"is_snow":1,
"humidity_pct":90.70000457763672,
"dewpoint_C":-0.066131591796875,
"fcst_hour":6,
"pressure_hPa":1012.3999633789062,
"windpolar_deg":-85.06102586644687,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.162017822265625,
"cloud_coverage_pct":96,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":9.800000190734863,
"precip_mmhr":0.35999998450279236,
"is_rain":1,
"windspeed_kmhr":14.964698450253893,
"rvr_km":14.700000286102295,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfd4ee91d1d66307e7be5c",
"is_snow":1,
"humidity_pct":91.20000457763672,
"dewpoint_C":-0.157318115234375,
"fcst_hour":7,
"pressure_hPa":1012.699951171875,
"windpolar_deg":-81.84859274762663,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.04083251953125,
"cloud_coverage_pct":93,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":9.800000190734863,
"precip_mmhr":0,
"is_rain":1,
"windspeed_kmhr":13.423223247911853,
"rvr_km":14.700000286102295,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfd6e991d1d6630704d052",
"is_snow":1,
"humidity_pct":90,
"dewpoint_C":0.285614013671875,
"fcst_hour":4,
"pressure_hPa":1010.7999877929688,
"windpolar_deg":-103.73820856614084,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.75262451171875,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.10799999535083771,
"is_rain":1,
"windspeed_kmhr":23.743606509914542,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfd8d991d1d6630721e247",
"is_snow":0,
"humidity_pct":89.5,
"dewpoint_C":0.033294677734375,
"fcst_hour":5,
"pressure_hPa":1011.199951171875,
"windpolar_deg":-97.1649231937198,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.48541259765625,
"cloud_coverage_pct":100,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0,
"is_rain":1,
"windspeed_kmhr":20.573408485682435,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfdac091d1d663073ef43c",
"is_snow":1,
"humidity_pct":94,
"dewpoint_C":0.633880615234375,
"fcst_hour":2,
"pressure_hPa":1009.8999633789062,
"windpolar_deg":-98.99694147470369,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.58526611328125,
"cloud_coverage_pct":79,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":6.200000286102295,
"precip_mmhr":1.4399999380111694,
"is_rain":0,
"windspeed_kmhr":21.86066424785445,
"rvr_km":11.0565368780918,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfdc9791d1d663075c0631",
"is_snow":1,
"humidity_pct":92.30000305175781,
"dewpoint_C":0.5517578125,
"fcst_hour":3,
"pressure_hPa":1010.699951171875,
"windpolar_deg":-98.03224992655024,
"ts":"2017-04-01T15:00:00.000Z",
"temp_C":1.72003173828125,
"cloud_coverage_pct":83,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.7199999690055847,
"is_rain":1,
"windspeed_kmhr":22.94596153746681,
"rvr_km":15.101290196768641,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfe11791d1d6d43907a892",
"is_snow":1,
"humidity_pct":90.5999984741211,
"dewpoint_C":-0.273162841796875,
"fcst_hour":6,
"pressure_hPa":1013.3999633789062,
"windpolar_deg":-84.80213300628883,
"ts":"2017-04-01T16:00:00.000Z",
"temp_C":0.999664306640625,
"cloud_coverage_pct":94,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":9.800000190734863,
"precip_mmhr":0,
"is_rain":1,
"windspeed_kmhr":14.441189117078773,
"rvr_km":14.700000286102295,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfe30491d1d6d43924ba87",
"is_snow":1,
"humidity_pct":90.80000305175781,
"dewpoint_C":-0.307769775390625,
"fcst_hour":7,
"pressure_hPa":1014.5999755859375,
"windpolar_deg":-80.30528974781478,
"ts":"2017-04-01T16:00:00.000Z",
"temp_C":0.921875,
"cloud_coverage_pct":89,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"windspeed_kmhr":13.731084401204729,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfe4fb91d1d6d43941cc7c",
"is_snow":1,
"humidity_pct":91.80000305175781,
"dewpoint_C":0.289764404296875,
"fcst_hour":4,
"pressure_hPa":1011,
"windpolar_deg":-99.48006829566198,
"ts":"2017-04-01T16:00:00.000Z",
"temp_C":1.436370849609375,
"cloud_coverage_pct":99,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.2879999876022339,
"is_rain":1,
"windspeed_kmhr":20.956540141612862,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfe6de91d1d6d4395ede71",
"is_snow":1,
"humidity_pct":90.4000015258789,
"dewpoint_C":-0.043243408203125,
"fcst_hour":5,
"pressure_hPa":1012.3999633789062,
"windpolar_deg":-91.63647662362445,
"ts":"2017-04-01T16:00:00.000Z",
"temp_C":1.212860107421875,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0,
"is_rain":1,
"windspeed_kmhr":16.66625172416411,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfe8c891d1d6d4397bf066",
"is_snow":1,
"humidity_pct":92.5,
"dewpoint_C":0.487640380859375,
"fcst_hour":2,
"pressure_hPa":1009.8999633789062,
"windpolar_deg":-100.13970499881744,
"ts":"2017-04-01T16:00:00.000Z",
"temp_C":1.65325927734375,
"cloud_coverage_pct":86,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.7199999690055847,
"is_rain":0,
"windspeed_kmhr":24.110940740230486,
"rvr_km":15.101290196768641,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfecf191d1d629b41dc8c9",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfee3691d1d62aaa8c56f1",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfef9b91d1d62b98cfae62",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dff49291d1d62f2e1d09ee",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dff5fc91d1d63016b723f9",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dff76191d1d630ff28c717",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dff8a991d1d631e6bf1a2a",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dffa1e91d1d632d5fb3385",
"is_snow":1,
"humidity_pct":90.20000457763672,
"dewpoint_C":-0.341949462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.699951171875,
"windpolar_deg":-85.91391257590719,
"ts":"2017-04-01T17:00:00.000Z",
"temp_C":0.93609619140625,
"cloud_coverage_pct":95,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":15.604640544355858,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dffb8991d1d63472e994bd",
"is_snow":1,
"humidity_pct":93.0999984741211,
"dewpoint_C":-0.29449462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.3999633789062,
"windpolar_deg":-67.97773157560248,
"ts":"2017-04-01T18:00:00.000Z",
"temp_C":0.650482177734375,
"cloud_coverage_pct":56,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":13.863386362837634,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dffcea91d1d63557cca18c",
"is_snow":1,
"humidity_pct":93.0999984741211,
"dewpoint_C":-0.29449462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.3999633789062,
"windpolar_deg":-67.97773157560248,
"ts":"2017-04-01T18:00:00.000Z",
"temp_C":0.650482177734375,
"cloud_coverage_pct":56,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":13.863386362837634,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dffe4a91d1d6364332a30c",
"is_snow":1,
"humidity_pct":93.0999984741211,
"dewpoint_C":-0.29449462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.3999633789062,
"windpolar_deg":-67.97773157560248,
"ts":"2017-04-01T18:00:00.000Z",
"temp_C":0.650482177734375,
"cloud_coverage_pct":56,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":13.863386362837634,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58dfffaf91d1d63731b9a715",
"is_snow":1,
"humidity_pct":93.0999984741211,
"dewpoint_C":-0.29449462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.3999633789062,
"windpolar_deg":-67.97773157560248,
"ts":"2017-04-01T18:00:00.000Z",
"temp_C":0.650482177734375,
"cloud_coverage_pct":56,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":13.863386362837634,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
},
{
"_id":"58e0011691d1d6382bea42be",
"is_snow":1,
"humidity_pct":93.0999984741211,
"dewpoint_C":-0.29449462890625,
"state":null,
"fcst_hour":6,
"pressure_hPa":1014.3999633789062,
"windpolar_deg":-67.97773157560248,
"ts":"2017-04-01T18:00:00.000Z",
"temp_C":0.650482177734375,
"cloud_coverage_pct":56,
"location":{
"type":"Point",
"coordinates":[
-71.02611906987818,
42.3573770676665
]
},
"visibility_km":10,
"precip_mmhr":0.35999998450279236,
"is_rain":0,
"major_city":null,
"windspeed_kmhr":13.863386362837634,
"rvr_km":15,
"is_freezing_rain":0,
"is_ice_pellets":0
}
];
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the area
var area = d3.area()
.x(function(d) { return x(moment.utc().diff(moment.utc(d.ts).add(d.fcst_hour, 'hours'), 'hours', true)); })
.y0(height)
.y1(function(d) { return y(d.precip_mmhr); });
// define the line
var valueline = d3.line()
.x(function(d) { return x(moment.utc().diff(moment.utc(d.ts).add(d.fcst_hour, 'hours'), 'hours', true))); })
.y(function(d) { return y(d.precip_mmhr); });
// 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 + ")");
// scale the range of the data
x.domain(d3.extent(data, function(d) { return moment.utc().diff(moment.utc(d.ts).add(d.fcst_hour, 'hours'), 'hours', true); }));
y.domain([0, d3.max(data, function(d) { return d.precip_mmhr; })]);
// add the area
svg.append("path")
.data([data])
.attr("class", "area")
.attr("d", area);
// add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment