D3 transition between line interpolations - d3.js

I have been searching for quite a while but I haven't been able to figure it out.
I want to have a transition between two interpolations "basis" and "step-after" for a single line.
var time_scale, kpi_scale;
var line;
var data = [
{"kpi": 100, "time": 1317448800000},
{"kpi": 200, "time": 1320127200000},
{"kpi": 250, "time": 1322719200000},
{"kpi": 180, "time": 1325397600000},
{"kpi": 230, "time": 1328076000000},
{"kpi": 360, "time": 1330581600000},
{"kpi": 140, "time": 1333260000000},
{"kpi": 120, "time": 1335852000000},
{"kpi": 240, "time": 1338530400000},
{"kpi": 190, "time": 1341122400000},
{"kpi": 185, "time": 1343800800000},
{"kpi": 130, "time": 1346479200000},
{"kpi": 340, "time": 1349071200000},
{"kpi": 320, "time": 1351749600000},
{"kpi": 250, "time": 1354341600000}
];
// set up the viewport, the scales, and axis generators
var container_dimensions = {width: 900, height: 400},
margins = {top: 10, right: 20, bottom: 30, left: 60},
chart_dimensions = {
width: container_dimensions.width - margins.left - margins.right,
height: container_dimensions.height - margins.top - margins.bottom
};
var time_extent = d3.extent(
data,
function(d){return d.time;}
);
time_scale = d3.time.scale()
.domain(time_extent)
.range([0, chart_dimensions.width]);
var kpi_extent = d3.extent(
data,
function(d){return d.kpi;}
);
kpi_scale = d3.scale.linear()
.domain(kpi_extent)
.range([chart_dimensions.height, 0]);
var container = d3.select('body')
.append('svg')
.attr("width", container_dimensions.width)
.attr("height", container_dimensions.height)
.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")")
.attr("id","chart");
draw_timeseries (data);
transitionToStepped (data);
function draw_timeseries (data) {
line = d3.svg.line()
.x(function(d){return time_scale(d.time);})
.y(function(d){return kpi_scale(d.kpi);})
.interpolate("basis");
d3.select('#chart').append('path')
.attr('d', line(data))
.attr('id', 'line')
.attr('class', 'line');
}
function transitionToStepped (data) {
line.interpolate("step-after");
d3.select("#chart").selectAll(".line")
.transition()
.duration(2000)
.attr("d", line(data))
.delay(2000);
}
I have saved a small jsfiddle containing my code.
jsFiddle Interpolation Transition
I wanted to "morph" between the basis line and the step-after line. But d3 is sliding in the step-after line from the left instead of "bending" the basis line into a step-after one.
Thanks for your help.
Christoph

There has got to be a way to do this, and certainly one better than the offering below (I am looking forward to seeing other answers), but I have seen no answers here as of yet, and this will at least do a "morph" for you, although it also makes the line parallel to the x-axis during the transition. Not a terrible thing, but I believe not precisely what you are after.
Here's a fiddle for the full code and demo,
modified from your original:
http://jsfiddle.net/n5P6z/2/
The meat of the approach is here:
function xLineReduce() {
line.x(function (d) {
return time_scale(d.time);
}).y(function (d) {
return chart_dimensions.height;
});
}
function resetInterpolator() {
line.interpolate("cubic-in-out");
}
function stepItUp() {
line.x(function (d, i) {
return time_scale(d.time);
})
.y(function (d, i) {
return kpi_scale(d.kpi);
})
.interpolate("step-after");
}
function transitionToStepped(myData) {
path.data(myData)
.call(xLineReduce)
.transition()
.delay(1000)
.duration(500)
.attr('d', line(myData));
path.data(myData)
.call(resetInterpolator)
.transition()
.delay(1500)
.duration(0)
.attr('d', line(myData));
path.data(myData)
.call(stepItUp)
.transition()
.delay(1500)
.duration(500)
.attr('d', line(myData));
}

Related

How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?

I have an SVG clipPath made of multiple path elements, which I need to apply to a group of elements. I only want to clip out the area under the path stroke itself, not in between the paths. (example that doesn't do what I want follows)
var lineData = [ { "x": 1, "y": 5}, { "x": 100, "y": 400},
{ "x": 300, "y": 100}, { "x": 600, "y": 600},
{ "x": 700, "y": 50} ];
var lineData2 = [ { "x": 1, "y": 500}, { "x": 100, "y": 100},
{ "x": 300, "y": 700}, { "x": 600, "y": 60},
{ "x": 700, "y": 700} ];
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveBundle);
var svg = d3.select('body')
.append('svg')
.attr('id', 'svg')
.attr('width', 660)
.attr('height', 660)
.style('outline', '1px solid red')
.append('g')
.attr('clip-path', 'url(#clippy)');
var polygon = svg.append('polygon')
.attr('points', '230 10, 660 330, 230 650')
.attr('fill', '#c99');
var circle = svg.append('circle')
.attr('cx', 230)
.attr('cy', 330)
.attr('r', 200)
.attr('fill', '#9c6')
var clippy = d3.select('#svg')
.append('defs')
.append('clipPath')
.attr('id', 'clippy');
clippy.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 18)
.attr("fill", "none");
clippy.append("path")
.attr("d", lineFunction(lineData2))
.attr("stroke", "blue")
.attr("stroke-width", 18)
.attr("fill", "none");
Basically I want to accomplish something similar to what you get using letters, but instead using lines/paths.
var lineData = [ { "x": 1, "y": 5}, { "x": 100, "y": 400},
{ "x": 300, "y": 100}, { "x": 600, "y": 600},
{ "x": 700, "y": 50} ];
var lineData2 = [ { "x": 1, "y": 500}, { "x": 100, "y": 100},
{ "x": 300, "y": 700}, { "x": 600, "y": 60},
{ "x": 700, "y": 700} ];
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveBundle);
var svg = d3.select('body')
.append('svg')
.attr('id', 'svg')
.attr('width', 660)
.attr('height', 660)
.style('outline', '1px solid red')
.append('g')
.attr('clip-path', 'url(#clippy)');
var polygon = svg.append('polygon')
.attr('points', '230 10, 660 330, 230 650')
.attr('fill', '#c99');
var circle = svg.append('circle')
.attr('cx', 230)
.attr('cy', 330)
.attr('r', 200)
.attr('fill', '#9c6')
var clippy = d3.select('#svg')
.append('defs')
.append('clipPath')
.attr('id', 'clippy');
clippy.append('text')
.attr('x', 120)
.attr('y', 320)
.attr('font-size', '4em')
.attr('font-weight', 'bold')
.attr('font-family', 'Georgia')
.text('This is a clip');
clippy.append('text')
.attr('x', 120)
.attr('y', 420)
.attr('font-size', '4em')
.attr('font-weight', 'bold')
.attr('font-family', 'Georgia')
.text('Also a clip')
Please help!
EDIT: Here's a Codepen with both examples.
From my reading of the SVG spec, it's not possible to use only a <path>'s stroke as the clipping path:
The raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out.
However, converting the <clipPath> to a <mask> element produces what I think is your desired effect.
Here's a forked CodePen to demonstrate — the paths have have their strokes set to white, and the <text> elements were also given a fill of white to match the clip-path effect.

d3 connect visibility attribute to slider position

hey guys i am currently trying to change the visibility of 4 lines depending on whether the slider position is at the same "year-tick" as i have in my data.
for example: i would want line 3 which has the value "1994" stored to only be visible as long as the slider is on position "1994"
i havent workder with sliders yet, which is why i am having this much trouble getting this to work.
here is a fiddle of my code: https://fiddle.jshell.net/42jdw2Lt/3/
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script>
var width = 1500;
var height = 1500;
var margin = {top: 50, left: 50, right: 50, bottom:50},
height = 650-margin.top-margin.bottom,
width = 1200-margin.left-margin.right;
var svg = d3.select("body").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+")")
var strwi = d3.scaleLinear()
.domain([100, 400])
.range([7,35])
var group = svg.append("g")
var series = [
[{"x": 360, "y": 250, "num": 100}, {"x": 520, "y": 400, "num": 100}, {"x":
630, "y": 300, "num": 100, "year": 1991}],
[{"x": 71, "y": 45, "num": 200}, {"x": 32, "y": 39, "num": 200}, {"x": 43,
"y": 70, "num": 200, "year": 1992}],
[{"x": 100, "y": 300, "num": 300}, {"x": 200, "y": 200, "num": 300}, {"x":
300, "y": 200, "num": 300, "year": 1994}],
[{"x": 101, "y": 202, "num": 400}, {"x": 102, "y": 204, "num": 400}, {"x":
103, "y": 215, "num": 400, "year": 1995}]
];
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
group.selectAll(".line")
.data(series)
.enter().append("path")
.attr("class", "line")
// .attr("visibility", "hidden")
.attr("stroke-width", function(d) {return strwi(d); })
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", line);
var data = [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999,
2000, 2001, 2002]
var x = d3.scaleLinear()
.domain(d3.extent(data))
.range([0, width])
.clamp(true);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + 0 + "," + 300 + ")");
slider.append("line")
.attr("class", "track")
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.attr("stroke", "black")
.attr("stroke-width", "4")
.select(function() { return
this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return
this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function() { hue(x.invert(d3.event.x));
}));
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.selectAll("ticks")
.data(x.ticks(data.length))
.enter().append("text")
.attr("x", x)
.attr("text-anchor", "middle")
.attr("transform", "translate(0," + 30 + ")")
.text(function(d) { return d; })
.exit()
.data(x.ticks(data.length * 2))
.enter().append("circle")
.attr("cx", x)
.attr("r", 3)
.attr("fill", "#c1c7cd");
slider.insert("g", ".track-overlay")
.attr("class", "ticks--cirlces")
.selectAll("ticks--ticks");
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 9);
slider.transition() // Gratuitous intro!
.duration(750)
.tween("hue", function() {
var i = d3.interpolate(0, 70);
return function(t) { hue(i(t)); };
});
function hue(h) {
handle.attr("cx", x(h));
d3.select(".text")
.text( (Math.round(h*2)/2).toFixed(1) );
}
</script>
I added the prop year to all your elements in the data selecting all the line paths in a variable called paths so that I can change the opacity when you move your slider like this
var paths = group.selectAll(".line")
.data(series)
.enter().append("path")
.attr("class", "line")
// .attr("visibility", "hidden")
.attr("stroke-width", function(d) {
return strwi(d);
})
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", line);
and then in your hue function, I added this code to change the opacity based on your slider
paths.attr('opacity', function(d) {
if (((Math.round(h * 2) / 2).toFixed(1)) > d[2]['year']) {
return 0;
} else {
return 1;
}
})
Here's a fiddle for you:
var width = 1500;
var height = 1500;
var margin = {
top: 50,
left: 50,
right: 50,
bottom: 50
},
height = 650 - margin.top - margin.bottom,
width = 1200 - margin.left - margin.right;
var svg = d3.select("body").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 + ")")
var strwi = d3.scaleLinear()
.domain([100, 400])
.range([7, 35])
var group = svg.append("g")
var series = [
[{
"x": 360,
"y": 250,
"num": 100,
"startYear": 1991,
"endYear": 1995
}, {
"x": 520,
"y": 400,
"num": 100,
"startYear": 1991,
"endYear": 1995
}, {
"x": 630,
"y": 300,
"num": 100,
"startYear": 1991,
"endYear": 1995
}],
[{
"x": 71,
"y": 45,
"num": 200,
"startYear": 1992,
"endYear": 1993
}, {
"x": 32,
"y": 39,
"num": 200,
"startYear": 1992,
"endYear": 1993
}, {
"x": 43,
"y": 70,
"num": 200,
"startYear": 1992,
"endYear": 1993
}],
[{
"x": 100,
"y": 300,
"num": 300,
"startYear": 1994,
"endYear": 1996
}, {
"x": 200,
"y": 200,
"num": 300,
"startYear": 1994,
"endYear": 1996
}, {
"x": 300,
"y": 200,
"num": 300,
"startYear": 1994,
"endYear": 1996
}],
[{
"x": 101,
"y": 202,
"num": 400,
"startYear": 1995,
"endYear": 1997
}, {
"x": 102,
"y": 204,
"num": 400,
"startYear": 1995,
"endYear": 1997
}, {
"x": 103,
"y": 215,
"num": 400,
"startYear": 1995,
"endYear": 1997
}]
];
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
var paths = group.selectAll(".line")
.data(series)
.enter().append("path")
.attr("class", "line")
.attr('v1',function(d){
return d[2]['startYear'];
})
.attr('v2',function(d) {
return d[2]['endYear'];
})
.attr('opacity',0)
//.attr("visibility", "hidden")
.attr("stroke-width", function(d) {
return strwi(d);
})
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", line);
var data = [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002]
var x = d3.scaleLinear()
.domain(d3.extent(data))
.range([0, width])
.clamp(true);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + 0 + "," + 300 + ")");
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.selectAll("ticks")
.data(x.ticks(data.length))
.enter().append("text")
.attr("x", x)
.attr("text-anchor", "middle")
.attr("transform", "translate(0," + 30 + ")")
.text(function(d) {
return d;
})
.exit()
.data(x.ticks(data.length * 2))
.enter().append("circle")
.attr("cx", x)
.attr("r", 3)
.attr("fill", "#c1c7cd");
slider.append("line")
.attr("class", "track")
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.attr("stroke", "black")
.attr("stroke-width", "4")
.select(function() {
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "track-inset")
.select(function() {
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() {
slider.interrupt();
})
.on("start drag", function() {
//console.log(d3.event.x)
hue(x.invert(d3.event.x));
}));
slider.insert("g", ".track-overlay")
.attr("class", "ticks--cirlces")
.selectAll("ticks--ticks");
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 9);
slider.transition() // Gratuitous intro!
.duration(750)
.tween("hue", function() {
var i = d3.interpolate(0, 70);
return function(t) {
//nsole.log(t)
hue(i(t));
};
});
function hue(h) {
handle.attr("cx", x(h));
d3.select(".text")
.text((Math.round(h * 2) / 2).toFixed(1));
paths
.transition().duration(300)
.attr('opacity', function(d) {
if (((Math.round(h * 2) / 2).toFixed(1)) >= d[2]['startYear'] && ((Math.round(h * 2) / 2).toFixed(1)) <= d[2]['endYear']) {
return 1;
} else {
return 0;
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
Let me know if this is what you wanted or there's something else.

Visualize multidimensional Array in SVG

I have an array of objects which I bind to a g-element. For each g-element I generate a rect-element. It works so far but now I want to have a dynamic number of "parts" in each g-element which should generate a new rect and text element inside the existing rect.
Here you will find my example or on fiddle.net/tnnomejg/
var config = {
width: 600
};
var data = [
{
height: 150,
y: 0,
parts: [
{
title: "Hello",
x: 50,
y: 60,
},
{
title: "World",
x: 350,
y: 60,
}
],
},
{
height: 150,
y: 155,
parts: [
{
title: "Demo",
x: 280,
y: 215,
}
],
},
];
var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g");
g.append("rect")
.attr("x", 1)
.attr("y", function(d) { return d.y; })
.attr("width", config.width)
.attr("height", function(d) { return d.height; });
Thx.
You could use a subselection binding your parts' data to the corresponding elements using an accessor function like this:
var parts = g.selectAll("g.part")
.data(function(d) { return d.parts; })
.enter()
.append("g")
.attr("class", "part");
Having this subselection at your hands you may insert/append content accessing the corresponding data bound to each group/part.
var config = {
width: 600
};
var data = [
{
height: 150,
y: 0,
parts: [
{
title: "Hello",
x: 50,
y: 60
},
{
title: "World",
x: 350,
y: 60
}
]
},
{
height: 150,
y: 155,
parts: [
{
title: "Demo",
x: 280,
y: 215
}
]
}
];
var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g");
g.append("rect")
.attr("x", 1)
.attr("y", function(d) { return d.y; })
.attr("width", config.width)
.attr("height", function(d) { return d.height; });
var parts = g.selectAll("g.part")
.data(function(d) { return d.parts; })
.enter()
.append("g")
.attr("class", "part");
parts.append("rect")
.attr({
"class": "part",
"x": function(d) { return d.x; },
"y": function(d) { return d.y; },
"width": 200,
"height":80
});
parts.append("text")
.attr({
"class": "part",
"x": function(d) { return d.x; },
"y": function(d) { return d.y; }
})
.text(function(d) { return d.title; });
g.part rect {
fill:white;
}
g.part text {
fill: red;
stroke: none;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Use d3 selector each method.
g.each(function(d, i) {
var rect = d3.select(this);
d.parts.forEach(function(p) {
rect.append("rect")
.style("fill", "aliceblue")
.attr("x", p.x)
.attr("y", p.y)
.attr("width", config.width / 3)
.attr("height", d.height / 2);
rect.append("text")
.style("stroke", "brown")
.attr("x", p.x)
.attr("y", p.y)
.text(p.title);
});
});
var config = {
width: 600
};
var data = [{
height: 150,
y: 0,
parts: [{
title: "Hello",
x: 50,
y: 60,
}, {
title: "World",
x: 350,
y: 60,
}],
}, {
height: 150,
y: 155,
parts: [{
title: "Demo",
x: 280,
y: 215,
}],
}, ];
var svg = d3.select("body").append("svg").attr("width", config.width).attr("height", 500);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g");
g.append("rect")
.attr("x", 1)
.attr("y", function(d) {
return d.y;
})
.attr("width", config.width)
.attr("height", function(d) {
return d.height;
});
g.each(function(d, i) {
var rect = d3.select(this);
d.parts.forEach(function(p) {
rect.append("rect")
.style("fill", "aliceblue")
.attr("x", p.x)
.attr("y", p.y)
.attr("width", config.width / 3)
.attr("height", d.height / 2);
rect.append("text")
.style("stroke", "brown")
.attr("x", p.x)
.attr("y", p.y)
.text(p.title);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Binding "mouseover" events to points on a line in d3.js

I would like to get the coordinates of a point on a line by clicking on the line using the following code:
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
var lineGraph = svgContainer.append("path")
.data([lineData]).attr("d", lineFunction)
//.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.on('mousedown', function(d) {
console.log({"x":d.x, "y":d.y})
});
(I updated the code to address the comments, but I still get "Object {x: undefined, y: undefined}")
I keep getting an "undefined" when clicking on the line. Am I missing a step?
You can get the coordinates of an event using d3.event:
.on("mousedown", function() {
console.log({"x": d3.event.x, "y": d3.event.y});
});
use mouse event
.on('mousedown', function(d) {
var m = d3.mouse(this);
console.log("x:"+m[0]+" y:"+m[1]);
});
in your function m[0] and m[1] gives you X and Y.

Inverting bars on d3.js bar chart

I'm just getting started with D3.js and am having a problem with getting the bars horizontally lined up. Currently they come out pointing downwards.
var jsonRectangles = [
{ "x_axis": 10, "y_axis": 0, "height": 65, "width":20, "color": "green" },
{ "x_axis": 40, "y_axis": 0, "height": 80, "width":20, "color": "purple" },
{ "x_axis": 70, "y_axis": 0, "height": 100, "width":20, "color": "orange" },
{ "x_axis": 100, "y_axis": 0, "height": 50, "width":20, "color": "brown" },
{ "x_axis": 130, "y_axis": 0, "height": 66, "width":20, "color": "black" },
{ "x_axis": 160, "y_axis": 0, "height": 68, "width":20, "color": "red" }];
var svgContainer = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100);
var rectangles = svgContainer.selectAll("rect")
.data(jsonRectangles)
.enter()
.append("rect");
var rectangleAttributes = rectangles
.attr("x", function (d) { return d.x_axis; })
.attr("y", function (d) { return d.y_axis; })
.attr("height", function(d) { return height - y(d.weight); })
.attr("width", function (d) { return d.width; })
.style("fill", function(d) { return d.color; });
The (0,0) coordinate in an SVG is in the top left corner, so your y coordinates are "reversed" in the sense that they are counted from the top. This means that you have to position your bars so that they start at y position that you want to show and extend to the axis. Your code should look something like this.
rectangles.attr("y", function (d) { return (heightOfGraph - y(d.height)); })
.attr("height", function(d) { return y(d.height); });
On a general note, you don't need to save rectangleAttributes in a variable -- it will be exactly the same as rectangles.
In D3, 0 on the y coordinate is at the top rather than the bottom. You need to fist move the bars down to where you want the y axis origin to be, then move the bars up by their height to position them correctly.
Here's a rough solution though that hopefully you'll be able to work with (see the comments for the bits that have changed):
var jsonRectangles = [
{ "x_axis": 10, "y_axis": 0, "height": 65, "width":20, "color" : "green" },
{ "x_axis": 40, "y_axis": 0, "height": 80, "width":20, "color" : "purple" },
{ "x_axis": 70, "y_axis": 0, "height": 100, "width":20, "color" : "orange" },
{ "x_axis": 100, "y_axis": 0, "height": 50, "width":20, "color" : "brown" },
{ "x_axis": 130, "y_axis": 0, "height": 66, "width":20, "color" : "black" },
{ "x_axis": 160, "y_axis": 0, "height": 68, "width":20, "color" : "red" }];
// height of the visualisation - used to translate the bars
var viz_height = 100;
var svgContainer = d3.select("body").append("svg")
.attr("width", 500)
// set using viz_height rather than a fixed number
.attr("height", viz_height);
var rectangles = svgContainer.selectAll("rect")
.data(jsonRectangles)
.enter()
.append("rect");
var rectangleAttributes = rectangles
.attr("x", function (d) { return d.x_axis; })
// move the bars to the bottom of the chart (using
// viz_height), then move them back up by the height of
// the bar which moves them into palce
.attr("y", function (d) { return viz_height - y(d.height); })
.attr("height", function(d) { return y(d.height); })
.attr("width", function (d) { return d.width; })
.style("fill", function(d) { return d.color; });

Resources