What are some examples of D3.js visualizations?

What are some examples of D3.js visualizations?

D3.js is a powerful JavaScript library for creating dynamic and interactive data visualizations. Some examples include bar charts, line graphs, scatter plots, and pie charts. Would you like to see specific examples or code snippets?

Yes, can you show me a bar chart example?

Sure! Here's a simple bar chart example using D3.js:

const data = [10, 20, 30, 40, 50];
const svg = d3.select('svg');
const barHeight = 20;

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('width', d => d)
   .attr('height', barHeight)
   .attr('y', (d, i) => i * (barHeight + 5));

This code creates a simple horizontal bar chart. Would you like to know more about customizing it?

Yes, how can I change the colors of the bars?

You can change the colors of the bars by adding the .attr('fill', 'color') attribute to the rect elements. For example:

.attr('fill', 'steelblue')

This will set the color of the bars to steel blue. You can also use a function to set different colors based on data values. Would you like to see that?

That would be great! Show me how.

Here's how you can set different colors based on data values:

.attr('fill', d => d > 30 ? 'red' : 'green')

This will color bars red if their value is greater than 30, and green otherwise. Let me know if you need further assistance!