{"id":18369124,"url":"https://github.com/bitfancy/d3project","last_synced_at":"2026-01-22T12:07:44.559Z","repository":{"id":188018482,"uuid":"677957413","full_name":"BitFancy/d3project","owner":"BitFancy","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-13T07:59:37.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T20:54:18.979Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/BitFancy.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,"governance":null}},"created_at":"2023-08-13T07:55:45.000Z","updated_at":"2024-02-20T09:02:17.000Z","dependencies_parsed_at":"2023-08-13T10:24:03.897Z","dependency_job_id":"ca20efe9-7cd2-4168-8525-5a13387093a0","html_url":"https://github.com/BitFancy/d3project","commit_stats":null,"previous_names":["fancydeveloper/d3project","bitfancy/d3project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2Fd3project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2Fd3project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2Fd3project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2Fd3project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BitFancy","download_url":"https://codeload.github.com/BitFancy/d3project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281424,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-05T23:28:31.479Z","updated_at":"2026-01-22T12:07:39.510Z","avatar_url":"https://github.com/BitFancy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Visualizations with D3.js\n\n### Set Up\n\nFirst, I organized my files and got my data.\n\n### HTML\n\nNext, I moved on to the basic index.html skeleton with navbar to hold my visualization.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang='en'\u003e\n\u003chead\u003e\n  \u003cmeta charset='UTF-8'\u003e\n  \u003cmeta name='viewport' content='width=device-width, initial-scale=1.0'\u003e\n  \u003cmeta http-equiv='X-UA-Compatible' content='ie=edge'\u003e\n  \u003ctitle\u003eD3 Visualizations\u003c/title\u003e\n  \u003cscript src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'\n    crossorigin='anonymous'\u003e\u003c/script\u003e\n  \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49'\n    crossorigin='anonymous'\u003e\u003c/script\u003e\n  \u003cscript src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy'\n    crossorigin='anonymous'\u003e\u003c/script\u003e\n  \u003clink rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'\n    crossorigin='anonymous'\u003e\n  \u003clink rel='stylesheet' href='assets/css/style.css'\u003e\n  \u003clink rel='stylesheet' href='assets/css/d3Style.css'\u003e\n\n\u003c/head\u003e\n\n\u003cbody\u003e\n\n  \u003cnav class='navbar navbar-custom'\u003e\n    \u003ca class='navbar-brand' href='index.html'\u003eUnited States Poverty and Obesity Trends\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/nav\u003e\n\n  \u003cdiv class='container-fluid'\u003e\n\n    \u003cdiv class='row'\u003e\n      \u003cdiv class='col text-center'\u003e\n        \u003ch4 id='plot-title'\u003ePoverty vs. Obesity Across 50 States\u003c/h4\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class='row'\u003e\n      \u003cdiv class='col text-center'\u003e\n        \u003cdiv id='scatter'\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class='row justify-content-center'\u003e\n      \u003cdiv class='col-md-8'\u003e\n\n        \u003cdiv class='row justify-content-center'\u003e\n          \u003ch5 id='caption'\u003eCorrelations Discovered Between Poverty and Obesity\u003c/h5\u003e\n        \u003c/div\u003e\n        \u003cdiv class='row'\u003e\u003cp\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;This above visualization shows a positive correlation between poverty and obesity.\n            Poorer states have higher incidences of obesity. The top states showing this correlation are\n            Mississippi, Louisiana, Alabama, Arkansas, and West Virginia. Other states show healthier populations\n            along with lower poverty rates, such as Colorado, Hawaii, and Massachusetts. Not all states show this\n            correlation. For example, North Dakota and Iowa both have relatively high obesity rates compared to\n            poverty rates.\n          \u003c/p\u003e\n        \u003c/div\u003e\n\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\n  \u003cfooter\u003e\n    \u003cdiv class='footer'\u003e\n      Made with 💜 and \u003ca id='d3-link' href='https://d3js.org/' target='_blank' rel='noopener noreferrer'\u003eD3.js\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;Kathleen Graham 2019\u0026nbsp;\u0026nbsp;\n      \u003ca href='https://github.com/kathleengraham/interactive-visualizations-with-d3-js' target='_blank' rel='noopener noreferrer'\u003e\u003cimg id='gh-icon' src='icons8-github-64.png'\u003e\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/footer\u003e\n\n  \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js'\u003e\u003c/script\u003e\n  \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js'\u003e\u003c/script\u003e\n  \u003cscript type='text/javascript' src='assets/js/app.js'\u003e\u003c/script\u003e\n\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\n### D3.js\n\nThen, I used d3.js to make an interactive visualization that would be rendered on my website using the local server.\n\n```javascript\n// canvas and svg width, height, and margins\nconst svgWidth = 900\nconst svgHeight = 450\nconst margin = {\n    top: 25,\n    right: 50,\n    bottom: 70,\n    left: 90\n  }\nconst width = svgWidth - margin.left - margin.right\nconst height = svgHeight - margin.top - margin.bottom\n\n// canvas\nconst svg = d3.select('#scatter').append('svg').attr('width', svgWidth).attr('height',svgHeight)\n\n// chartGroup\nconst chartGroup = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)\n\n// data\nconst dataFile = 'assets/data/data.csv'\nd3.csv(dataFile).then(visualization)\n\n// plot function\nfunction visualization(states) {\n  \n  // data loop\n  states.map(function (data) {\n    data.poverty = +data.poverty\n    data.obesity = +data.obesity\n  })\n\n  // scale fnxs with min and max (plus a little more space)\n  const linearScaleX = d3.scaleLinear().domain([8,d3.max(states,(d,i)=\u003ed.poverty+0.5)]).range([0, width])\n  const linearScaleY = d3.scaleLinear().domain([20,d3.max(states,(d,i)=\u003ed.obesity+1)]).range([height, 0])\n\n  // call scale fnx with axes fnxs with set tick marks on x axis\n  const bottomAxis =  d3.axisBottom(linearScaleX).ticks(10)\n  const leftAxis =  d3.axisLeft(linearScaleY)\n\n  // append axes to chartGroup\n  chartGroup.append('g').attr('transform', `translate(0, ${height})`).call(bottomAxis)\n  chartGroup.append('g').call(leftAxis)\n\n  // label axes\n  chartGroup.append('text').attr('transform','rotate(-90)').attr('x',0-height/2).attr('y',0-margin.left+40)\n    .attr('dy','1em').attr('class','aText').text('Obese (%)')\n\n  chartGroup.append('text').attr('transform',`translate(${width/2},${height+margin.top+20})`).attr('class','aText').text('In Poverty (%)')\n\n  // create plot markers\n  let circlesGroup = chartGroup.selectAll('circle').data(states).enter().append('circle')\n    .attr('cx',d=\u003elinearScaleX(d.poverty)).attr('cy',d=\u003elinearScaleY(d.obesity))\n    .attr('r','17').attr('fill','#9AAAD1').attr('opacity','0.85')\n    \n  // add state abbreviations to circles (centered on both x and y of circle)\n  circlesGroup = chartGroup.selectAll().data(states).enter().append('text')\n    .attr('x',d=\u003elinearScaleX(d.poverty)).attr('y',(d,i)=\u003elinearScaleY(d.obesity)+4)\n    .style('font-size','15px').style('text-anchor','middle').style('fill','white').text(d=\u003e(d.abbr))\n\n  // make tooltip\n  const toolTip = d3.tip().attr('class','d3-tip').offset([80,-65])\n    .html(function(d){return(`\u003cstrong\u003e${d.state}\u003c/strong\u003e\u003cbr\u003ePoverty: ${d.poverty}%\u003cbr\u003eObesity: ${d.obesity}%`)})\n\n  // add tooltip to chart\n  chartGroup.call(toolTip)\n\n  // tooltip event listeners (show/hide)\n  circlesGroup.on('mouseover',function(data){toolTip.show(data,this)})\n    .on('mouseout',function(data){toolTip.hide(data)})\n}\n```\n\n### Styles\n\nLast, I added styles to give a little bit more personalization.\n\n```css\n.navbar-custom {\n  background-color: #9AAAD1;\n}\n\n.navbar-brand:link,\n.navbar-brand:visited,\n.navbar-brand:hover,\n.navbar-brand:active {\n  color: white;\n  font-size: 0.9em;\n}\n\n#plot-title {\n  padding-top: 10px;\n}\n\n#caption {\n  text-align: center;\n}\n\nfooter {\n  background-color: #9AAAD1;\n  color: white; \n  font-size: 9pt; \n  text-align: center; \n  vertical-align: middle;\n  line-height: 45px;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n\n}\n\nfooter p {\n  margin: 0;\n  font-size: 0.9em;\n}\n\n#d3-link:link,\n#d3-link:visited,\n#d3-link:hover,\n#d3-link:active {\n  color: white !important;\n}\n\n#gh-icon {\n  width: 30px;\n  height: 30px;\n  background-size: 100%;\n}\n```\n\nAnd I styled my D3 Visualization with its own .css file.\n\n```css\n.aText {\n  font-family: sans-serif;\n  font-size: 16px;\n  text-anchor: middle;\n}\n\n.active {\n  font-weight: bold;\n  fill: #000;\n  transition: fill 0.3s ease-out;\n  text-anchor: middle;\n}\n\n.inactive {\n  font-weight: lighter;\n  fill: #c9c9c9;\n  transition: fill 0.3s ease-out;\n  text-anchor: middle;\n}\n\n.inactive:hover {\n  fill: #000;\n  cursor: pointer;\n}\n\n/* font size dependent on radius, see app.js */\n.stateText {\n  font-family: sans-serif;\n  fill: #fff;\n  text-anchor: middle;\n}\n\n.stateCircle {\n  fill: #89bdd3;\n  stroke: #e3e3e3;\n}\n\n.chart {\n  display: block;\n  margin: 0;\n}\n\n.d3-tip {\n  padding: 10px;\n  font-size: 14px;\n  line-height: 1;\n  line-height: 1.5em;\n  color: #fff;\n  text-align: center;\n  background: rgba(0, 0, 0, 0.8);\n  border-radius: 4px;\n}\n\n/* Mobile Rules */\n@media screen and (max-width: 530px) {\n  .stateText {\n    display: none;\n  }\n\n  .aText {\n    font-size: 14px;\n  }\n}\n\n@media screen and (max-width: 400px) {\n  .aText {\n    font-size: 13px;\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitfancy%2Fd3project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitfancy%2Fd3project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitfancy%2Fd3project/lists"}