Show Bar Chart using d3.js -
hi using first time library 3d.js. doing basic example.
this data
var dataset = {"6-12m_a": [{"count": 1231, "code": "272.4"}, {"count": 1115, "code": "v04.81"}, {"count": 1024, "code": "v70.0"}, {"count": 922, "code": "268.9"}, {"count": 818, "code": "780.79"}, {"count": 764, "code": "530.81"}, {"count": 693, "code": "v72.84"}, {"count": 652, "code": "v82.9"}, {"count": 650, "code": "278.00"}, {"count": 649, "code": "786.2"}],"6-12m_b": [{"count": 791, "code": "272.4"}, {"count": 734, "code": "250.00"}, {"count": 555, "code": "v70.0"}, {"count": 403, "code": "268.9"}, {"count": 395, "code": "244.9"}, {"count": 388, "code": "530.81"}, {"count": 336, "code": "780.79"}, {"count": 313, "code": "285.9"}, {"count": 292, "code": "278.00"}, {"count": 273, "code": "599.0"}],">12m_b": [{"count": 1252, "code": "v70.0"}, {"count": 1237, "code": "272.4"}, {"count": 1109, "code": "250.00"}, {"count": 731, "code": "v72.31"}, {"count": 633, "code": "v82.9"}, {"count": 594, "code": "268.9"}, {"count": 574, "code": "780.79"}, {"count": 570, "code": "599.0"}, {"count": 565, "code": "244.9"}, {"count": 548, "code": "724.2"}],">12m_a": [{"count": 3613, "code": "v70.0"}, {"count": 3480, "code": "401.1"}, {"count": 2915, "code": "v72.62"}, {"count": 2732, "code": "268.9"}, {"count": 2660, "code": "272.4"}, {"count": 2636, "code": "v72.84"}, {"count": 2383, "code": "v04.81"}, {"count": 2378, "code": "278.02"}, {"count": 2369, "code": "780.79"}, {"count": 2210, "code": "729.5"}],"0": [{"count": 8348, "code": "272.4"}, {"count": 6732, "code": "250.00"}, {"count": 3819, "code": "v70.0"}, {"count": 2728, "code": "278.00"}, {"count": 2412, "code": "v72.83"}, {"count": 2071, "code": "272.0"}, {"count": 1958, "code": "414.00"}, {"count": 1886, "code": "244.9"}, {"count": 1796, "code": "v82.9"}, {"count": 1703, "code": "530.81"}],"<6m_b": [{"count": 2001, "code": "250.00"}, {"count": 1818, "code": "272.4"}, {"count": 1455, "code": "v70.0"}, {"count": 935, "code": "268.9"}, {"count": 870, "code": "244.9"}, {"count": 820, "code": "278.00"}, {"count": 818, "code": "530.81"}, {"count": 743, "code": "780.79"}, {"count": 710, "code": "v82.9"}, {"count": 690, "code": "285.9"}],"<6m_a": [{"count": 2974, "code": "272.4"}, {"count": 1486, "code": "250.00"}, {"count": 1474, "code": "268.9"}, {"count": 1374, "code": "285.9"}, {"count": 1373, "code": "278.00"}, {"count": 1373, "code": "v72.84"}, {"count": 1218, "code": "530.81"}, {"count": 1204, "code": "v67.00"}, {"count": 1191, "code": "780.79"}, {"count": 1179, "code": "v70.0"}]} and code
var tex_info = ["6-12m_a", "6-12m_b", ">12m_b", ">12m_a", "0", "<6m_b", "<6m_a"]; var w = 500; var h = 200; tex_info.foreach(function(item_list) { dataset[item_list].foreach(function(item) { d3.select("#chart2").selectall("div") .data(item["count"]) .enter() .append("div") .attr("class", "bar") .style({"height": function(d) { var barheight = d*5; return barheight + "px"; }, "width": "2%", "background-color":"blue","display":"inline-block", "margin-right": "0.5px", "margin-left": "0.5px"}); }); }); i want use each tex_info item represente x component in xasis each item of tex_info dictionary in dataset 10 values, want representing each values bars on each xasis, when try represent bar don't return nothing.
<div id="chart2"></div> i try same example using svg
var svg = d3.select(".svg") .append("svg") .attr("width", w) .attr("height", h); d3.json("....", function(json) { tex_info.foreach(function(list) { json[list].foreach(function(item){ console.log(item); svg.selectall("rect") .data(item) .enter() .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 100); }); }); }); any idea how solvent issue.
thanks in advance!
Comments
Post a Comment