Last active
April 23, 2018 16:45
-
-
Save Ognami/12cf0f4edd245ac394c36f99262a53e9 to your computer and use it in GitHub Desktop.
Zooming Gradient Range Scale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "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