Skip to content

Instantly share code, notes, and snippets.

@alandunning

alandunning/.block

Last active March 5, 2017 02:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alandunning/da38ce364b9347df04e60fa30c5f87b4 to your computer and use it in GitHub Desktop.
Save alandunning/da38ce364b9347df04e60fa30c5f87b4 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Positioned Scatter V4
Raw
.block
license: mit
Raw
data.json
[
{
"industry": "3D Printing",
"total": 8.3411,
"xPos": 60,
"yPos": 23,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "AdTech",
"total": 16.0819,
"xPos": 18,
"yPos": 60,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "AgTech",
"total": 0.3566,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Artificial Intelligence & Machine Learning",
"total": 0.04,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "AudioTech",
"total": 9.4284,
"xPos": 40,
"yPos": 20,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Big Data",
"total": 22.6447,
"xPos": 60,
"yPos": 75,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "CleanTech",
"total": 4.1935,
"xPos": 65,
"yPos": 45,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Cybersecurity",
"total": 33.0743,
"xPos": 25,
"yPos": 70,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "E-Commerce",
"total": 277.0109,
"xPos": 30,
"yPos": 40,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "EdTech",
"total": 1.9656,
"xPos": 35,
"yPos": 95,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Fin Tech",
"total": 248.9109,
"xPos": 45,
"yPos": 75,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "HealthTech",
"total": 3.8372,
"xPos": 68,
"yPos": 55,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Infrastructure",
"total": 6.3,
"xPos": 58,
"yPos": 15,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Internet of Things",
"total": 7.6794,
"xPos": 58,
"yPos": 85,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Life Sciences",
"total": 0.4547,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Manufacturing",
"total": 14.3359,
"xPos": 61,
"yPos": 33,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Marketing Tech",
"total": 20.0781,
"xPos": 30,
"yPos": 85,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Mobile",
"total": 62.3542,
"xPos": 60,
"yPos": 55,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Nano-technology",
"total": 4.69,
"xPos": 64,
"yPos": 67,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Oncology",
"total": 0.02,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Robotics and Drones",
"total": 1.0177,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "SaaS",
"total": 105.0308,
"xPos": 50,
"yPos": 25,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Virtual Reality",
"total": 12.0767,
"xPos": 45,
"yPos": 13,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
},
{
"industry": "Wearables & Quantified Self",
"total": 0.07,
"xPos": 50,
"yPos": 50,
"question": "Activity One",
"answer": "Some answer",
"value": 5,
"consequence": 1
}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="scatter"></div>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 960 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var domainwidth = width - margin.left - margin.right;
var domainheight = height - margin.top - margin.bottom;
var svg = d3.select("#scatter").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(responsivefy)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var radius = d3.scaleLinear()
.domain([0, 280])
.range([10, 100]);
var color = d3.scaleOrdinal(["#FA8334", "#AFFC41", "#19647E", "#7FDDDD", "#949396", "#DCF763", "#00C6D0", "#C1C1C1", "#666666", "#FDCDAE"]);
var x = d3.scaleLinear()
.range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
.range(padExtent([domainheight, 0]));
d3.json("data.json", function(error, data) {
console.log(data)
data.sort(function(x, y){
return d3.ascending(x.total, y.total);
})
console.log(data)
if (error) throw error;
data.forEach(function(d) {
d.consequence = +d.consequence;
d.value = +d.value;
d.total = +d.total;
});
x.domain(padExtent([0, 100]));
y.domain(padExtent([0, 100]));
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", "dot")
.style('fill', function (d, i) { return color(d.industry); })
.attr("r", function(d) { return radius(d.total); })
.attr("cx", function(d) { return x(d.xPos); })
.attr("cy", function(d) { return y(d.yPos); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y.range()[0] + ")")
.call(d3.axisBottom(x).ticks(5));
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y).ticks(5));
});
function padExtent(e, p) {
if (p === undefined) p = 1;
return ([e[0] - p, e[1] + p]);
}
function responsivefy(svg) {
var container = d3.select(svg.node().parentNode);
var width = parseInt(svg.style("width"));
var height = parseInt(svg.style("height"));
var aspect = width / height;
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
d3.select(window).on("resize." + container.attr("id"), resize);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment