Skip to content

Instantly share code, notes, and snippets.

@Ognami

Ognami/index.html

Last active April 23, 2018 16:45
Show Gist options
  • Save Ognami/12cf0f4edd245ac394c36f99262a53e9 to your computer and use it in GitHub Desktop.
Save Ognami/12cf0f4edd245ac394c36f99262a53e9 to your computer and use it in GitHub Desktop.
Download ZIP
Zooming Gradient Range Scale
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>Gradient Range</title>
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#chart {
background: #eee;
display: block;
}
#colorBar {
fill: url(#gradient);
}
text {
font-size: $font-size-s;
}
</style>
</head>
<body>
<div id="viz-wrapper">
<svg id="chart">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0.0%" stop-color="red"></stop>
<stop offset="50.5%" stop-color="#ccc"></stop>
<stop offset="100.0%" stop-color="green"></stop>
</linearGradient>
<clipPath id="gradientClip"></clipPath>
</defs>
</svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Chart related script -->
<script>
/***** Initial set up *****/
var portHeight = window.innerHeight,
portWidth = window.innerWidth,
spacer = 20,
height = portHeight - (spacer*2),
width = portWidth - (spacer*2);
//Containers
var svg = d3.select("#chart")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate( " + spacer + "," + spacer + ")");
//Scales
var rangeScale = d3.scaleLinear()
.domain([-1, 1])
.range([0,width]);
var colorScale = d3.scaleLinear()
.domain([-1, 0, 1])
.range(["red", "white", "green"]);
/**** Axes ****/
//gradient clip
var gradientClip = svg.select("#gradientClip")
.append("rect")
.attr("width", width)
.attr("height", 20);
//gradient bar
var gradientScale = svg.append("rect")
.attr("id", "colorBar")
.attr("transform", "translate( 0 , " + (height - spacer*3) + ")")
.attr("width", width)
.attr("height", 20)
.attr("clip-path","url(#gradientClip)");
//text axis
var xAxis = d3.axisBottom(rangeScale);
var axis = svg.append("g")
.attr("transform", "translate( 0 , " + (height - spacer*2) + ")")
.attr("class", "axis")
.call(xAxis);
var url = "sample-demo.json";
getData(url);
//get chart data
function getData(url){
d3.json(url, function (error, data) {
if (error) throw error;
drawChart(data);
});
}
/***** Draw Chart *****/
function drawChart(raw){
//make the plot container
var plotLane = svg.append("g")
.attr("transform", "translate( 0 , " + (height - spacer*5) + ")")
.attr("class", "lane");
//plot the data
console.log(raw);
var plotDots = plotLane.selectAll('circle')
.data(raw)
.enter()
.append('circle')
.attr('cx', function(d) {
return rangeScale(d.scale);
})
//.attr('cy', 5)
.attr('r', 6)
.attr("id", function(d){
return "id-"+d.wdt_ID
})
.attr("fill", function(d){
return colorScale(d.scale);
});
//zoooom behaviors
var zoom = d3.zoom()
.on("zoom", zoomed);
function zoomed() {
var t = d3.event.transform, xt = t.rescaleX(rangeScale);
console.log(d3.event.transform);
//zoom the gradient
gradientScale.attr("transform", "translate( " +d3.event.transform.x+ " , " + (height - spacer*3) + ") scale("+d3.event.transform.k+")");
plotLane.selectAll("circle")
.attr("cx", function(d) {
return xt(d.scale);
});
svg.select(".axis").call(xAxis.scale(xt));
}
svg.call(zoom);
}
</script>
</body>
</html>
Raw
sample-demo.json
[
{
"wdt_ID":"1",
"name":"Person NameA",
"scale":"-0.9"
},
{
"wdt_ID":"2",
"name":"Person NameA",
"scale":"-0.2"
},
{
"wdt_ID":"3",
"name":"Person NameA",
"scale":"-0.4"
},
{
"wdt_ID":"4",
"name":"Person NameA",
"scale":"-0.6"
},
{
"wdt_ID":"5",
"name":"Person NameA",
"scale":"-0.8"
},
{
"wdt_ID":"6",
"name":"Person NameA",
"scale":"-1"
},
{
"wdt_ID":"7",
"name":"Person NameA",
"scale":"0.2"
},
{
"wdt_ID":"8",
"name":"Person NameA",
"scale":"-0.3"
},
{
"wdt_ID":"9",
"name":"Person NameA",
"scale":"-0.5"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment