Part of the video course: D3.js in Motion.
This line chart shows temperature in degrees celcius in San Francisco for one week. The data was collected from the (now defunct) Data Canvas - Sense Your City API.
| license: mit |
Part of the video course: D3.js in Motion.
This line chart shows temperature in degrees celcius in San Francisco for one week. The data was collected from the (now defunct) Data Canvas - Sense Your City API.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <title>Temperature Visualization</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .tick line { | |
| stroke: #C0C0BB; | |
| } | |
| .tick text { | |
| fill: #8E8883; | |
| font-size: 20pt; | |
| font-family: sans-serif; | |
| } | |
| .axis-label { | |
| fill: #635F5D; | |
| font-size: 40pt; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const xValue = d => d.timestamp; | |
| const xLabel = 'Time'; | |
| const yValue = d => d.temperature; | |
| const yLabel = 'Temperature'; | |
| const margin = { left: 120, right: 30, 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'); | |
| xAxisG.append('text') | |
| .attr('class', 'axis-label') | |
| .attr('x', innerWidth / 2) | |
| .attr('y', 100) | |
| .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.scaleTime(); | |
| const yScale = d3.scaleLinear(); | |
| const xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| .tickPadding(15) | |
| .ticks(5) | |
| .tickSize(-innerHeight); | |
| const yTicks = 5; | |
| const yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| .ticks(yTicks) | |
| .tickPadding(15) | |
| .tickSize(-innerWidth); | |
| const line = d3.line() | |
| .x(d => xScale(xValue(d))) | |
| .y(d => yScale(yValue(d))) | |
| .curve(d3.curveBasis); | |
| const row = d => { | |
| d.timestamp = new Date(d.timestamp); | |
| d.temperature = +d.temperature; | |
| return d; | |
| }; | |
| d3.csv('week_temperature_sf.csv', row, data => { | |
| xScale | |
| .domain(d3.extent(data, xValue)) | |
| .range([0, innerWidth]); | |
| yScale | |
| .domain(d3.extent(data, yValue)) | |
| .range([innerHeight, 0]) | |
| .nice(yTicks); | |
| g.append('path') | |
| .attr('fill', 'none') | |
| .attr('stroke', 'steelblue') | |
| .attr('stroke-width', 4) | |
| .attr('d', line(data)); | |
| xAxisG.call(xAxis); | |
| yAxisG.call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| �PNG | |