D3 horizontal bar chart

Question

I'm new with d3.js and I'm trying to do an horizontal bar chart.

I don't know where to put some variables or to calculate dynamically when the dataset changes.

Here is my code:

 <style> #xaxis .domain { fill: none; stroke: #d3d3d3; } #xaxis text, #yaxis text { font-size: 12px; } </style> <div class="panel-body"> <div id="chart"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script> var w = 1224; var categories = ["VI Jornadas de Actualización del Poder Judicial de la Ciudad Autónoma de Buenos Aires - Fuero PCyF", "VI Jornadas de Actualización del Poder Judicial de la Ciudad Autónoma de Buenos Aires - Fuero CAyT", "PRE-CONGRESO INTERNACIONAL: Una lectura de la Conv…nfancia y la Adolescencia. Puebla, México, 2014” ", "Reforma del Código Penal", "Prostitución como tema de Política Pública", "Discapacidad: Derecho a un Trato Adecuado", "Jornada sobre Reforma y Proceso Penal", "Manipulaciones judiciales de los varones violentos…icación de sus tácticas (impedimento de contacto)", "Teorías de Género", "Taller de Trabajo para una Justicia con Perspectiva de Género - Protocolo C", "Delitos Informáticos y evidencia digital en el proceso penal", "Curso Matrimonio Igualitario y Familias Diversas: Cambios Legislativos y Desafíos Judiciales ", "Ley de Identidad de Género: Antecedentes e Impacto en la Justicia", "Violencia Simbólica y Violencia Mediática", "Mesa Redonda: Género y Derecho", "Encuentros por los 15 años del Centro de Formación Judicial: Transferencia de competencias"]; var dollars = [328, 325, 95, 83, 65, 56, 55, 54, 53, 41, 37, 37, 36, 35, 34, 31] var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E']; var grid = d3.range(25).map(function(i) { return { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 480 }; }); var tickVals = grid.map(function(d, i) { if (i > 0) { return i * 10; } else if (i === 0) { return "100"; } }); var xscale = d3.scale.linear() .domain([0, d3.max(dollars, function(d) { return d; })]) .range([0, w]); var yscale = d3.scale.linear() .domain([0, categories.length]) .range([0, 480]); var colorScale = d3.scale.quantize() .domain([0, categories.length]) .range(colors); var canvas = d3.select('#chart') .append('svg') .attr({ 'width': w, 'height': 550 }); var grids = canvas.append('g') .attr('id', 'grid') .attr('transform', 'translate(600,10)') .selectAll('line') .data(grid) .enter() .append('line') .attr({ 'x1': function(d, i) { return i * 30; }, 'y1': function(d) { return d.y1; }, 'x2': function(d, i) { return i * 30; }, 'y2': function(d) { return d.y2; }, }) .style({ 'stroke': '#adadad', 'stroke-width': '1px' }); var xAxis = d3.svg.axis(); xAxis .orient('bottom') .scale(xscale); //.ticks(5); // .tickValues(tickVals); var yAxis = d3.svg.axis(); yAxis .orient('left') .scale(yscale) .tickSize(2) .tickFormat(function(d, i) { return categories[i]; }) .tickValues(d3.range(17)); var y_xis = canvas.append('g') .attr("transform", "translate(600,35)") .attr('id', 'yaxis') .call(yAxis); var x_xis = canvas.append('g') .attr("transform", "translate(600,500)") .attr('id', 'xaxis') .call(xAxis); var chart = canvas.append('g') .attr("transform", "translate(600,10)") .attr('id', 'bars') .selectAll('rect') .data(dollars) .enter() .append('rect') .attr('height', 19) .attr({ 'x': 0, 'y': function(d, i) { return yscale(i) + 19; } }) .style('fill', function(d, i) { return '#6AA6D6' }) //colorScale(i); .attr('width', function(d) { return 0; }); var transit = d3.select("svg").selectAll("rect") .data(dollars) .transition() .duration(1000) .attr("width", function(d) { return xscale(d); }); var transitext = d3.select('#bars') .selectAll('text') .data(dollars) .enter() .append('text') .attr({ 'x': function(d) { return xscale(d) / 2.2; }, 'y': function(d, i) { return yscale(i) + 35; } }) .text(function(d) { return d; }).style({ 'fill': '#ffff', 'font-size': '14px' }); </script> 

The arrays categories and dollars change on every query.

Hope than someone can help me.

Thanks!

Answer 1

In d3 a central concept is the data join. It's this join that allows you to bind data to a visualization and maintain visual persistence as the underlying data changes.

What you have works fine, but I'm guessing you're wondering how to make it dynamic. Well you make it dynamic by calling that 'chart definition code' multiple times with different underlying data.

You end up with something like the following:

var data = dollars; // or whatever your core data is.

function draw(data) {
  // all the d3 code from your example. This is the chart definition.
}

// draw the first iteration of the chart
draw(data);

// data changes
draw(data);

// data changes
draw(data);

Make sense?