my - Testing BAR chart
This bar chart displays monthly energy consumption in kilowatt-hours across multiple building sites, with each bar representing a site’s total usage for a given month. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars and map values, while `d3.nest()` groups the data by site and date. Data is loaded from a CSV file using `d3.csv`, and the SVG rendering applies a categorical color scale to distinguish sites.
AI-generated descriptionNew Chart in v5
d.DateDay =formatMonth(parseTime(d.DateDay)),(d.kWh= +d.SumOfKwh) , d.Site;
scaleBand() .domain(keys.map(d.kWh)) .range([0, height]) .padding(0.05)
var csv = "bardata";
var data = d3.csv.parse(csv);
var result = [ {Site: []}, {date: []}, {kwh: []}]
data.forEach(function(d) { result[0]['Site'].push({d.Site]}) result[1]['date'].push({d.date]}) result[2]['kWh'].push({d.kWh]}) });dingInner( 0.1 ); var siteNest = d3.nest() .key(function(d) {return d.Site = 1;}) //.key(function(d) {return d.DateDay;}) .rollup( function(rows) { return { rows: rows, site: rows[0].Site, date: rows[0].DateDay, kWh: rows[0].kWh};}) //.rollup(function(v) { return d3.sum(v, function(d) { return d.kWh; }); }) .entries(data).sort(function(a, b){return a.DateDay - b.DateDay;}) console.log('siteNest') console.log(siteNest)