How to style slider on chart in D3.js and show label of dynamic y-value?

Question

Here is a sample fiddle of a simple chart.

I am new to learning about D3.js, and I love it and am so impressed by it and its creator Mike Bostock.

I've created a webpage of charts whose values affect each other, sort of like in Bostock's amazing Rent Versus Buy calculator in the New York Times.

I've tried to create a slider (using JqueryUI) that changes an input value (like the $250,000 input box shown below), which affects the y-value of the chart. It works, but it's disappointing in appearance and isn't mobile-friendly.

I've been unable to figure out through tutorials or documentation how to create a slider like Bostock did, shown here:

I don't think Bostock used anything other than D3 to build his slider and styling.

I've tried to look at his source code but haven't had luck figuring it out.

In my sample fiddle, I'm using a JqueryUI slider ($("<div class='slider'></div>").insertAfter(input).slider()) and some CSS.

Are there features of D3 that I haven't found yet that could help my chart look more like his?

If you could point me in the right direction for how to create (and style) the slider, the y-value label, and the axes, I'd really appreciate it.

Answer 1

Here is a very simple demo that I wrote from scratch, therefore not based on your code in the fiddle, showing the basic aspects of the dataviz you want to create.

In this demo I'm using only D3, no jQuery (mixing D3 with jQuery gives me headaches):

var width = 500,
    height = 180,
    padding = 16;

var svg = d3.select("#svg")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var data = d3.range(1, 21);

var xScale = d3.scaleBand()
    .domain(data)
    .range([padding * 2, width - padding])
    .padding(0.2);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d)])
    .range([height - padding, padding]);

var bars = svg.selectAll(".bars")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d))
    .attr("width", xScale.bandwidth())
    .attr("y", d => yScale(d))
    .attr("height", d => height - padding - yScale(d))
    .attr("fill", (d => d3.select("#slider").node().value == d ? "firebrick" : "teal"));

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

var gX = svg.append("g")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);

var gY = svg.append("g")
    .attr("transform", "translate(" + padding * 2 + ",0)")
    .call(yAxis);

d3.select("#slider").on("input", function() {
    var currentValue = this.value;
    yScale.domain([0, currentValue * 2])
    bars.attr("y", d => yScale(d))
        .attr("height", d => height - padding - yScale(d))
        .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));
    gY.call(yAxis);
})

#slider {
  width: 435px;
}
#sliderdiv{
  padding-left: 40px;
 }

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg"></div>
<div id="sliderdiv"><input id="slider" type="range" min="1" max="20" step="1" value="10"/></div>

Explanation:

In this example, I'm using a regular HTML input for the slider:

<input id="slider" type="range" min="1" max="20" step="1" value="10"/>

Then, we get the changes in that slider with this function:

d3.select("#slider").on("input", function() {
    var currentValue = this.value;
    yScale.domain([0, currentValue * 2])
    bars.attr("y", d => yScale(d))
        .attr("height", d => height - padding - yScale(d))
        .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));
    gY.call(yAxis);
})

Inside that function, we have 3 main steps. First, we get the current value of the slider:

var currentValue = this.value;

And, using that value, we change the y scale:

yScale.domain([0, currentValue * 2])

That way, the selected bar will remain always at the same height, just like in Bostock's code. Then, we update the bars:

bars.attr("y", d => yScale(d))
    .attr("height", d => height - padding - yScale(d))
    .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));

And, finally, the y axis:

gY.call(yAxis);