D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
azywong
Full window
Github gist
test data
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="chart.js"></script> <style> #chart-canvas { position: absolute; z-index: 1; } #events-canvas { position: relative; top: 0px; left: 0px; z-index: 2; } .hidden { display: none; } #plot { position: relative; } </style> </head> <body> <button type="button" onclick="taskResponse.realCentroid()">Click for real answer!</button> Dataset Select: <select id="dataset"> <option value="test1.csv">1</option> <option value="test2.csv">2</option> <option value="test3.csv">3</option> <option value="test4.csv">4</option> <option value="test5.csv">5</option> <option value="test6.csv">6</option> <option value="test7.csv">7</option> <option value="test8.csv">8</option> <option value="easy.csv">easy</option> <option value="train1.csv">t1</option> <option value="train2.csv">t2</option> </select> <div id="plot"></div> <div id="warning" style="color:red">Warning: The "Next" button will only be enabled when your centroid region is on the plot.</div> <script> var taskResponse; var drawChart = function () { var dataset = this.value if (!dataset) { dataset = "test1.csv" } else { taskResponse.stop(); var plotElem = document.getElementById("plot"); plotElem.innerHTML = "" } d3.csv(dataset, function (d) { d.xDom = +d.xDom; d.yDom = +d.yDom; return d; }, function (err, data) { if (err) {console.log(err)} taskResponse = chart() .width(600) .height(600) .pointType("solid") .xDomain("xDom") .yDomain("yDom") .zDomain("class") .autoPlay(true) .animationSpeed(85) .tutorial(true) .colorScheme(2) d3.select("#plot") .datum(data) .call(taskResponse) }); } var selector = document.getElementById("dataset"); selector.addEventListener("change", drawChart) drawChart() </script> </body>
https://d3js.org/d3.v4.min.js