var margin = { top: 30, right: 10, bottom: 10, left: 0 },
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#map1")
.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 + ")");
// Parse the Data
d3.json("./data.json", function (data) {
// Extract the list of dimensions we want to keep in the plot. Here I keep all except the column called Species
dimensions = d3.keys(data[0]).filter(function (d) { return d != 'code' })
// For each dimension, I build a linear scale. I store all in a y object
var y = {}
for (i in dimensions) {
dem = dimensions[i]
y[dem] = d3.scaleLinear()
.domain(d3.extent(data, function (d) {
return +d[dem];
}))
.range([height, 0])
}
// Build the X scale -> it find the best position for each Y axis
x = d3.scalePoint()
.range([0, width])
.padding(1)
.domain(dimensions);
// The path function take a row of the json as input, and return x and y coordinates of the line to draw for this raw.
function path(d) {
return d3.line()(dimensions.map(function (p) { return [x(p), y[p](d[p])]; }
));
}
d3.select("button")
.on("click", update)
function update() {
var txtcode = d3.select("#txtcode").node().value;
svg
.selectAll("myPath")
.data(data)
.enter().append("path")
.attr("d", path)
.style("display", function (d) {
if (txtcode == d.code) { return "" }
else return "none";
})
.style("fill", "none")
.style("stroke", "#69b3a2")
.style('opacity', 0.5)
}
// Draw the axis:
svg.selectAll("myAxis")
// For each dimension of the dataset I add a 'g' element:
.data(dimensions).enter()
.append("g")
// I translate this element to its right position on the x axis
.attr("transform", function (d) { return "translate(" + x(d) + ")"; })
// And I build the axis with the call function
.each(function (d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function (d) { return d; })
.style("fill", "black")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>