Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/emilyhunt/open-cluster-plotter. Interactive online plotting tool for open cluster membership lists based on d3.js.
Something went wrong. Try again.
open-cluster-plotter index.html
3.0 kB · 104 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>The Open Cluster Plotting Tool</title></head><body>
<h1>The Open Cluster Plotting Tool</h1><p>Interactive plots of open cluster membership lists based on data from Gaia and beyond!</p>
<!DOCTYPE html>
<!-- Create a div where the graph will take place --><div id="my_dataviz3"></div>
<!-- Load d3.js --><script src="https://d3js.org/d3.v6.min.js"></script>
<script>
// set the dimensions and margins of the graph const margin = {top: 10, right: 30, bottom: 40, left: 50}, width = 520 - margin.left - margin.right, height = 520 - margin.top - margin.bottom;
// append the SVg object to the body of the page const svg = d3.select("#my_dataviz3") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// Add the black box around the chart svg .append("rect") .attr("x",0) .attr("y",0) .attr("height", height) .attr("width", height) .style("fill", "none") .style("stroke", "black")
//Read the data d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {
// Add X axis const x = d3.scaleLinear() .domain([4, 8]) .range([ 0, width ]); svg.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x));
// Add Y axis const y = d3.scaleLinear() .domain([0, 8]) .range([ height, 0]) .nice(); svg.append("g") .call(d3.axisLeft(y));
// Add X axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", width) .attr("y", height + margin.top + 20) .text("Sepal Length");
// Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("y", -margin.left+20) .attr("x", -margin.top) .text("Petal Length")
// Shape scale: give a specie, it gives a shape const shape = d3.scaleOrdinal() .domain(["setosa", "versicolor", "virginica" ]) .range([ d3.symbolCircle, d3.symbolTriangle, d3.symbolSquare])
// Add dots svg.append('g') .selectAll("dot") .data(data) .enter() .append("path") .attr("d", d3.symbol() .size(120) .type(function(d) { return shape(d.Species) }) ) .attr("transform", function(d) { return "translate(" + x(d.Sepal_Length) + "," + y(d.Petal_Length) + ")"; }) .style("fill", "black") .style("opacity", 0.8)
})
</script>
</body></html>