Created
January 1, 2019 13:15
-
-
Save sebahsr/2b2dd7066f3e330b35b5ea059d63b7b5 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <html> | |
| <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> | |
| <body> | |
| <div id="here" > | |
| </div> | |
| <script src="script.js"> | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var cani=true; | |
| var zplot =(function(){ | |
| function responsivefy(svg) { | |
| // get container + svg aspect ratio | |
| var container = d3.select(svg.node().parentNode), | |
| width = parseInt(svg.attr("width")), | |
| height = parseInt(svg.attr("height")), | |
| aspect = width / height; | |
| svg.attr("viewBox", "0 0 " + width + " " + height) | |
| .attr("perserveAspectRatio", "xMinYMid") | |
| .call(resize); | |
| d3.select(window).on("resize." + container.attr("id"), resize); | |
| // get width of container and resize svg to fit it | |
| function resize() { | |
| var targetWidth = parseInt(container.style("width")); | |
| svg.attr("width", targetWidth); | |
| svg.attr("height", Math.round(targetWidth / aspect)); | |
| } | |
| }; | |
| function drawSvg(parentid,obj){// this function creates the total svg space where the graph will be drawn in | |
| if (obj.width===null){ | |
| obj.width=450; | |
| } | |
| if (obj.height===null){ | |
| obj.height=450; | |
| } | |
| let w= obj.width-(obj.l+obj.r);//the length of the x-axis | |
| let h= obj.height-(obj.b+obj.t);//the length of the y axis | |
| let w1= w-obj.xaxis.linewidth;//the width of the cartesian plain | |
| let h1= h-obj.yaxis.linewidth; //the height of the cartesian plain | |
| let cc=obj.l+obj.xaxis.linewidth | |
| let svgcont = d3.select("#"+parentid) | |
| .style("position","relative"||obj.relative) | |
| .attr("class","svg-container") | |
| let svg1=svgcont | |
| .append("svg") | |
| .attr("width",obj.width) | |
| .attr("height",obj.height) | |
| .attr("class","svg-main") | |
| .style("background-color",obj.background_color) | |
| .call(responsivefy) | |
| let svg2=svg1 | |
| .append('g') | |
| .attr("class","circlerec-div") | |
| .attr("transform","translate("+cc+","+obj.t+")") | |
| .append('svg') | |
| .attr("class","circlerec-svg") | |
| .attr("width",w1) | |
| .attr("height",h1) | |
| var xScale = d3.scaleLinear().domain(obj.yaxis.range) | |
| .range([0,w]); | |
| var yScale = d3.scaleLinear().domain(obj.xaxis.range) | |
| .range([h,0]); | |
| var xscale = d3.scaleLinear() | |
| .domain(obj.xaxis.range) | |
| .range([0,w]); | |
| var yscale = d3.scaleLinear() | |
| .domain(obj.yaxis.range) | |
| .range([h,0]); | |
| var xAxis=d3.axisBottom() | |
| .scale(xscale) | |
| .ticks(obj.xaxis.showticklabels) | |
| .tickSizeOuter(obj.xaxis.showticklabels) | |
| var yAxis = d3.axisLeft() | |
| .scale(yscale) | |
| .ticks(obj.yaxis.showticklabels) | |
| .tickSizeOuter(obj.yaxis.showticklabels) | |
| let bb= obj.height-obj.b; | |
| var xAxisGroup = svg1 | |
| .append("g") | |
| .attr("class","x-axis") | |
| .attr("transform","translate("+obj.l+","+bb+")") | |
| .call(xAxis) | |
| xAxisGroup.append('g') | |
| .attr('class','text-axis') | |
| .attr("transform","translate("+w/2+","+obj.margin.t+")") | |
| .append('text') | |
| .style("font-size",obj.xaxis.titlefont.size ) | |
| .style('fill',obj.xaxis.titlefont.color) | |
| .style("text-anchor", obj.xAxis) | |
| .text(obj.xaxis.title) | |
| xAxisGroup.append('g') | |
| .attr('class','x-high') | |
| .attr('transform','translate('+(w+obj.margin.l)+','+obj.margin.t+')') | |
| .append('text') | |
| .style("font-size",obj.annotations.xhigh.font.size) | |
| .style("opacity", 1.0) | |
| .style('fill',obj.annotations.xhigh.font.color) | |
| .style("text-anchor", obj.annotations.xhigh.xyanchor) | |
| .text(obj.annotations.xhigh.text) | |
| d3.select('.x-axis') | |
| .selectAll('path') | |
| .attr('stroke-width',obj.xaxis.linewidth) | |
| .attr('stroke',obj.xaxis.linecolor) | |
| var t=obj.l-obj.margin.b; | |
| var yAxisGroup = svg1 | |
| .append("g") | |
| .attr("class","y-axis") | |
| .attr("transform","translate("+obj.l+","+obj.t+")") | |
| .call(yAxis) | |
| yAxisGroup.append('g') | |
| .attr('class','text-axis') | |
| .attr("transform","translate("+(-obj.margin.b)+","+(h1/2-obj.t)+")") | |
| .append('text') | |
| .style("font-size",obj.yaxis.titlefont.size ) | |
| .attr('transform','rotate(-90)') | |
| .style("opacity", 1.0) | |
| .style('fill',obj.yaxis.titlefont.color) | |
| .style("text-anchor", obj.yAxis) | |
| .text(obj.yaxis.title) | |
| yAxisGroup.append('g') | |
| .attr('class','y-top') | |
| .attr('transform','translate('+(-obj.margin.l)+',0)') | |
| . append('text') | |
| .style("font-size",obj.annotations.yhigh.font.size ) | |
| .style("opacity", 1.0) | |
| .style('fill',obj.annotations.yhigh.font.color) | |
| .style("text-anchor", obj.annotations.yhigh.yanchor) | |
| .text(obj.annotations.yhigh.text) | |
| yAxisGroup.append('g') | |
| .attr('class','y-low') | |
| .attr('transform','translate('+(-obj.margin.l)+','+(h+obj.margin.t)+')') | |
| .append('text') | |
| .style("font-size",obj.annotations.origin.font.size ) | |
| .style("opacity", 1.0) | |
| .style('fill',obj.annotations.origin.font.color) | |
| .style("text-anchor", obj.annotations.origin.xyanchor) | |
| .text(obj.annotations.origin.text) | |
| d3.select('.y-axis') | |
| .selectAll('path') | |
| .attr('stroke-width',obj.yaxis.linewidth) | |
| .attr('stroke',obj.yaxis.linecolor) | |
| } | |
| function drawcircle(obj,data){ | |
| cani=true; | |
| let svg1= d3.select('.circlerec-svg'); | |
| let svg2= d3.select('.svg-main') | |
| let w= obj.width-(obj.l+obj.r);//the length of the x-axis | |
| let h= obj.height-(obj.b+obj.t);//the length of the y axis | |
| var w1=w | |
| var h1=h | |
| var xScale = d3.scaleLinear().domain(obj.xrange) | |
| .range([0,w]); | |
| var yScale = d3.scaleLinear().domain(obj.yrange) | |
| .range([0,h]); | |
| if(data[0]===undefined&&data[1]===undefined){ | |
| svg2.on("click", crepoint) | |
| } | |
| else{ | |
| drcir(); | |
| } | |
| //this function creates plot points | |
| function drcir(){ | |
| var xScale = d3.scaleLinear().domain(obj.yrange) | |
| .range([0,w]); | |
| var yScale = d3.scaleLinear().domain(obj.xrange) | |
| .range([h,0]); | |
| var xMap = xScale(data[0])// the value of the point in the x axis | |
| var yMap = yScale((data[1]))// the value of the point in the x axis | |
| svg2.append('g') | |
| .attr('class','text-g') | |
| .attr('id', obj.id+'g') | |
| .append('svg') | |
| .attr('id', obj.id+'svg') | |
| .attr('class','text-svg') | |
| .style("opacity", 0) | |
| d3.select(`#${obj.id}g`) | |
| .append("rect") | |
| .attr('transform',"translate("+(xMap+obj.l-4)+","+(yMap+obj.t+5)+")") | |
| .attr('width','60px') | |
| .attr('height','25px') | |
| .attr('id',obj.id+'rec') | |
| .style('fill', obj.lable.backgroundcolor) | |
| .attr("class", "txtbox") | |
| d3.select(`#${obj.id}g`) | |
| .append('g') | |
| .attr('class','text1') | |
| .attr('id', obj.id+'text1') | |
| .attr('transform',"translate("+(xMap+obj.l+4)+","+(yMap+obj.t+15)+")") | |
| d3.select(`#${obj.id}text1`) | |
| .append('text') | |
| .attr('class','text-1') | |
| .attr('id', obj.id+'text-1') | |
| .style('fill', obj.lable.textcolor) | |
| .text('('+data[0]+'%,'+data[1]+'%)') | |
| .style("font-size","10px" ); | |
| d3.select(`#${obj.id}g`) | |
| .append('g') | |
| .attr('class','text2') | |
| .attr('id', obj.id+'text2') | |
| .attr('transform',"translate("+(xMap+obj.l+4)+","+(yMap+25+obj.t)+")") | |
| d3.select(`#${obj.id}text2`) | |
| .append('text') | |
| .style('fill', obj.lable.textcolor) | |
| .text(data[2]) | |
| .attr('id', obj.id+'text-2') | |
| .style("font-size","10px" ) | |
| svg1.append('circle') | |
| .attr('class','point-c') | |
| .attr('cx',xMap) | |
| .attr('cy',yMap) | |
| .attr('id', obj.id) | |
| .attr('r',obj.circle.radius) | |
| .style('fill',obj.circle.color) | |
| .style('opacity',obj.circle.opacity) | |
| .style('stroke',obj.circle.border.color) | |
| .on("mouseover", function(d) { | |
| d3.select(`#${obj.id}g`) | |
| .transition() | |
| .duration(200) | |
| .style("opacity", 0.7); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(`#${obj.id}g`).transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }) | |
| d3.select(`#${obj.id}`).call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| } | |
| function dragstarted(d) { | |
| d3.select(this) | |
| .style("fill",obj.circle.activecolor) | |
| let id= d3.select(this).attr('id') | |
| let ccc=d3.select(`#${id}rec`) | |
| .style("fill",obj.circle.activecolor) | |
| } | |
| function dragged(d) { | |
| let temp_x = (d3.event.x/w1)*100; | |
| let temp_y = (d3.event.y/h1)*100; | |
| let y=d3.select(this) | |
| temp_x = Math.round(temp_x); | |
| temp_y = Math.round(temp_y); | |
| if( temp_x >= 0 && temp_y >= 0 && temp_x <= 100 && temp_y <= 100){ | |
| let xmap = xScale(temp_x) | |
| let ymap = yScale(temp_y) | |
| let cx=y.attr('cx')*-1+xmap | |
| let cy=y.attr('cy')*-1+ymap | |
| data[0]=temp_x | |
| data[1]=100-temp_y | |
| var id= d3.select(this).attr('id') | |
| d3.select(this) | |
| .attr("transform", | |
| "translate("+(cx)+","+(cy)+")"); | |
| let ccc=d3.select(`#${id}rec`) | |
| .attr('transform',"translate(0,0)") | |
| .attr('transform',"translate("+(xmap+obj.l-4)+","+(ymap+obj.t+5)+")") | |
| d3.select(`#${id}text1`) | |
| .attr('transform',"translate(0,0)") | |
| .attr('transform',"translate("+(xmap+obj.l)+","+(ymap+obj.t+15)+")") | |
| d3.select(`#${id}text-1`).text('('+data[0]+'% ,'+data[1]+'%)') | |
| d3.select(`#${id}text2`) | |
| .attr('transform',"translate(0,0)") | |
| .attr('transform',"translate("+(xmap+obj.l)+","+(ymap+obj.t+25)+")") | |
| } } | |
| function dragended(d) { | |
| let y=d3.select(this) | |
| y.style("fill",obj.circle.color); | |
| let ccc=d3.select('.txtbox') | |
| .style('fill', obj.lable.backgroundcolor) | |
| } | |
| function crepoint(){ | |
| var xcale = d3.scaleLinear().domain([(obj.l+obj.xwidth),(obj.width-obj.r) ]) | |
| .range(obj.xrange); | |
| var ycale = d3.scaleLinear().domain([(obj.height-obj.b-obj.ywidth),obj.t]) | |
| .range(obj.yrange); | |
| var coords = d3.mouse(this); | |
| var temp_x=coords[0] | |
| var temp_y=coords[1] | |
| var temp_x1 = Math.round(temp_x) | |
| var temp_y1 = Math.round(temp_y) | |
| if( temp_x1 >= (obj.l+obj.xwidth) && temp_y1 >= (obj.t) && temp_x1 <= (obj.width-obj.r) && temp_y1 <= (obj.height-obj.b-obj.ywidth)){ | |
| let xmap = Math.round(xcale(temp_x1)) | |
| let ymap = Math.round(ycale(temp_y1)) | |
| if(cani===true){ | |
| data[0]=xmap | |
| data[1]=ymap | |
| drcir(); | |
| cani=false | |
| }} | |
| } | |
| } | |
| return{ | |
| drawSvg: drawSvg, | |
| drawcircle: drawcircle | |
| } | |
| })(); | |
| var layout = { | |
| width: '450',//width of the main svg | |
| height: '450',//height if the svg | |
| background_color: '#444',//total backgound of svg | |
| font: { // fontsize and color of the lables | |
| size: 13, | |
| color: "#fff" | |
| }, | |
| t: 50,//the top margin where to start drawing the axis | |
| b: 50,//the bottom margin where to start drawing the axis | |
| l: 50, //the left margin where to start drawing the axis | |
| r: 50, //the right margin where to start drawing the axis | |
| annotations: { | |
| origin :{//writen on the origin | |
| xanchor: 'right', | |
| text: 'Low', | |
| font: { | |
| size: 13, | |
| color: '#fff' | |
| } | |
| }, | |
| xhigh: { //writen on the high point of x | |
| yanchor: 'top', | |
| text: 'High', | |
| showarrow: false, | |
| font: { | |
| size: 13, | |
| color: '#fff' | |
| } | |
| }, | |
| yhigh: {//writen on the nigh point of y | |
| xanchor: 'right', | |
| text: 'High', | |
| font: { | |
| size: 13, | |
| color: '#fff' | |
| } | |
| } | |
| }, | |
| xaxis: { //information regarding x axis | |
| showgrid: false, | |
| range: [ 0, 100 ], | |
| showticklabels: false, | |
| title: 'Impression', | |
| linecolor: '#fff', | |
| linewidth: 3, | |
| titlefont: {//xaxis title font | |
| color: '#fff', | |
| size: 14 | |
| } | |
| }, | |
| yaxis: { //information regarding x axis | |
| showgrid: false, | |
| range: [0, 100], | |
| showticklabels: false, | |
| title: 'Perception', | |
| linecolor: '#fff', | |
| linewidth: 3, | |
| titlefont: {//y axis title font | |
| color: '#fff', | |
| size: 14 | |
| } | |
| }, | |
| margin: {// the positions of texts | |
| t: 20, | |
| b: 10, | |
| l: 10, | |
| r: 10 | |
| }} | |
| var circle={ | |
| xrange: [0,100], | |
| yrange: [0,100], | |
| circle:{ | |
| color: '#e59400', | |
| opacity: 0.7, | |
| activecolor: '#ffae19', | |
| radius:13, | |
| border :{ | |
| color:'#664200' | |
| } | |
| }, | |
| lable:{ | |
| backgroundcolor:'white', | |
| textcolor:'blue', | |
| activecolor: '#ffae19' | |
| }, | |
| t: 50,//the top margin where to start drawing the axis | |
| b: 50,//the bottom margin where to start drawing the axis | |
| l: 50, //the left margin where to start drawing the axis | |
| r: 50, //the right margin where to start drawing the axis | |
| width: 450,//width of the main svg | |
| height: 450,//height if the svg | |
| xwidth: 3,//x-axis line width | |
| ywidth:3,//y-axis line width | |
| id:'first' | |
| } | |
| var ccuu=Object.assign({},circle) | |
| ccuu.id='home' | |
| console.log(ccuu.id,circle.id) | |
| var data=[] | |
| data[2]=['concert'] | |
| var data1=[10,10,'concert'] | |
| var id= 'first' | |
| var c =zplot.drawSvg("here",layout) | |
| /* first argument of the function is the id of the parnet div to hold the svg | |
| the 2nd agument is the an object that determines the | |
| svg atributes */ | |
| var d=zplot.drawcircle(circle,data1) | |
| var h =zplot.drawcircle(ccuu,data)// this function creates the circle | |
| /* the 1st agument is the an object that determines the | |
| circle atributes | |
| the second argument is the data | |
| */ | |
This file contains hidden or 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
| /* todo: add styles */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment