Skip to content

Instantly share code, notes, and snippets.

@N0taN3rd

N0taN3rd/README.md

Created February 9, 2016 21:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save N0taN3rd/9b23673c0786fa5b1a75 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save N0taN3rd/9b23673c0786fa5b1a75 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="first">
</div>
<br>
<div id="second">
</div>
<br>
<div id="third">
</div>
<div id="fourth">
<p>Click on this text to update the chart with new data values (once).</p>
</div>
<script>
function first() {
var dataset = Array.apply(null, {length: 25})
.map(function () {
return Math.round(Math.random() * 30);
});
d3.select("#first").selectAll("div")
.data(dataset) // <-- The answer is here!
.enter()
.append("div")
.attr("class", "bar")
.style("height", function (d) {
var barHeight = d * 5;
return barHeight + "px";
});
return dataset;
}
function second(dataset) {
var w = 500;
var h = 150;
var barPadding = 1;
var svg = d3.select("#second")
.append("svg")
.attr("width", w) // <-- Here
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i * (w / dataset.length);
})
.attr("y", function (d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {
return d * 4;
})
.attr("fill", function (d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function (d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function (d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
}
function third() {
var w = 500;
var h = 300;
var padding = 30;
var numDataPoints = 50; //Number of dummy data points to create
var xRange = Math.random() * 1000; //Max range of new x values
var yRange = Math.random() * 1000; //Max range of new y values
var dataset = Array.apply(null, {length: numDataPoints})
.map(function () {
return [Math.round(Math.random() * xRange),
Math.round(Math.random() * yRange)]
});
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[0];
})])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([2, 5]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//.tickFormat(formatAsPercentage);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//.tickFormat(formatAsPercentage);
//Create SVG element
var svg = d3.select("#third")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(d[0]);
})
.attr("cy", function (d) {
return yScale(d[1]);
})
.attr("r", function (d) {
return rScale(d[1]);
});
/*
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
*/
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
}
function fourth() {
var w = 500;
var h = 300;
var padding = 30;
var numDataPoints = 50; //Number of dummy data points to create
var xRange = Math.random() * 1000; //Max range of new x values
var yRange = Math.random() * 1000; //Max range of new y values
var dataset = Array.apply(null, {length: numDataPoints})
.map(function () {
return [Math.round(Math.random() * xRange),
Math.round(Math.random() * yRange)]
});
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[0];
})])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d[1];
})])
.range([2, 5]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("#fourth")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.append("clipPath")
.attr("id", "chart-area")
.append("rect")
.attr("x", padding)
.attr("y", padding)
.attr("width", w - padding * 3)
.attr("height", h - padding * 2);
svg.append("g")
.attr("id", "circles")
.attr("clip-path", "url(#chart-area)")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(d[0]);
})
.attr("cy", function (d) {
return yScale(d[1]);
})
.attr("r", function (d) {
return rScale(d[1]);
});
console.log("HI");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
d3.select("p")
.on("click", function () {
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.each("start", function () {
d3.select(this)
.attr("fill", "magenta")
.attr("r", 6);
})
.attr("cx", function (d) {
return xScale(d[0]);
})
.attr("cy", function (d) {
return yScale(d[1]);
})
.each("end", function () {
d3.select(this)
.transition()
.duration(1000)
.attr("fill", "black")
.attr("r", 2);
});
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
}
second(first());
third();
fourth();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment