Skip to content

Instantly share code, notes, and snippets.

@tijhaart

tijhaart/esnextbin.md

Last active August 30, 2016 15:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tijhaart/872e0303328cf15fd99749d506861a0d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tijhaart/872e0303328cf15fd99749d506861a0d to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<style>
body {
padding: 50px !important;
font: 10px sans-serif;
}
circle {
opacity: 0.7;
}
.annotation-red {
fill: red;
}
.annotation-green {
fill: green;
}
.annotation-blue {
fill: blue;
}
.annotation-orange {
fill: orange;
}
.annotation-purple {
fill: purple;
}
.annotation-yellow {
fill: yellow;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1px;
shape-rendering: crispEdges;
}
svg {
/*position: absolute;
top: 0;
right: 0;*/
border: 1px dashed green;
overflow: visible;
}
/* svg > .x.axis {
position: relative;
top: 20px;
} */
#widget {
/* position: relative; */
width: 480px;
height: 240px;
outline: 10px solid red;
overflow: idden;
}
</style>
</head>
<body>
<!-- put markup and other contents here -->
<div id="widget"></div>
</body>
</html>
Raw
index.js
console.clear();
const d3 = require("d3");
import $ from "jquery";
// @TODO Extend with a "text"/"title"/"tooltip" property?
const dataset = [
{x: 250, y: 100, size: 200, annotations: ["annotation-green"]},
//{mahoosive: true, x: 250, y: 0, size: 1250, annotations: ["annotation-purple"]},
{x: 420, y: 90, size: 42, annotations: ["annotation-red"]},
{x: 250, y: 50, size: 80, annotations: ["annotation-blue"]},
{x: 0, y: 0, size: 10, annotations: ["annotation-yellow"]},
{x: 330, y: 95, size: 14, annotations: ["annotation-orange"]},
{x: 410, y: 12, size: 27, annotations: ["annotation-purple"]},
{x: 475, y: 44, size: 10, annotations: ["annotation-green"]},
{x: 25, y: 67, size: 10, annotations: ["annotation-red"]},
{x: 85, y: 21, size: 87, annotations: ["annotation-blue"]},
{x: 220, y: 0, size: 54, annotations: ["annotation-yellow"]},
{x: 250, y: 180, size: 100, annotations: ["annotation-orange"]},
{x: 57, y: 220, size: 28, annotations: ["annotation-purple"]},
];
let width = 480;
let height = 240;
const svg = d3.select("#widget").append('div')
.append("svg")
.attr("width", width)
.attr("height", height)
;
// Set up X axis.
const xValue = d => d.x;
const xScale = d3.scale.linear().range([0, width]);
const xMap = d => xScale(xValue(d));
const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// Set up Y axis.
const yValue = d => d.y;
const yScale = d3.scale.linear().range([height, 0]);
const yMap = d => yScale(yValue(d));
const yAxis = d3.svg.axis().scale(yScale).orient("left");
// Bubble-size functions.
const bubbleRadius = d => d.size / 2;
// Determines the scaled radius of a given bubble's size.
const rScale = (radius) => {
// Always scale by the smallest positive (via Math.abs) ratio, to ensure no bubbles are clipped.
const scalingFactor = Math.min(
// The graphable width, divided by the actual range of the X-axis data, gives the horizontal scaling ratio.
Math.abs(width / (maxX / minX)),
// The graphable height, divided by the actual range of the Y-axis data, gives the vertical scaling ratio.
Math.abs(height / (maxY - minY))
);
return radius * scalingFactor;
};
const rMap = d => rScale(bubbleRadius(d));
// Ensure bubbles are all rendered within the chart area, by setting the scales'
// domains to encompass the outermost bubble edges in the dataset. These
// scaled values are then used when positioning the bubbles.
const minX = d3.min(dataset, d => xValue(d) - bubbleRadius(d));
const maxX = d3.max(dataset, d => xValue(d) + bubbleRadius(d));
const minY = d3.min(dataset, d => yValue(d) - bubbleRadius(d));
const maxY = d3.max(dataset, d => yValue(d) + bubbleRadius(d));
xScale.domain([minX, maxX]);
yScale.domain([minY, maxY]);
// Renders the X-axis.
const renderXAxis = (svg, xAxis) => {
const axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
// .append("text")
// .attr("class", "label")
// .attr("x", width + 15)
// .attr("y", 10)
// .style("text-anchor", "end")
// .text("x")
;
let _height = axis.node().getBBox().height;
axis.attr('transform', `translate(${0}, ${height - _height})`);
};
// Renders the Y-axis.
const renderYAxis = (svg, yAxis) => {
const axis = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
// .append("text")
// .attr("class", "label")
// .attr("x", -10)
// .attr("y", -10)
// .style("text-anchor", "end")
// .text("y")
;
let _width = axis.node().getBBox().width;
axis.attr('transform', `translate(${_width}, 0)`);
xScale.range([0, width - _width]);
const ya = d3.select('.x.axis');
let _height = axis.node().getBBox().width;
ya
.call(xAxis)
.attr('transform', `translate(${_width}, ${height - _height})`);
yScale.range([0, height - _height]);
axis.call(yAxis);
};
// Renders the bubbles. My bubbles. Mine!
const renderBubbles = (svg, dataset, xMap, yMap, rMap) => {
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", d => xMap(d))
.attr("cy", d => yMap(d))
.attr("r", d => rMap(d))
.attr("class", d => d.annotations.join(" "))
.classed("bubble", true)
;
};
// Renders the bubbles' labels.
const renderLabels = (svg, dataset, xMap, yMap) => {
svg.selectAll("svg")
.data(dataset)
.enter()
.append("text")
.text(d => `(${d.x},${d.y})`)
.attr("x", d => xMap(d))
.attr("y", d => yMap(d))
;
};
// Put it all together!
renderXAxis(svg, xAxis);
// change height to account for inset axis
console.log($("svg .x.axis").get(0).getBBox().height);
renderYAxis(svg, yAxis);
console.log($("svg .y.axis").get(0).getBBox().width);
//renderBubbles(svg, dataset, xMap, yMap, rMap);
// renderLabels(svg, dataset, xMap, yMap);
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"jquery": "3.1.0",
"d3": "3.3.8"
}
}
Raw
transpiled.js
"use strict";
var _jquery = require("jquery");
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.clear();
var d3 = require("d3");
// @TODO Extend with a "text"/"title"/"tooltip" property?
var dataset = [{ x: 250, y: 100, size: 200, annotations: ["annotation-green"] },
//{mahoosive: true, x: 250, y: 0, size: 1250, annotations: ["annotation-purple"]},
{ x: 420, y: 90, size: 42, annotations: ["annotation-red"] }, { x: 250, y: 50, size: 80, annotations: ["annotation-blue"] }, { x: 0, y: 0, size: 10, annotations: ["annotation-yellow"] }, { x: 330, y: 95, size: 14, annotations: ["annotation-orange"] }, { x: 410, y: 12, size: 27, annotations: ["annotation-purple"] }, { x: 475, y: 44, size: 10, annotations: ["annotation-green"] }, { x: 25, y: 67, size: 10, annotations: ["annotation-red"] }, { x: 85, y: 21, size: 87, annotations: ["annotation-blue"] }, { x: 220, y: 0, size: 54, annotations: ["annotation-yellow"] }, { x: 250, y: 180, size: 100, annotations: ["annotation-orange"] }, { x: 57, y: 220, size: 28, annotations: ["annotation-purple"] }];
var width = 480;
var height = 240;
var svg = d3.select("#widget").append('div').append("svg").attr("width", width).attr("height", height);
// Set up X axis.
var xValue = function xValue(d) {
return d.x;
};
var xScale = d3.scale.linear().range([0, width]);
var xMap = function xMap(d) {
return xScale(xValue(d));
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// Set up Y axis.
var yValue = function yValue(d) {
return d.y;
};
var yScale = d3.scale.linear().range([height, 0]);
var yMap = function yMap(d) {
return yScale(yValue(d));
};
var yAxis = d3.svg.axis().scale(yScale).orient("left");
// Bubble-size functions.
var bubbleRadius = function bubbleRadius(d) {
return d.size / 2;
};
// Determines the scaled radius of a given bubble's size.
var rScale = function rScale(radius) {
// Always scale by the smallest positive (via Math.abs) ratio, to ensure no bubbles are clipped.
var scalingFactor = Math.min(
// The graphable width, divided by the actual range of the X-axis data, gives the horizontal scaling ratio.
Math.abs(width / (maxX / minX)),
// The graphable height, divided by the actual range of the Y-axis data, gives the vertical scaling ratio.
Math.abs(height / (maxY - minY)));
return radius * scalingFactor;
};
var rMap = function rMap(d) {
return rScale(bubbleRadius(d));
};
// Ensure bubbles are all rendered within the chart area, by setting the scales'
// domains to encompass the outermost bubble edges in the dataset. These
// scaled values are then used when positioning the bubbles.
var minX = d3.min(dataset, function (d) {
return xValue(d) - bubbleRadius(d);
});
var maxX = d3.max(dataset, function (d) {
return xValue(d) + bubbleRadius(d);
});
var minY = d3.min(dataset, function (d) {
return yValue(d) - bubbleRadius(d);
});
var maxY = d3.max(dataset, function (d) {
return yValue(d) + bubbleRadius(d);
});
xScale.domain([minX, maxX]);
yScale.domain([minY, maxY]);
// Renders the X-axis.
var renderXAxis = function renderXAxis(svg, xAxis) {
var axis = svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis)
// .append("text")
// .attr("class", "label")
// .attr("x", width + 15)
// .attr("y", 10)
// .style("text-anchor", "end")
// .text("x")
;
var _height = axis.node().getBBox().height;
axis.attr('transform', "translate(" + 0 + ", " + (height - _height) + ")");
};
// Renders the Y-axis.
var renderYAxis = function renderYAxis(svg, yAxis) {
var axis = svg.append("g").attr("class", "y axis").call(yAxis)
// .append("text")
// .attr("class", "label")
// .attr("x", -10)
// .attr("y", -10)
// .style("text-anchor", "end")
// .text("y")
;
var _width = axis.node().getBBox().width;
axis.attr('transform', "translate(" + _width + ", 0)");
xScale.range([0, width - _width]);
var ya = d3.select('.x.axis');
var _height = axis.node().getBBox().width;
ya.call(xAxis).attr('transform', "translate(" + _width + ", " + (height - _height) + ")");
yScale.range([0, height - _height]);
axis.call(yAxis);
};
// Renders the bubbles. My bubbles. Mine!
var renderBubbles = function renderBubbles(svg, dataset, xMap, yMap, rMap) {
svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", function (d) {
return xMap(d);
}).attr("cy", function (d) {
return yMap(d);
}).attr("r", function (d) {
return rMap(d);
}).attr("class", function (d) {
return d.annotations.join(" ");
}).classed("bubble", true);
};
// Renders the bubbles' labels.
var renderLabels = function renderLabels(svg, dataset, xMap, yMap) {
svg.selectAll("svg").data(dataset).enter().append("text").text(function (d) {
return "(" + d.x + "," + d.y + ")";
}).attr("x", function (d) {
return xMap(d);
}).attr("y", function (d) {
return yMap(d);
});
};
// Put it all together!
renderXAxis(svg, xAxis);
// change height to account for inset axis
console.log((0, _jquery2.default)("svg .x.axis").get(0).getBBox().height);
renderYAxis(svg, yAxis);
console.log((0, _jquery2.default)("svg .y.axis").get(0).getBBox().width);
//renderBubbles(svg, dataset, xMap, yMap, rMap);
// renderLabels(svg, dataset, xMap, yMap);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment