Shape Management / 余俊男

余俊男

Workspace

Published

Edited

Dec 11, 2019

Importers

1 star

md`# Shape Management`

config = {

let group=[

{id:"gauge1" , value:250, xtype:"sample", x:40, y:0},

{id:"gauge2" , value:200, xtype:"sample", x:40, y:30},

{id:"gauge3" , value:30, xtype:"sample", x:40, y:60},

{id:"gauge4" , value:100, xtype:"bargauge", x:400, y:150, repaint:0},

{id:"gauge6", value:10, xtype:"arcgauge", x:150, y:200, startAngle:-1},

//{id:"gauge7", value:0, xtype:"arcgauge", x:300, y:200},

{id:"gauge8", value:20, xtype:"arcgauge", x:50, y:200, repaint:0},

{id:"gauge10" , xtype:"pointgauge", x:270, y:160, min:0, max:50, repaint:0},

{id:"gauge11" , xtype:"statusicon", x:550, y:220, repaint:0},

{id:"gauge12" , xtype:"statusicon2", x:750, y:220, repaint:0},

{id:"gauge13" , xtype:"statusicon2", x:850, y:220, activeFill:"#a4bb71", activeStroke:"#a4cc71", repaint:0},

{id:"wall_1" , value:250, xtype:"wall", x:550, y:0, color:"yellow", repaint:1},

//wall: [lty,d,w,rty,h]

{id:"wall_2" , value:250, xtype:"wall2", x:750, y:0, color:"yellow", wall:[0,20,20,20,150], repaint:1},

{id:"wall_3" , value:250, xtype:"wall2", x:720, y:0, color:"blue", wall:[0,20,20,20,150], repaint:1},

{id:"tank_1" , value:70, xtype:"tank", x:0, y:300, color:"blue", title:"Tank1", repaint:0},

{id:"ball_1" , value:50, xtype:"ball", x:600, y:400, color:"blue", title:"ball", repaint:1},

{id:"gauge5" , xtype:"bargauge", x:200, y:310, min:0, max:100, ftWidth:7, ftHeight:94 , ftX:4, ftRx:8, ftRy:4, bgWidth:15, bgRx:10, bgRy:6, bgY:-3, bgFill:"none", bgStroke:"#7c9f41", bgStrokeWidth:2, repaint:1},

];

return group ;

}

data = {

let c=[

{id:"gauge1" , value:160},

{id:"gauge2" , value:250},

{id:"gauge3" , value:600},

{id:"gauge4" , value:151},

{id:"gauge5" , value:23},

{id:"gauge6" , value:34},

{id:"gauge7" , value:75},

{id:"gauge10" , value:12},

{id:"gauge11" , value:1},

{id:"gauge12" , value:1},

{id:"gauge13" , value:2},

];

return c ;

}

{

let m = html`Update Value and Configuration`

let joined_data = config.leftJoinWith( data , "id" );

vzPanel.updateAll(joined_data);

return m;

}

{

let m = html`Only Update Value`;

vzPanel.updateValue([{id:"gauge1",value:47},{id:"gauge10",value:30}]) ;

return m;

}

shape_ball = {

const ball = function(conf){

const obj = {}

const _config = conf ? conf:{value:20, max:100, min:0, color:"#717e29", width:300, height:200, depth:100} ;

d3.select('body').append("svg").node().innerHTML = `<defs>

</feMerge>

</filter>

</feSpecularLighting>

</feMerge>

</filter>

</defs>` ;

obj.updateShape = function(node,config){

d3.select(node).selectAll("*").remove();

this.render(node,config) ;

};

obj.updateValue = function(node,v){

node.value = v;

let conf = node.config ;

let ballsGroup = d3.select(node).selectAll("circle")

.attr("r",d=>d.value);

};

obj.render = function(node,config){

config = Object.assign({},_config,config);

node.config = config;

//All of the "official" planets in our Solar System

var planets = [

{planet: "Mercury", diameter: 0.383, color: "#A17F5D"},

{planet: "Venus", diameter: 0.949, color: "#E89624"},

{planet: "Earth", diameter: 1, color: "#518E87"},

{planet: "Mars", diameter: 0.532, color: "#964120"},

{planet: "Jupiter", diameter: 11.21, color: "#F8800F"},

{planet: "Saturn", diameter: 9.45, color: "#E0B463"},

{planet: "Uranus", diameter: 4.01, color: "#D1E3F4"},

{planet: "Neptune", diameter: 3.88, color: "#515CA8"}

];

let ballsGroup = d3.select(node)

.attr("transform","translate("+[config.x,config.y]+")")

.append("g")

.attr("class","balls");

//Create a radial gradient for each of the planets

var planetGradients = ballsGroup.append("defs").selectAll("radialGradient")

.data(planets)

.enter().append("radialGradient")

//Create a unique id per "planet"

.attr("id", function(d){ return "gradient-" + d.planet; })

.attr("cx", "35%") //Move the x-center location towards the left

.attr("cy", "35%") //Move the y-center location towards the top

.attr("r", "60%"); //Increase the size of the "spread" of the gradient

//Add colors to the gradient

//First a lighter color in the center

planetGradients.append("stop")

.attr("offset", "0%")

.attr("stop-color", function(d) {

return d3.rgb(d.color).brighter(1);

});

//Then the actual color almost halfway

planetGradients.append("stop")

.attr("offset", "50%")

.attr("stop-color", function(d) {

return d.color;

});

//Finally a darker color at the outside

planetGradients.append("stop")

.attr("offset", "100%")

.attr("stop-color", function(d) {

return d3.rgb(d.color).darker(1.75);

});

//Apply to a circle by referencing its unique id in the fill

ballsGroup.selectAll("circle")

.data([config])

.enter()

.append("circle")

.attr("r", 0)

.style("fill", "url(#gradient-Venus)");

ballsGroup.selectAll("path")

.data([{d:"M-40,100 h150 a20,20 0 0,0 20,-20 v-150"}])

.enter()

.append("path")

.attr("d", d=>d.d)

.attr("fill","none")

.attr("filter","url(#Steelfilter)")

.attr("stroke","black")

.attr("stroke-width",20);

this.updateValue(node,config.value);

};

return obj;

}

return ball;

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more