Skip to content

Instantly share code, notes, and snippets.

@katogiso

katogiso/d3js_image_viewer_index.html

Created September 13, 2016 15:03
Show Gist options
  • Save katogiso/4949d73ae0db666dc99dac1900daa971 to your computer and use it in GitHub Desktop.
Save katogiso/4949d73ae0db666dc99dac1900daa971 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3js_image_viewer_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is sample page</title>
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
<script>
var svg = d3.select("body").append("svg");
var width = 960;
var height = 500;
var rect_w = 10;
var g = svg.append("g");
var img_data = {
header: {
type: "raw"
},
size: {
x: 8,
y: 2,
},
data: [
{
value: 1,
attr: "sample"
},
{
value: 2,
attr: "sample"
},
{
value: 3,
attr: "sample"
},
{
value: 4,
attr: "sample"
},
{
value: 5,
attr: "sample"
},
{
value: 6,
attr: "sample"
},
{
value: 7,
attr: "sample"
},
{
value: 8,
attr: "sample"
},
{
value: 1,
attr: "sample"
},
{
value: 2,
attr: "sample"
},
{
value: 3,
attr: "sample"
},
{
value: 4,
attr: "sample"
},
{
value: 5,
attr: "sample"
},
{
value: 6,
attr: "sample"
},
{
value: 7,
attr: "sample"
},
{
value: 8,
attr: "sample"
},
]
};
g.selectAll("rect")
.data(img_data.data)
.enter()
.append("rect")
.attr("x" , function(d,i){ return parseInt(i % img_data.size.x ) * rect_w } )
.attr("y" , function(d,i){ return parseInt(i / img_data.size.x ) * rect_w } )
.attr("width" , function(d,i){ return rect_w } )
.attr("height", function(d,i){ return rect_w } );
svg.append("rect")
.attr("width" , width)
.attr("height", height)
.style("fill" , "none")
.style("pointer-events", "all")
.call(d3.zoom().scaleExtent([1 / 2, 4]).on("zoom", zoomed));
function zoomed() {
g.attr("transform", d3.event.transform);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment