Skip to content

Instantly share code, notes, and snippets.

@timmarinin

timmarinin/README.md

Last active March 17, 2017 03:45
Show Gist options
  • Save timmarinin/5078cc15978bf66248f1da7074870675 to your computer and use it in GitHub Desktop.
Save timmarinin/5078cc15978bf66248f1da7074870675 to your computer and use it in GitHub Desktop.
Download ZIP
Open source viability
Raw
README.md
Raw
index.html
<!doctype html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script>
var data = [
{label: "PocketCasts", x: 0.99, y: 0.01},
{label: "HAProxy", x: 0.1, y: 0.9},
{label: "Nginx", x: 0.2, y: 0.87},
{label: "macOS", x: 0.80, y: 0.2},
{label: "GNU coreutils", x: 0.25, y: 0.85},
{label: "Mokum", x: 0.9, y: 0.1},
{label: "Emacs", x: 0.4, y: 0.9},
{label: "VK", x: 0.9, y: 0.15}
]
var margin = {top: 20, right: 70, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
console.log(margin, width, height)
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var svg = d3.select("body").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 + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Sepal Width (cm)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Sepal Length (cm)")
x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.y; })).nice();
var points = svg.selectAll(".dot")
.data(data)
.enter()
var dots = points.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.style("fill", function(d) { return color(d.label); })
var labels = points
.append("text")
.attr("x", d => x(d.x) + 10)
.attr("y", d => y(d.y) + 3)
.text(function(d) { console.log(d); return d.label; });
</script>
<style>
body {
font: 11px sans-serif;
}
</style>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment