D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
korenmiklos
Full window
Github gist
Prototype of Graphing App
<html> <head> <title>CEU MicroData</title> <script> d3.json("https://htsql.coauthors.net/htsql/industry?country='austria'/:json", function(d) { console.log(d);}); </script> </head> <body> <div id="header"> <h1>CEU MicroData</h1> </div> <div id="line-chart" style="width:650px;"> <h2>Industrial production growth</h2> <script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AhJS2rfBAT8JdFJveVd5ZG5YZlFhek00NVlISml1R0E&transpose=0&headers=1&range=E277%3AH406&gid=0&pub=1","options":{"displayAnnotations":true,"titleTextStyle":{"fontSize":16},"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"booleanRole":"certainty","title":"Chart title","allValuesSuffix":"%","thickness":"2","displayZoomButtons":false,"wmode":"opaque","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},"width":609,"height":320},"state":{},"view":{},"chartType":"AnnotatedTimeLine","chartName":"Chart 2"} </script> <div> Source: Eurostat. Monthly growth rate of production volume index on year-ago level (seasonally adjusted). 3-month moving average. </div> </div> <div id="bar-chart" style="width:650px;"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AhJS2rfBAT8JdFJveVd5ZG5YZlFhek00NVlISml1R0E&transpose=0&headers=1&range=A1%3AB100&gid=2&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":null,"minValue":null,"logScale":false,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"logScale":false,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"bold":true,"color":"#000","fontSize":16},"booleanRole":"certainty","title":"Growth rate as of November 2012","animation":{"duration":0},"legend":"right","hAxis":{"useFormatFromData":true,"minValue":null,"viewWindowMode":null,"viewWindow":null,"maxValue":null},"isStacked":false,"width":1115,"height":543},"state":{},"view":{},"chartType":"ColumnChart","chartName":"Chart 2"} </script> </div> <div id="commentary"> Things go up. They then come down again. They have never remained up thus far. </div> <div> Footer text here. </div> </body> </html>
https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js
https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js