d3 highcharts

function renderGraph(xmin, xmax, ymin, ymax){ var chart = new Highcharts.Chart({ xAxis: { min: xmin, max: xmax }, yAxis: { min: ymin, max: ymax }, chart: { renderTo: "graph-container", }, title: { text: null }, credits: { enabled: false} });}

http://stackoverflow.com/questions/15184103/highcharts-set-y-axis-max-and-min-dynamically-and-not-at-creation

chart.yAxis[0].update({ max: 100 }); chart.xAxis[0].update({ max: 150 });

setExtremes is the best way to go about it.

chart.yAxis[0].setExtremes(100,300);

If one wants to just set minimum then chart.yAxis[0].setExtremes(100,null); worked for me.

CSV processing

http://api.highcharts.com/highcharts#data CSV

http://stackoverflow.com/questions/29129684/reading-uploaded-csv-file-in-highcharts

http://stackoverflow.com/questions/21409505/file-loading-a-csv-file-into-highcharts

http://blog.scottlogic.com/2015/07/08/yahoo-finance-chart.html with D3 and D3FC

http://www.aspsnippets.com/Articles/Read-Parse-and-display-CSV-Text-file-using-JavaScript-jQuery-and-HTML5.aspx

http://www.webhostingtalk.com/showthread.php?t=1227736

https://github.com/mikesall/charted

http://raw.densitydesign.org/

http://papaparse.com/

http://www.reddit.com/r/d3js

https://medium.com/d3js-tutorials

(Bokeh [server side], glumpy [high performance viz], spyre [R-Shiny like dashboards],

https://mpld3.github.io/index.html matplotlib+d3

http://plottablejs.org/

https://medium.com/@clayallsopp/plottable-101-easy-chart-components-in-javascript-e62ac16f60f6

http://tryolabs.github.io/nvd3-tags/

https://github.com/billautomata/d3js_design_patterns/blob/master/volume-1.md

http://smoothiecharts.org/ streaming charts

http://www.reddit.com/r/javascript/comments/38hg2s/whats_the_best_beginner_resource_to_learn_d3js/

http://roadtolarissa.com/data-exploration/

http://learnjsdata.com/

http://learnjsdata.com/read_data.html

https://engineering.eventbrite.com/d3-js-resources-to-level-up/

http://www.designyourway.net/blog/jquery/making-better-charts-and-graphs-is-easy-with-one-of-these-javascript-libraries/

https://keen.io/blog/114588771746/introducing-data-explorer

https://realpython.com/blog/python/flask-by-example-custom-angular-directive-with-D3/

http://matthewgladney.com/blog/data-science/using-dynamic-data-and-making-reusable-d3-js-charts/

http://busypeoples.github.io/post/reusable-chart-components-with-angular-d3-js/

http://blog.thousandeyes.com/integrating-testing-reusable-d3-components-angularjs-environment/

http://jonsadka.com/blog/how-to-create-live-updating-and-flexible-d3-line-charts-using-pseudo-data/

http://big-elephants.com/2014-06/unrolling-line-charts-d3js/

http://puppydev.com/2015-04-13/d3-js-layout-tutorials-treemap-partition-and-pack

VEGA

http://vega.github.io/

https://groups.google.com/forum/#!topic/vega-js/isypPArSq_U

https://news.ycombinator.com/item?id=10176595

DataLib

http://vega.github.io/datalib/

Datalib is a JavaScript data utility library. It provides facilities for data loading, type inference, common statistics, and string templates. This includes:

- Loading and parsing data files (JSON, TopoJSON, CSV, TSV).
- Summary statistics (mean, deviation, median, correlation, histograms, etc.).
- Group-by aggregation queries, including streaming data support.
- Data-driven string templates with expressive formatting filters.
- Utilities for working with JavaScript functions, objects and arrays.

http://trifacta.github.io/vega/

Vincent

http://vincent.readthedocs.org/en/latest/index.html

http://habrahabr.ru/post/198974/ Строим простую картограмму Pandas+Vincent

http://www.taucharts.com/

http://mtmacdonald.github.io/peek/index.html

https://ecomfe.github.io/echarts/index-en.html Echarts based on canvas

http://www.svenkreiss.com/databench/v0.3/ +Flask

http://raw.densitydesign.org/

http://learnjsdata.com/

https://news.ycombinator.com/item?id=8615491 Lyra

https://www.statwing.com/docs/api

http://metricsgraphicsjs.org/

https://news.ycombinator.com/item?id=8607366

https://github.com/densitydesign/raw

https://github.com/NathanEpstein/D3xter

http://plottablejs.org/examples/

https://news.ycombinator.com/item?id=8232901

http://c3js.org/

http://zeroviscosity.com/category/d3-js-step-by-step

http://roadtolarissa.com/blog/2014/06/23/even-fewer-lamdas-with-d3/

http://sxywu.github.io/d3intro/

http://datacratic.com/site/blog/visualizing-high-dimensional-data-browser-svd-t-sne-and-threejs

http://bocoup.com/weblog/d3js-and-canvas/

http://ruoyusun.com/2014/05/26/what-d3js-is-not.html

http://www.delimited.io/blog/2013/11/18/using-illustrator-svg-files-in-d3

http://bost.ocks.org/mike/algorithms/

https://news.ycombinator.com/item?id=7948560 Epoch.js and others

http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs

http://krispo.github.io/angular-nvd3/#/

https://github.com/alexandersimoes/d3plus D3plus

http://uwdata.github.io/d3-tutorials/#/

FloorPlan

http://habrahabr.ru/company/arcadia/blog/251335/

http://www.reddit.com/r/javascript/comments/2c76u0/looking_for_a_graphics_library/

http://habrahabr.ru/post/127994/ Interactive Map

http://tweededbadger.github.io/examples/svg_maps/

http://maori.geek.nz/post/tips_tricks_and_tools_for_creating_and_working_with_maps_in_d3_js

http://www.reddit.com/r/javascript/comments/28wbhi/d3js_tips_tricks_and_tools_for_creating_and/

http://responsivenews.co.uk/post/87988072178/building-a-responsive-svg-map

http://justinchmura.com/2014/06/16/using-angularjs-esri-javascript-api/

http://www.delimited.io/blog/2014/5/10/maps-with-d3js-threejs-and-mapbox

http://bl.ocks.org/phil-pedruco/9298880

http://www.nwoods.com/index.htm

https://github.com/dciarletta/d3-floorplan/

http://stackoverflow.com/questions/17300848/draw-rect-according-to-json-array

http://jsfiddle.net/barney/kBvsr/

canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg.

However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.

https://news.ycombinator.com/item?id=7961928

SVG

http://css-tricks.com/mega-list-svg-information/

http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

https://github.com/indus/VLEX

http://jonibologna.com/a-look-at-preserveaspectratio-in-svg/

http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

http://tavendo.com/blog/post/super-vector-graphics/

http://jonibologna.com/svg-viewbox-and-viewport/

http://www.onextrapixel.com/2014/05/27/all-you-need-to-know-about-svg-tutorials-articles-resources/

http://tutorials.jenkov.com/svg/svg-and-css.html

http://tutorials.jenkov.com/svg/svg-element.html nesting SVG

All shapes nested inside an svg element will be positioned (x, y) relative to the position (x, y) of its enclosing svg element. By moving the x and y coordinates of the enclosing svg element, you move all the nested shapes too.

http://www.sitepoint.com/add-svg-to-web-page/

http://www.petercollingridge.co.uk/book/export/html/437 Zoom

http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

http://stackoverflow.com/questions/9093961/how-does-setting-viewbox-attribute-affects-the-user-coordiantes

http://css-tricks.com/links-inline-svg-staying-target-events/

http://css-tricks.com/animating-svg-css/

http://www.reddit.com/r/javascript/comments/25fux0/how_can_i_build_a_drag_and_drop_grid_like_this/

SVG TOOLTIP

title tooltip is very slow

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

http://www.markhansen.co.nz/stolen-vehicles-pt2/ (see source code)

http://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic/10643523#10643523

http://stackoverflow.com/questions/102457/how-to-create-an-svg-tooltip-like-box/105636#105636

mouseover/mouseout can be used to generate tooltip

http://qtip2.com/demos

https://github.com/shawnbot/d3-bootstrap

https://github.com/Caged/d3-tip

<h2> SVG rounded rectangle with link</h2>

<svg version="1.1" width="300" height="200" aria-labelledby="title desc">

<title id="title">Green rectangle</title>

<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>

<a xlink:href="http://example.com">

<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" />

<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>

</a>

</svg>

http://www.codeproject.com/Articles/609052/Simple-HTML-SVG-Move-and-Resize-Tool

http://www.codeproject.com/Articles/762201/Adjusting-your-websites-to-fit-all-types-of-resolu

http://stackoverflow.com/questions/9017204/inline-svg-alignment-in-html

http://stackoverflow.com/questions/20539196/creating-svg-elements-dynamically-with-javascript-inside-html

http://w3.eleqtriq.com/2014/02/everything-is-relative-the-art-of-the-adaptive-image/

http://w3.eleqtriq.com/2014/02/the-4-slice-scaling-technique-for-svg/

http://www.itk.ilstu.edu/faculty/javila/svg/SVG_Drawing3/mouse_events.htm

http://rvlasveld.github.io/blog/2013/07/12/creating-interactive-graphs-with-svg-part-2/

http://www.pencilscoop.com/2014/04/injecting-svg-with-javascript/

http://cantina.co/understanding-how-svgs-viewbox-changes-the-way-content-is-displayed/

http://stackoverflow.com/questions/6725288/svg-text-inside-rect

http://stackoverflow.com/questions/479591/svg-positioning

http://www.w3.org/TR/SVG11/coords.html

http://stackoverflow.com/questions/14265112/d3-js-map-svg-auto-fit-into-parent-container-and-resize-with-window

http://stackoverflow.com/questions/9381784/autoscaling-an-svg-embedded-in-html-on-window-resize

http://learnsvg.com/

http://css.yoksel.ru/svg/

http://css.yoksel.ru/svg-shapes/

http://css.yoksel.ru/svg-decoration/

https://github.com/indus/VLEX

SVG libs

http://snapsvg.io/start/

http://www.svgjs.com/

Generate SVG from JS

http://apike.ca/prog_svg_js_create.html

http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg

http://stackoverflow.com/questions/17300848/draw-rect-according-to-json-array

http://stackoverflow.com/questions/20539196/creating-svg-elements-dynamically-with-javascript-inside-html

https://www.dashingd3js.com/creating-svg-elements-based-on-data

http://www.sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/

http://jbkflex.wordpress.com/2011/06/21/creating-dynamic-svg-elements-in-javascript/

http://www.raymondcamden.com/index.cfm/2013/2/5/Playing-with-SVG-and-JavaScript

http://www.ibm.com/developerworks/library/?search_by=Data+visualization%2C+Part

AngularJS + SVG

http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

https://www.youtube.com/watch?v=vmJ0501WzU0 Angular+ SVG + D3

http://alexandros.resin.io/angular-d3-svg/

http://www.delimited.io/blog/2014/7/16/d3-directives-in-angularjs

http://codepen.io/netsi1964/pen/lhajz

http://stackoverflow.com/questions/22828175/angular-js-appending-element-from-controller

http://www.chrisgarvis.com/blog/screw-d3-js-bar-charts-in-angularjs.html

http://blog.akquinet.de/2014/02/20/interactive-svg-with-angularjs-part-1/

http://blog.akquinet.de/2014/02/26/interactive-svg-with-angularjs-part-2/

http://bl.ocks.org/cgarvis/7794012

http://plnkr.co/edit/yCh1Z7wbQKLY2BmQjnoU?p=preview

Here’s a live sample at JSBin I’ve made

<!DOCTYPE html>

<html>

<head>

</head>

<rect ng-repeat="item in items"

ng-attr-x="{{ $index * 33 }}"

ng-attr-y="{{ 200 - item.height }}"

ng-attr-height="{{ item.height }}"

ng-attr-fill="{{ item.color }}"

ng-click="select(item)"

width="30"/>

</svg>

<p>

Currently watching {{ selected.content }}, at {{ selected.height }}

</p>

</body>

</html>

The most important bits are that you can simply bind your data to SVG elements as in the sample:

<rect ng-repeat="item in items"

ng-attr-x="{{ $index * 33 }}"

ng-attr-y="{{ 200 - item.height }}"

ng-attr-height="{{ item.height }}"

ng-attr-fill="{{ item.color }}"

ng-click="select(item)"

width="30"/>

Javascript

angular.module('yenlo.blog', []);

angular.module('yenlo.blog').controller('ChartController', function($scope, $timeout){

$scope.items = [

{ height: 100, color: 'red', content: 'A' },

{ height: 120, color: 'green', content: 'B' },

{ height: 140, color: 'blue', content: 'C' }

];

setInterval(function(){

$scope.items.forEach(function(item){

item.height += ( Math.random() - 0.5 ) * 5;

});

$scope.$digest();

}, 100);

$scope.selected = $scope.items[0];

$scope.select = function(item){

$scope.selected = item;

};

});

Here we’re letting AngularJS iterate over all the items we’ve defined on the $scope in the JavaScript bit, and setting attributes accordingly. We could add a new item dynamically and it will get rendered. What’s also really interesting is that you can set regular event handlers on these elements,

http://sathomas.me/jsdataviz/

https://github.com/mbostock/d3/wiki/Tutorials

https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36

http://mikemcdearmon.com/portfolio/techposts/charting-libraries-using-d3

http://danasilver.org/2013/12/31/d3-github-language-stats/

http://phrogz.net/JS/d3-playground/#BlankDefault

http://www.pubnub.com/blog/create-real-time-graphs-with-pubnub-and-d3-js/

http://dry.ly/data-visualization-with-javascript-without-d3

https://news.ycombinator.com/item?id=6828168

http://habrahabr.ru/company/datalaboratory/blog/217905/

https://www.dashingd3js.com/

MatplotLib in browser