create bar chart with D3 - d3.js

Question

Hi everyone I am starting with D3.JS, and I want to show a bar with the temperature of a place.
This is my code
json_url= "https://data.cityofchicago.org/resource/7edu-s3u7.json";
var all_name_station = ["63rd Street Weather Station", "Foster Weather Station", "Oak Street Weather Station"];
var one_name_station = ["63rd Street Weather Station"];
var width = 900;
var height = 400;
$(document).ready(function(){
d3.json(json_url, function(data) {
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
one_name_station.forEach(function(station_item){
data.forEach(function(item_data){
if (item_data["station_name"] == station_item){
//console.log(item_data);
canvas.selectAll("rect")
.data(item_data)
.enter()
.append("rect")
.attr("width", function(d) {return d.air_temperature;})
.attr("height", 50)
.attr("y", function(d,i){return d;})
.attr("fill", "blue");
}
});
});
});
});
I take my data from JSON, there are many station but I start only represente the data for "63rd Street Weather Station"
But my problems is that this code don't return nothing. You can try here
What I missing!
Thanks in advance

Answer 1

Your immediate problem is that right now you are not passing an iterable to data, just an object. If you wrap item_data in an array it will create a single blue rectangle:
.data([item_data])
Then you will have other problems, however, such as setting y. I would recommend reformatting your data first into a list of objects (instead of appending them one at a time), and building off of one of the canonical bar chart examples.

Answer 2

I would pass array of data, not by one item. So, compile the array of proper stations first, and then pass it to d3:
//array of objects
var stations = [{name: "Station 1", air_temperature: 19.5},
{name: "Station 2", air_temperature: 21.5},
{name: "Station 3", air_temperature: 20},];
//adding bars
var bars = canvas.selectAll("rect")
.data(stations)
.enter()
.append("rect")
.attr("width", function(d) {return d}) //guess: pass through function figuring out the right scale
.attr("height", 50) //guess: pass through function figuring out the right scale
.attr("y", function(d,i){return d.air_temperature;}) //guess: multiply by scaleFactor, obtained depending on number of entries in data and canvas size
.attr("fill", "blue"); //guess: pass through d3.scale.linear() function