This is an exploratory visualization looking at the relationship between the total number of users and the apparent temperature - a feature that reflects the effects of temperature and humidity on perceived comfort.
This data set contains the number of bike share system users (casual and registered) for each day (and hour) for two years (Jan 2011 - Dec 2012), as well as the day type (holiday, workingday), weather situation, temperature and humidity, apparent temperature and windspeed.
This data is from UCI Machine Learning Repository: Bike Sharing Data Set
The dataset file can be found here as a zip archive.
forked from curran's block: Stylized Scatter Plot with Color Legend
forked from sajudson's block: CS Degrees Awarded 1971-2011
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> <title>DC Bike Share Test Chart</title> <style> body { margin: 0px; } .domain { display: none; } .tick line { stroke: #C0C0BB; } .tick text, .legendCells text { fill: #8E8883; font-size: 8pt; font-family: sans-serif; } .axis-label, .legend-label { fill: #635F5D; font-size: 12pt; font-family: sans-serif; } </style> </head> <body> <svg width="960" height="500"></svg> <script> const xValue = d => d.atemp; const xLabel = 'Temperature'; const yValue = d => d.cnt; const yLabel = 'Users'; const margin = { left: 120, right: 300, top: 20, bottom: 120 }; const svg = d3.select('svg'); const width = svg.attr('width'); const height = svg.attr('height'); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const xAxisG = g.append('g') .attr('transform', `translate(0, ${innerHeight})`); const yAxisG = g.append('g'); const colorLegendG = g.append('g') .attr('transform', `translate(${innerWidth + 60}, 150)`); xAxisG.append('text') .attr('class', 'axis-label') .attr('x', innerWidth / 2) .attr('y', 75) .text(xLabel); yAxisG.append('text') .attr('class', 'axis-label') .attr('x', -innerHeight / 2) .attr('y', -60) .attr('transform', `rotate(-90)`) .style('text-anchor', 'middle') .text(yLabel); const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear(); const xAxis = d3.axisBottom() .scale(xScale) .tickPadding(15) .tickFormat(d3.format('0')) .tickSize(-innerHeight); const yAxis = d3.axisLeft() .scale(yScale) .ticks(5) .tickPadding(15) .tickSize(-innerWidth); const row = d => { d.instant = +d.instant; //d.dteday = +d.dteday; //need to parse date d.season = +d.season; d.yr = +d.yr; d.mnth = +d.mnth; d.holiday = +d.holiday; //flag d.weekday = +d.weekday; //integer day of week (0-6) d.workingday = +d.workingday; //flag d.weathersit = +d.weathersit; //(1-4) d.temp = +d.temp; d.atemp = +d.atemp; d.hum = +d.hum; d.windspeed = +d.windspeed; d.casual = +d.casual; d.registered = +d.registered; d.cnt = +d.cnt; return d; }; d3.csv("day.csv", row, data => { xScale .domain(d3.extent(data, xValue)) .range([0, innerWidth]) .nice(); yScale .domain(d3.extent(data, yValue)) .range([innerHeight, 0]) .nice(); g.selectAll('circle').data(data) .enter().append('circle') .attr('cx', d => xScale(xValue(d))) .attr('cy', d => yScale(yValue(d))) .attr('fill', "green") .attr('fill-opacity', .2) .attr('r', 5); xAxisG.call(xAxis); yAxisG.call(yAxis); //colorLegendG.call(colorLegend) // .selectAll('.cell text') // .attr('dy', '0.1em'); }); </script> </body></html> https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js