Skip to content

Instantly share code, notes, and snippets.

@steveharoz

steveharoz/Readme.md

Last active August 29, 2015 14:18
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 steveharoz/5f25cee9e6ee934bc25d to your computer and use it in GitHub Desktop.
Save steveharoz/5f25cee9e6ee934bc25d to your computer and use it in GitHub Desktop.
Download ZIP
Swapping Bars - d3 with TypeScript
Raw
Readme.md

Just a simple test of visualizing some simple data with d3 using TypeScript

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Swapping Bars</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="main.js"></script>
</head>
<body style="background:black">
<div id="content"></div>
</body>
</html>
Raw
main.js
/// <reference path="Scripts/typings/d3/d3.d.ts" />
// javascript style declarations:
var chart = {
width: 960,
height: 500,
margins: { x: 300, y: 50 }
};
var bar = {
width: 55,
height: 65,
spacing: 20
};
// animation properties
var animation = {
duration: 400,
pauseDuration: 400
};
// simple data to visualize
var Datum = (function () {
function Datum() {
}
return Datum;
})();
var data = [
{ value: 4, range: 1, angle: 45, color: '#377eb8', width: 1 },
{ value: 2, range: 2, angle: 315, color: '#4daf4a', width: 0.6 },
{ value: 5, range: 2, angle: 90, color: '#ff7f00', width: 0.8 },
{ value: 3, range: 1, angle: 180, color: '#e41a1c', width: 0.4 },
{ value: 1, range: 0.5, angle: 225, color: '#984ea3', width: 0.9 },
{ value: 2.5, range: 1, angle: 270, color: '#f781bf', width: 0.7 }
];
// apply settings for the rectangles
// lose type safety and code completion here because Selection and Transition are incompatible (grrr!)
function render(selection) {
selection.attr('width', function (d, i) { return d.width * bar.width; }).attr('height', function (d, i) { return d.range * bar.height; }).attr('fill', function (d, i) { return d.color; }).attr('transform', function (d, i) { return 'translate(' + [chart.margins.x + i * (bar.width + bar.spacing), -chart.margins.y + chart.height - d.value * bar.height] + ') ' + 'rotate(' + [(d.angle)] + ')' + 'translate(' + [-bar.width / 2, -d.range / 2] + ')'; });
}
window.onload = function () {
// make the svg
var svg = d3.select('#content').append('svg');
svg.attr('width', chart.width).attr('height', chart.height).style('background', 'white');
// initialize rectangles
var rects = svg.selectAll('rect').data(data).enter().append('rect');
render(rects);
// start timer
setInterval(function () {
data = d3.shuffle(data);
// apply the data to the rectangles
var rects = svg.selectAll('rect').data(data);
// create rectangles that were added
render(rects.enter().append('rect'));
// update rectangles that changed
render(rects.transition().duration(animation.duration));
// remove deleted rectangles
rects.exit().remove();
}, animation.duration + animation.pauseDuration);
};
//# sourceMappingURL=main.js.map
Raw
main.ts
/// <reference path="Scripts/typings/d3/d3.d.ts" />
// javascript style declarations:
var chart = {
width: 960,
height: 500,
margins: {x:300, y:50}
}
var bar = {
width: 55,
height: 65,
spacing: 20
}
// animation properties
var animation = {
duration: 400,
pauseDuration: 400
}
// simple data to visualize
class Datum {
value: number;
range: number;
width: number;
angle: number;
color: string;
}
var data: Datum[] = [
{ value: 4, range: 1, angle: 45, color: '#377eb8', width: 1 },
{ value: 2, range: 2, angle: 315, color: '#4daf4a', width: 0.6 },
{ value: 5, range: 2, angle: 90, color: '#ff7f00', width: 0.8 },
{ value: 3, range: 1, angle: 180, color: '#e41a1c', width: 0.4 },
{ value: 1, range: 0.5, angle: 225, color: '#984ea3', width: 0.9 },
{ value: 2.5, range: 1, angle: 270, color: '#f781bf', width: 0.7 }];
// apply settings for the rectangles
// lose type safety and code completion here because Selection and Transition are incompatible (grrr!)
function render(selection: any) {
selection
.attr('width',(d, i) => d.width * bar.width)
.attr('height',(d, i) => d.range * bar.height)
.attr('fill',(d, i) => d.color)
.attr('transform',(d, i) =>
'translate(' + [chart.margins.x + i * (bar.width + bar.spacing), -chart.margins.y + chart.height - d.value*bar.height] + ') ' +
'rotate(' + [(d.angle)] + ')' +
'translate(' + [-bar.width / 2, -d.range / 2] + ')'
);
}
window.onload = () => {
// make the svg
var svg = d3.select('#content').append('svg');
svg.attr('width', chart.width)
.attr('height', chart.height)
.style('background', 'white');
// initialize rectangles
var rects = svg.selectAll('rect')
.data(data)
.enter()
.append('rect');
render(rects);
// start timer
setInterval(() => {
data = d3.shuffle(data);
// apply the data to the rectangles
var rects = svg.selectAll('rect')
.data(data);
// create rectangles that were added
render(rects.enter().append('rect'));
// update rectangles that changed
render(rects.transition().duration(animation.duration));
// remove deleted rectangles
rects.exit().remove();
}, animation.duration + animation.pauseDuration);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment