Skip to content

Instantly share code, notes, and snippets.

@cstefanache

cstefanache/.block

Last active August 26, 2019 10:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cstefanache/5ca8a915d3dc50c6a233887c8d1c7ebd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cstefanache/5ca8a915d3dc50c6a233887c8d1c7ebd 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.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.area-heat-cool {
width: 960px;
height: 500px;
position: relative;
}
svg {
width: 100%;
height: 100%;
position: center;
}
path.slice{
stroke-width:2px;
}
polyline{
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
.toolTip {
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
.legend {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60%;
}
rect {
stroke-width: 2;
}
text {
font: 10px sans-serif;
fill: black;
}
text.value{
font-size: 200%;
fill: white;
}
text.label{
font-size: 100%;
}
.axis text {
font: 10px sans-serif;
}
.axis path{
fill: none;
stroke: #000;
}
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis .tick line {
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
}
.axisHorizontal path{
fill: none;
}
.axisHorizontal line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axisHorizontal .tick line {
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
}
.bar {
fill: #A12D24;
fill-opacity: .9;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<div class="area-heat-cool">
<form>
<label><input type="radio" name="dataset" id="dataset" value="heat" checked> Text 3</label>
<label><input type="radio" name="dataset" id="dataset" value="cool"> Text 1</label>
<label><input type="radio" name="dataset" id="dataset" value="area"> Text 2 </label>
</form>
</div>
<script>
let datasetTotal = [{label: "example 1", value: 156},
{label: "example 2", value: 189},
{label: "example 3", value: 234},
{label: "example 4", value: 345},
{label: "example 5", value: 346},
{label: "example 6", value: 456},
{label: "example 7", value: 489},
{label: "example 8", value: 567}];
let datasetOption1 = [{label: "example 1", value: 23},
{label: "example 2", value: 211},
{label: "example 3", value: 45},
{label: "example 4", value: 64},
{label: "example 5", value: 95},
{label: "example 6", value: 32},
{label: "example 7", value: 0},
{label: "example 8", value: 234}];
let datasetOption2 = [{label: "example 1", value: 33},
{label: "example 2", value: 211},
{label: "example 3", value: 45},
{label: "example 4", value: 62},
{label: "example 5", value: 15},
{label: "example 6", value: 32},
{label: "example 7", value: 0},
{label: "example 8", value: 234}];
d3.selectAll("input").on("change", function(d) {
selectDataset.call(this, d);
});
function selectDataset(d) {
let value = this.value;
if (value === "cool") {
change(datasetOption1, value, "Kältebedarf in K");
} else if (value === "area") {
change(datasetOption2, value, "Nutzfläche in m3");
} else {
change(datasetTotal, value, "Wärmebedarf in K");
}
}
var margin = {
top: (parseInt(d3.select('.area-heat-cool').style('height'), 10) / 20),
right: (parseInt(d3.select('.area-heat-cool').style('width'), 10) / 20),
bottom: (parseInt(d3.select('.area-heat-cool').style('height'), 10) / 20),
left: (parseInt(d3.select('.area-heat-cool').style('width'), 10) / 5)
},
width = parseInt(d3.select('.area-heat-cool').style('width'), 10) - margin.left - margin.right,
height = parseInt(d3.select('.area-heat-cool').style('height'), 10) - margin.top - margin.bottom;
var div = d3.select(".area-heat-cool").append("div").attr("class", "toolTip");
var y = d3.scaleBand()
.rangeRound([height, 0], .2, 0.5)
.paddingInner(0.1);
var x = d3.scaleLinear()
.range([0, width]);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y);
var svg = d3.select(".area-heat-cool").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//x-axis
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("Wärmebedarf in K");
//y-axis
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -20)
.attr("dy", ".75em")
.attr("transform", "rotate(0)")
.text("Gebäude");
d3.select("input[value=\"heat\"]").property("checked", true);
change(datasetTotal, undefined, "Wärmebedarf in K");
function change(dataset, optionSelect, textselect) {
y.domain(dataset.map(function(d) {
return d.label;
}));
x.domain([0, d3.max(dataset, function(d) {
return d.value;
})]);
svg.select(".y.axis").remove();
svg.select(".x.axis").remove();
d3.select(".x.label").text(textselect).transition().duration(1000) ;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("x", 50)
.attr("dx", ".1em")
.style("text-anchor", "end")
var bar = svg.selectAll(".bar")
.data(dataset, function(d) {
return d.label;
});
var barExit = bar.exit().remove();
var barEnter = bar.enter()
.append("g")
.attr("class", "bar");
var barRects = barEnter.append("rect")
.attr("x", function(d) {
return x(0);
})
.attr("y", function(d) {
return y(d.label);
})
.attr("width", function(d) {
return x(d.value);
})
.attr("height", y.bandwidth());
var barTexts = barEnter.append("text")
.attr("x", function(d) {
return x(d.value) + 10;
})
.attr("y", function(d) {
return y(d.label) + y.bandwidth() / 2;
})
.attr("dy", ".35em")
.text(function(d) {
return d.value;
});
barRectUpdate = bar.select("rect")
.transition()
.duration(3050)
.attr("x", function(d) {
return x(0);
})
.attr("y", function(d) {
return y(d.label);
})
.attr("width", function(d) {
return x(d.value);
})
.attr("height", y.bandwidth())
.style('fill', function () {
if (optionSelect === "heat") {
return '#A12D24'
} else if (optionSelect === "cool") {
return '#668BA4'
} else if (optionSelect === "area") {
return 'lightgrey'
}
});
var barTextsUpdate = bar.select("text")
.transition()
.duration(3050)
.attr("x", function(d) {
return x(d.value) + 10;
})
.attr("y", function(d) {
return y(d.label) + y.bandwidth() / 2;
})
.attr("dy", ".35em")
.text(function(d) {
return d.value;
});
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment