{"id":19986374,"url":"https://github.com/sourcec0de/rud3","last_synced_at":"2026-05-14T02:31:48.583Z","repository":{"id":8328084,"uuid":"9880800","full_name":"sourcec0de/RUD3","owner":"sourcec0de","description":"Re-usable charts built on the D3 data visualization library.","archived":false,"fork":false,"pushed_at":"2013-05-06T18:30:04.000Z","size":5116,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-29T20:18:42.407Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sourcec0de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-06T06:35:05.000Z","updated_at":"2013-10-15T18:59:23.000Z","dependencies_parsed_at":"2022-08-07T02:30:27.050Z","dependency_job_id":null,"html_url":"https://github.com/sourcec0de/RUD3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sourcec0de/RUD3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcec0de%2FRUD3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcec0de%2FRUD3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcec0de%2FRUD3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcec0de%2FRUD3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sourcec0de","download_url":"https://codeload.github.com/sourcec0de/RUD3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcec0de%2FRUD3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33008049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T04:28:58.331Z","updated_at":"2026-05-14T02:31:48.542Z","avatar_url":"https://github.com/sourcec0de.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NOTES FOR DAVE\r\n\r\nI have pretty much ended up in the same position as you did after working for several hours tonight.\r\n\r\n### working.html\r\nthis file contains the code for a working example of a scatter plot with axese\r\n\r\n### index.html\r\n### BarChart.js\r\ncontain my code that I worked on\r\n\r\n# Also included a copy of Murry D3 Data Visualization eBook for your reference in class.\r\nHopefully at least some of what I did helps here.\r\n\r\n### Working bar with axis\r\n~~~javascript\r\nvar valueLabelWidth = 40; // space reserved for value labels (right)\r\nvar barHeight = 20; // height of one bar\r\nvar barLabelWidth = 100; // space reserved for bar labels\r\nvar barLabelPadding = 5; // padding between bar and bar labels (left)\r\nvar gridLabelHeight = 18; // space reserved for gridline labels\r\nvar gridChartOffset = 3; // space between start of grid and first bar\r\nvar maxBarWidth = 420; // width of the bar with the max value\r\n \r\n// accessor functions \r\nvar barLabel = function(d) { return d['Population (mill)']; };\r\nvar barValue = function(d) { return parseFloat(d['Population (mill)']); };\r\n \r\n// scales\r\nvar yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);\r\nvar y = function(d, i) { return yScale(i); };\r\nvar yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };\r\nvar x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);\r\n// svg container element\r\nvar chart = d3.select('#chart').append(\"svg\")\r\n  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)\r\n  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);\r\n// grid line labels\r\nvar gridContainer = chart.append('g')\r\n  .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); \r\ngridContainer.selectAll(\"text\").data(x.ticks(10)).enter().append(\"text\")\r\n  .attr(\"x\", x)\r\n  .attr(\"dy\", -3)\r\n  .attr(\"text-anchor\", \"middle\")\r\n  .text(String);\r\n// vertical grid lines\r\ngridContainer.selectAll(\"line\").data(x.ticks(10)).enter().append(\"line\")\r\n  .attr(\"x1\", x)\r\n  .attr(\"x2\", x)\r\n  .attr(\"y1\", 0)\r\n  .attr(\"y2\", yScale.rangeExtent()[1] + gridChartOffset)\r\n  .style(\"stroke\", \"#ccc\");\r\n// bar labels\r\nvar labelsContainer = chart.append('g')\r\n  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); \r\nlabelsContainer.selectAll('text').data(data).enter().append('text')\r\n  .attr('y', yText)\r\n  .attr('stroke', 'none')\r\n  .attr('fill', 'black')\r\n  .attr(\"dy\", \".35em\") // vertical-align: middle\r\n  .attr('text-anchor', 'end')\r\n  .text(barLabel);\r\n// bars\r\nvar barsContainer = chart.append('g')\r\n  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); \r\nbarsContainer.selectAll(\"rect\").data(data).enter().append(\"rect\")\r\n  .attr('y', y)\r\n  .attr('height', yScale.rangeBand())\r\n  .attr('width', function(d) { return x(barValue(d)); })\r\n  .attr('stroke', 'white')\r\n  .attr('fill', 'steelblue');\r\n// bar value labels\r\nbarsContainer.selectAll(\"text\").data(data).enter().append(\"text\")\r\n  .attr(\"x\", function(d) { return x(barValue(d)); })\r\n  .attr(\"y\", yText)\r\n  .attr(\"dx\", 3) // padding-left\r\n  .attr(\"dy\", \".35em\") // vertical-align: middle\r\n  .attr(\"text-anchor\", \"start\") // text-align: right\r\n  .attr(\"fill\", \"black\")\r\n  .attr(\"stroke\", \"none\")\r\n  .text(function(d) { return d3.round(barValue(d), 2); });\r\n// start line\r\nbarsContainer.append(\"line\")\r\n  .attr(\"y1\", -gridChartOffset)\r\n  .attr(\"y2\", yScale.rangeExtent()[1] + gridChartOffset)\r\n  .style(\"stroke\", \"#000\");\r\n\r\n~~~","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcec0de%2Frud3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsourcec0de%2Frud3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcec0de%2Frud3/lists"}