Skip to content

Instantly share code, notes, and snippets.

@muschellij2
Last active August 29, 2015 13:56
Show Gist options
  • Save muschellij2/8809159 to your computer and use it in GitHub Desktop.
Save muschellij2/8809159 to your computer and use it in GitHub Desktop.
Scatterplot
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<script src='http://ramnathv.github.io/rCharts/libraries/widgets/polycharts/js/polychart2.standalone.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id='chart1' class='rChart polycharts'></div>
<script type='text/javascript'>
var chartParams = {
"dom": "chart1",
"width": 800,
"height": 400,
"layers": [
{
"x": "date",
"y": "HitRatio",
"data": {
"month": [ "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec" ],
"State": [ "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "AZ", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CA", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "CT", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "FL", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "GA", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "HI", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "ID", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IL", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "IN", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "KY", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "ME", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MD", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MI", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MN", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "MO", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NV", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NH", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NJ", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NY", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "NC", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "OH", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "PA", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "SC", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "TN", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "VA", "WI", "WI", "WI", "WI", "WI", "WI", "WI", "WI", "WI", "WI", "WI", "WI" ],
"HitRatio": [ 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2, 0, 0.047619, 0, 0.125, 0.125, 0.1, 0, 0.125, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0.055556, 0.083333, 0.28571, 0.14286, 0, 0, 0, 0, 0, 0.4, 0, 0, 0, 0.25, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.33333, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.33333, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0.33333, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.33333, 0, 0, 0.28571, 0.2, 0.16667, 1, 0, 0, 0.2, 0, 0, 1, 0, 0, 0, 0.25, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.33333, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.33333, 0, 0, 0, 1, 0.25, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0.16667, 0.2, 0.2, 0, 0, 0.125, 0, 0.33333, 0, 0, 0.33333, 0, 0, 0.5, 0, 0.2, 0.33333, 0, 0, 0, 0, 0, 0, 0, 0.33333, 0.16667, 0, 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.22222, 0.16667, 0, 0, 0.25, 0.4, 0, 0, 0.33333, 0.5, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0 ],
"date": [ 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040, 15706, 15737, 15765, 15796, 15826, 15857, 15887, 15918, 15949, 15979, 16010, 16040 ]
},
"facet": null,
"type": "point",
"color": "State"
}
],
"facet": [],
"guides": [],
"coord": [],
"id": "chart1"
}
_.each(chartParams.layers, function(el){
el.data = polyjs.data(el.data)
})
var graph_chart1 = polyjs.chart(chartParams);
</script>
<script>
graph_chart1.addHandler(function(type, e){
var data = e.evtData;
if (type === 'click'){
return alert("You clicked on car with mpg: " + data.mpg.in[0]);
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment