https://github.com/sourcec0de/rud3

Re-usable charts built on the D3 data visualization library.
https://github.com/sourcec0de/rud3

Last synced: 16 days ago
JSON representation

Re-usable charts built on the D3 data visualization library.

• Host: GitHub
• URL: https://github.com/sourcec0de/rud3
• Owner: sourcec0de
• Created: 2013-05-06T06:35:05.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2013-05-06T18:30:04.000Z (about 13 years ago)
• Last Synced: 2025-11-29T20:18:42.407Z (6 months ago)
• Language: JavaScript
• Size: 4.88 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NOTES FOR DAVE

I have pretty much ended up in the same position as you did after working for several hours tonight.

### working.html

this file contains the code for a working example of a scatter plot with axese

### index.html

### BarChart.js

contain my code that I worked on

# Also included a copy of Murry D3 Data Visualization eBook for your reference in class.

Hopefully at least some of what I did helps here.

### Working bar with axis

~~~javascript

var valueLabelWidth = 40; // space reserved for value labels (right)

var barHeight = 20; // height of one bar

var barLabelWidth = 100; // space reserved for bar labels

var barLabelPadding = 5; // padding between bar and bar labels (left)

var gridLabelHeight = 18; // space reserved for gridline labels

var gridChartOffset = 3; // space between start of grid and first bar

var maxBarWidth = 420; // width of the bar with the max value

 

// accessor functions 

var barLabel = function(d) { return d['Population (mill)']; };

var barValue = function(d) { return parseFloat(d['Population (mill)']); };

 

// scales

var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);

var y = function(d, i) { return yScale(i); };

var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };

var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);

// svg container element

var chart = d3.select('#chart').append("svg")

  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)

  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);

// grid line labels

var gridContainer = chart.append('g')

  .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); 

gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")

  .attr("x", x)

  .attr("dy", -3)

  .attr("text-anchor", "middle")

  .text(String);

// vertical grid lines

gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")

  .attr("x1", x)

  .attr("x2", x)

  .attr("y1", 0)

  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)

  .style("stroke", "#ccc");

// bar labels

var labelsContainer = chart.append('g')

  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 

labelsContainer.selectAll('text').data(data).enter().append('text')

  .attr('y', yText)

  .attr('stroke', 'none')

  .attr('fill', 'black')

  .attr("dy", ".35em") // vertical-align: middle

  .attr('text-anchor', 'end')

  .text(barLabel);

// bars

var barsContainer = chart.append('g')

  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); 

barsContainer.selectAll("rect").data(data).enter().append("rect")

  .attr('y', y)

  .attr('height', yScale.rangeBand())

  .attr('width', function(d) { return x(barValue(d)); })

  .attr('stroke', 'white')

  .attr('fill', 'steelblue');

// bar value labels

barsContainer.selectAll("text").data(data).enter().append("text")

  .attr("x", function(d) { return x(barValue(d)); })

  .attr("y", yText)

  .attr("dx", 3) // padding-left

  .attr("dy", ".35em") // vertical-align: middle

  .attr("text-anchor", "start") // text-align: right

  .attr("fill", "black")

  .attr("stroke", "none")

  .text(function(d) { return d3.round(barValue(d), 2); });

// start line

barsContainer.append("line")

  .attr("y1", -gridChartOffset)

  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)

  .style("stroke", "#000");

~~~