D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
ruspini data, d3js, scatterplot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Scatterplot! - Ruspini data fuzzy clustering</title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <style type="text/css"> body { background-color: #ccc; } .buttonContainer { margin: 10px; } svg { background-color: white; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <script type="text/javascript"> var w = 960; var h = 500; var padding = 40; var dataset; d3.json("ruspini.json", function(error, json) { if (error) return console.warn(error); dataset = json; // visualizeit(); //Create scale functions var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.x; })]) .range([padding, w - padding]); var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.y; })]) .range([h - padding, padding]); //Define X axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(5); //Define Y axis var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Create circles svg.append("g") .attr("id", "circles") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.x); }) .attr("cy", function(d) { return yScale(d.y); }) .attr("r", 2); //Create X axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding + 5) + ")") .call(xAxis); //Create Y axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding - 5) + ",0)") .call(yAxis); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js