Skip to content

Instantly share code, notes, and snippets.

@alteist

alteist/.block

Created June 21, 2018 08:59
Show Gist options
  • Save alteist/aa5b213463c6b5a36a3d62251862a435 to your computer and use it in GitHub Desktop.
Save alteist/aa5b213463c6b5a36a3d62251862a435 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<!-- <svg class="v-widget bouble-bars" ref="svg" width="500" height="500" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet"> -->
<!-- </svg> -->
<script>
var data = [
['МЭ','Министерство энергетики',100,60,7868770000,70],
['МЗ','Министерство здравоохранения',100,30,7081893000,40],
['МОН','Министерство образования и науки',100,49,3934385000,85],
['МТСЗ','Министерство труда и социальной защиты',100,76,1573754000,10]
]
const margin = {top: 40, right: 10, bottom: 40, left: 40};
const width = 500 - margin.left - margin.right
const height = 500 - margin.top - margin.bottom
var svg = d3.select("body").append('svg')
.attr('width', width)
.attr('height', height)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
svg.append("line")
.attr('x1',0)
.attr('x2',width-margin.left)
.attr('y1',0)
.attr('y2',height-margin.top)
.style('stroke','black')
.style('stroke-width','0.5px')
svg.append("line")
.attr('x1',-margin.left)
.attr('x2',width+margin.right+margin.left)
.attr('y1',-margin.top)
.attr('y2',height+margin.bottom+margin.top)
.style('stroke','red')
.style('stroke-width','0.5px')
var log = function (t) {
svg.append("text")
.attr("x", 30)
.attr("y", 30)
.attr("font-size","20px")
.attr("fill", "black")
.attr("text-anchor", "start")
.text(t)
}
// log(width)
// svg.append("text")
// .text('this.chart.title')
// .attr("x", 0)
// .attr("y", 0)
// .attr("class", "title")
data.forEach(function (d) {
d.title = d[0]
d.fulltitle = d[1]
// d.x1 = +d[2] //plan
d.x1 = +d[3] //fact
d.x3 = +d[4]/10**9 //budget
d.x2 = +d[5] //execution
});
let y =
d3.scaleBand().range([0,height - margin.bottom], 0.05)
.domain(data.map(function (d) {return d.title;}))
.paddingInner(0.5)
.paddingOuter(0.8)
.align(0.3)
let x1 = d3.scaleLinear().range([width/2.5,0])
.domain([0, Math.max(100, d3.max(data,(d)=>(d.x1)))])
let x2 = d3.scaleLinear().range([0,width/2.5])
.domain([0, Math.max(100, d3.max(data,(d)=>(d.x2)))])
let x3 = d3.scaleLinear().range([0,width/2.5])
.domain([0, Math.max(10,d3.max(data,(d)=>(d.x3)))])
const xAxis1 = d3.axisTop()
.scale(x1)
.ticks(5, ",d")
const xAxis2 = d3.axisTop()
.scale(x2)
.ticks(5, ",d")
const xAxis3 = d3.axisBottom()
.scale(x3)
.ticks(5, ",d")
const yAxis = d3.axisLeft()
.scale(y)
// log(y.domain())
svg.append("g")
.attr("class", "x-axis-1")
// .attr("transform", "translate(0," + (height) + ")")
.call(xAxis1)
svg.append("g")
.attr("class", "x-axis-2")
.attr("transform", "translate("+ width/2.5 + ", 0)")
.call(xAxis2)
svg.append("g")
.attr("class", "x-axis-3")
.attr("transform",
`translate(${width/2.5}, ${height-margin.bottom*2})`)
.call(xAxis3)
svg.append("g")
.attr("class", "y-axis")
.call(yAxis)
svg.selectAll('.domain').remove()
svg.selectAll('.tick line').remove()
svg.append("rect")
.attr("class", "grid")
.attr("x", -margin.left)
.attr("width", width)
.attr("y", -margin.top)
.attr("height", height)
svg.append("rect")
.attr("class", "grid")
.attr("x", 0)
.attr("width", width-margin.left*2-margin.right)
.attr("y", 0)
.attr("height", height-margin.bottom*2)
// var ticks = x2.ticks(5).map((d)=>(x2(d)))
function xAxisGrids(g) {
var axis = eval(g.attr('data-grid'))
g.call(axis.tickSize(-height+margin.bottom*2))
g.select(".domain").remove();
g.selectAll(".tick line").classed('grid',1);
g.selectAll(".tick text").remove();
}
svg.append("g")
.attr('data-grid', 'xAxis1')
.classed('grid',1)
.call(xAxisGrids)
svg.append("g")
.attr('data-grid', 'xAxis2')
.classed('grid',1)
.call(xAxisGrids)
.attr("transform", "translate(" + width/2.5 + ",0)")
// svg.append("line")
//.classed('x-zero',1)
// .attr('x1',width/2.5)
// .attr('x2',width/2.5)
// .attr('y1',0)
// .attr('y2',height-margin.bottom)
// .style('stroke','black')
// .style('stroke-width','1px')
// var colors = {
// x1: 'green',
// x2: 'black',
// x3: 'grey'
// }
var barMouseOver = function(d, i) {
// log(d3.select(this).attr('x'))
// log(d)
var bar = d3.select(this)
bar.classed('active', true)
// .style('stroke','red')
}
var barMouseOut = function(d, i) {
var bar = d3.select(this)
bar.classed('active', false)
// .style('stroke','red')
}
var fontSize = y.bandwidth()/2.5
var barsLeft = svg.selectAll("bar")
.data(data)
.enter()
.append("g")
.attr('class','bar')
.style('fill','green')
barsLeft.append("rect")
// .attr("class", "bar")
.attr("height", y.bandwidth())
.attr('width', (d)=>x1(d.x1))
.attr('x', (d)=>(width/2.5-x1(d.x1)))
.attr('y', (d)=>(y(d.title)))
.on('mouseover', barMouseOver)
.on('mouseout', barMouseOut)
barsLeft.append('text')
.style('font-size', fontSize)
.text((d)=>d.x1+'%')
.style('fill','white')
.attr('x', (d)=>(
// width/2.5-x1(d.x1)+10)
width/2.5-x1(d.x1)+(x1(d.x1) < fontSize*2 ? -fontSize*2.5: fontSize/2.5)
))
.attr('y', (d)=>(y(d.title)+fontSize*1.5))
var barsRightBack = svg.selectAll("bar")
.data(data)
.enter()
.append('g')
barsRightBack.append("rect")
.attr("class", "bar")
.style('fill','grey')
.attr("height", y.bandwidth()*1.5)
.attr('width', (d)=>x3(d.x3))
.attr('x', width/2.5)
.attr('y', (d)=>(y(d.title) - y.bandwidth()/4 ))
// barsRightBack.append('text')
// .style('font-size', fontSize)
// .text((d)=>d.x2+'%')
// .style('fill','red')
// .attr('x', (d)=>(
// width/2.5+x2(d.x2)+(x2(d.x2) > fontSize*2 ? -fontSize*2.5: fontSize/2.5)
// ))
// .attr('y', (d)=>(y(d.title)+fontSize*1.5))
var barsRight = svg.selectAll("bar")
.data(data)
.enter()
.append('g')
barsRight.append("rect")
.attr("class", "bar")
.attr("height", y.bandwidth())
.attr('width', (d)=>x2(d.x2))
.attr('x', width/2.5)
.attr('y', (d)=>(y(d.title)))
barsRight.append('text')
.style('font-size', fontSize)
.text((d)=>d.x2+'%')
.style('fill','red')
.attr('x', (d)=>(
width/2.5+x2(d.x2)+(x2(d.x2) > fontSize*2 ? -fontSize*2.5: fontSize/2.5)
))
.attr('y', (d)=>(y(d.title)+fontSize*1.5))
// var details = svg.append('svg')
// .attr('class', 'select-text')
// .attr('x', -1000)
// .attr('y', -1000)
// details
// .append('rect')
// .attr('width', 180)
// .attr('height', 25)
// .attr('x', 0)
// .attr('y', 0)
// .style('opacity', 0.7)
// details
// .append('text')
// .attr('class', 'select-text-')
// .attr('x', 5)
// .attr('dy', 17.5)
// .style('fill', 'black')
</script>
<style>
.active {
stroke: red
}
/* .tick line { */
/* display: none; */
/* } */
.grid,
.y-zero {
stroke: #666;
stroke-width: 0.5;
fill: none;
}
.bar text {
pointer-events: none
}
.tick text {
fill: blue
}
.y-axis .tick text {
fill: white
}
</style>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment