https://github.com/bitfancy/d3project
https://github.com/bitfancy/d3project
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bitfancy/d3project
- Owner: BitFancy
- Created: 2023-08-13T07:55:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-13T07:59:37.000Z (over 2 years ago)
- Last Synced: 2025-02-15T20:54:18.979Z (about 1 year ago)
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive Visualizations with D3.js
### Set Up
First, I organized my files and got my data.
### HTML
Next, I moved on to the basic index.html skeleton with navbar to hold my visualization.
```html
D3 Visualizations
United States Poverty and Obesity Trends
Poverty vs. Obesity Across 50 States
Correlations Discovered Between Poverty and Obesity
This above visualization shows a positive correlation between poverty and obesity.
Poorer states have higher incidences of obesity. The top states showing this correlation are
Mississippi, Louisiana, Alabama, Arkansas, and West Virginia. Other states show healthier populations
along with lower poverty rates, such as Colorado, Hawaii, and Massachusetts. Not all states show this
correlation. For example, North Dakota and Iowa both have relatively high obesity rates compared to
poverty rates.
```
### D3.js
Then, I used d3.js to make an interactive visualization that would be rendered on my website using the local server.
```javascript
// canvas and svg width, height, and margins
const svgWidth = 900
const svgHeight = 450
const margin = {
top: 25,
right: 50,
bottom: 70,
left: 90
}
const width = svgWidth - margin.left - margin.right
const height = svgHeight - margin.top - margin.bottom
// canvas
const svg = d3.select('#scatter').append('svg').attr('width', svgWidth).attr('height',svgHeight)
// chartGroup
const chartGroup = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)
// data
const dataFile = 'assets/data/data.csv'
d3.csv(dataFile).then(visualization)
// plot function
function visualization(states) {
// data loop
states.map(function (data) {
data.poverty = +data.poverty
data.obesity = +data.obesity
})
// scale fnxs with min and max (plus a little more space)
const linearScaleX = d3.scaleLinear().domain([8,d3.max(states,(d,i)=>d.poverty+0.5)]).range([0, width])
const linearScaleY = d3.scaleLinear().domain([20,d3.max(states,(d,i)=>d.obesity+1)]).range([height, 0])
// call scale fnx with axes fnxs with set tick marks on x axis
const bottomAxis = d3.axisBottom(linearScaleX).ticks(10)
const leftAxis = d3.axisLeft(linearScaleY)
// append axes to chartGroup
chartGroup.append('g').attr('transform', `translate(0, ${height})`).call(bottomAxis)
chartGroup.append('g').call(leftAxis)
// label axes
chartGroup.append('text').attr('transform','rotate(-90)').attr('x',0-height/2).attr('y',0-margin.left+40)
.attr('dy','1em').attr('class','aText').text('Obese (%)')
chartGroup.append('text').attr('transform',`translate(${width/2},${height+margin.top+20})`).attr('class','aText').text('In Poverty (%)')
// create plot markers
let circlesGroup = chartGroup.selectAll('circle').data(states).enter().append('circle')
.attr('cx',d=>linearScaleX(d.poverty)).attr('cy',d=>linearScaleY(d.obesity))
.attr('r','17').attr('fill','#9AAAD1').attr('opacity','0.85')
// add state abbreviations to circles (centered on both x and y of circle)
circlesGroup = chartGroup.selectAll().data(states).enter().append('text')
.attr('x',d=>linearScaleX(d.poverty)).attr('y',(d,i)=>linearScaleY(d.obesity)+4)
.style('font-size','15px').style('text-anchor','middle').style('fill','white').text(d=>(d.abbr))
// make tooltip
const toolTip = d3.tip().attr('class','d3-tip').offset([80,-65])
.html(function(d){return(`${d.state}
Poverty: ${d.poverty}%
Obesity: ${d.obesity}%`)})
// add tooltip to chart
chartGroup.call(toolTip)
// tooltip event listeners (show/hide)
circlesGroup.on('mouseover',function(data){toolTip.show(data,this)})
.on('mouseout',function(data){toolTip.hide(data)})
}
```
### Styles
Last, I added styles to give a little bit more personalization.
```css
.navbar-custom {
background-color: #9AAAD1;
}
.navbar-brand:link,
.navbar-brand:visited,
.navbar-brand:hover,
.navbar-brand:active {
color: white;
font-size: 0.9em;
}
#plot-title {
padding-top: 10px;
}
#caption {
text-align: center;
}
footer {
background-color: #9AAAD1;
color: white;
font-size: 9pt;
text-align: center;
vertical-align: middle;
line-height: 45px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
footer p {
margin: 0;
font-size: 0.9em;
}
#d3-link:link,
#d3-link:visited,
#d3-link:hover,
#d3-link:active {
color: white !important;
}
#gh-icon {
width: 30px;
height: 30px;
background-size: 100%;
}
```
And I styled my D3 Visualization with its own .css file.
```css
.aText {
font-family: sans-serif;
font-size: 16px;
text-anchor: middle;
}
.active {
font-weight: bold;
fill: #000;
transition: fill 0.3s ease-out;
text-anchor: middle;
}
.inactive {
font-weight: lighter;
fill: #c9c9c9;
transition: fill 0.3s ease-out;
text-anchor: middle;
}
.inactive:hover {
fill: #000;
cursor: pointer;
}
/* font size dependent on radius, see app.js */
.stateText {
font-family: sans-serif;
fill: #fff;
text-anchor: middle;
}
.stateCircle {
fill: #89bdd3;
stroke: #e3e3e3;
}
.chart {
display: block;
margin: 0;
}
.d3-tip {
padding: 10px;
font-size: 14px;
line-height: 1;
line-height: 1.5em;
color: #fff;
text-align: center;
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
}
/* Mobile Rules */
@media screen and (max-width: 530px) {
.stateText {
display: none;
}
.aText {
font-size: 14px;
}
}
@media screen and (max-width: 400px) {
.aText {
font-size: 13px;
}
}
```
