Part of the video course: D3.js in Motion.
This scatter plot + line chart hybrid 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: 50pt;
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)
.tickSize(-innerHeight);
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5)
.tickPadding(15)
.tickSize(-innerWidth);
const line = d3.line()
.x(d => xScale(xValue(d)))
.y(d => yScale(yValue(d)));
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])
.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-opacity', 0.6)
.attr('r', 3);
g.append('path')
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('d', line(data));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
});
</script>
</body>
</html>
timestamp,temperature
2015-03-20T21:00:00.000Z,23.9516625615764
2015-03-20T22:00:00.000Z,23.0728888291688
2015-03-20T23:00:00.000Z,22.2708190476318
2015-03-21T00:00:00.000Z,21.3394373423804
2015-03-21T01:00:00.000Z,20.1010743049325
2015-03-21T02:00:00.000Z,18.4150717551479
2015-03-21T03:00:00.000Z,17.7483817583905
2015-03-21T04:00:00.000Z,17.6589726749868
2015-03-21T05:00:00.000Z,17.0922334804965
2015-03-21T06:00:00.000Z,17.9022626474071
2015-03-21T07:00:00.000Z,17.9134315019288
2015-03-21T08:00:00.000Z,17.9623415917395
2015-03-21T09:00:00.000Z,18.6299049947767
2015-03-21T10:00:00.000Z,18.7246461115231
2015-03-21T11:00:00.000Z,18.3452032121395
2015-03-21T12:00:00.000Z,17.9509405148159
2015-03-21T13:00:00.000Z,17.6459367384257
2015-03-21T14:00:00.000Z,18.0026108196051
2015-03-21T15:00:00.000Z,18.6413944821435
2015-03-21T16:00:00.000Z,19.3671431509997
2015-03-21T17:00:00.000Z,20.8082012083461
2015-03-21T18:00:00.000Z,22.5238576663828
2015-03-21T19:00:00.000Z,24.4214051463704
2015-03-21T20:00:00.000Z,26.2049693716955
2015-03-21T21:00:00.000Z,26.579802484894
2015-03-21T22:00:00.000Z,26.5525094442272
2015-03-21T23:00:00.000Z,23.9758724990251
2015-03-22T00:00:00.000Z,20.7705334007582
2015-03-22T01:00:00.000Z,19.5826361563267
2015-03-22T02:00:00.000Z,18.7265399946616
2015-03-22T03:00:00.000Z,18.2886029132647
2015-03-22T04:00:00.000Z,17.4904771411586
2015-03-22T05:00:00.000Z,17.1831430954037
2015-03-22T06:00:00.000Z,17.2898856656444
2015-03-22T07:00:00.000Z,17.8578100360021
2015-03-22T08:00:00.000Z,18.1992192220978
2015-03-22T09:00:00.000Z,18.13420905954
2015-03-22T10:00:00.000Z,18.5888149684944
2015-03-22T11:00:00.000Z,18.6733003026984
2015-03-22T12:00:00.000Z,19.1600833190036
2015-03-22T13:00:00.000Z,19.207095797011
2015-03-22T14:00:00.000Z,18.9847082241235
2015-03-22T15:00:00.000Z,19.4293802064908
2015-03-22T16:00:00.000Z,20.8493124700409
2015-03-22T17:00:00.000Z,21.5898145184046
2015-03-22T18:00:00.000Z,22.3397182467298
2015-03-22T19:00:00.000Z,22.7891858876349
2015-03-22T20:00:00.000Z,23.3412628564144
2015-03-22T21:00:00.000Z,23.4926420057589
2015-03-22T22:00:00.000Z,23.0962283240861
2015-03-22T23:00:00.000Z,22.2667502918227
2015-03-23T00:00:00.000Z,21.0266142557277
2015-03-23T01:00:00.000Z,20.0093349857605
2015-03-23T02:00:00.000Z,18.9851414732381
2015-03-23T03:00:00.000Z,18.5245615004214
2015-03-23T04:00:00.000Z,18.290694254732
2015-03-23T05:00:00.000Z,18.0595508666643
2015-03-23T06:00:00.000Z,18.4732789951039
2015-03-23T07:00:00.000Z,18.7258481532495
2015-03-23T08:00:00.000Z,18.5595128641976
2015-03-23T09:00:00.000Z,18.179674037842
2015-03-23T10:00:00.000Z,17.7681299392415
2015-03-23T11:00:00.000Z,17.443021321053
2015-03-23T12:00:00.000Z,17.3451205175492
2015-03-23T13:00:00.000Z,17.4374701133724
2015-03-23T14:00:00.000Z,17.8929191631296
2015-03-23T15:00:00.000Z,18.9122039984753
2015-03-23T16:00:00.000Z,19.6161969984469
2015-03-23T17:00:00.000Z,20.7299868156002
2015-03-23T18:00:00.000Z,21.7689130719553
2015-03-23T19:00:00.000Z,22.5533898355016
2015-03-23T20:00:00.000Z,22.8372668296634
2015-03-23T21:00:00.000Z,23.2014773800322
2015-03-23T22:00:00.000Z,22.5682062882985
2015-03-23T23:00:00.000Z,22.3205675513796
2015-03-24T00:00:00.000Z,20.8661118605035
2015-03-24T01:00:00.000Z,18.5360183512352
2015-03-24T02:00:00.000Z,17.5156724451801
2015-03-24T03:00:00.000Z,17.2066897483676
2015-03-24T04:00:00.000Z,17.1974604599623
2015-03-24T05:00:00.000Z,17.3377835934013
2015-03-24T06:00:00.000Z,17.28662295757
2015-03-24T07:00:00.000Z,17.4291104924263
2015-03-24T08:00:00.000Z,17.4228793012653
2015-03-24T09:00:00.000Z,17.4209561166271
2015-03-24T10:00:00.000Z,17.141757829703
2015-03-24T11:00:00.000Z,17.3048584589793
2015-03-24T12:00:00.000Z,17.337482794781
2015-03-24T13:00:00.000Z,17.7016509341158
2015-03-24T14:00:00.000Z,17.5637528905341
2015-03-24T15:00:00.000Z,18.8276163388499
2015-03-24T16:00:00.000Z,19.4404648699534
2015-03-24T17:00:00.000Z,20.5646049670802
2015-03-24T18:00:00.000Z,21.9525507884113
2015-03-24T19:00:00.000Z,21.9040221846194
2015-03-24T20:00:00.000Z,22.8197541616282
2015-03-24T21:00:00.000Z,22.2390831913042
2015-03-24T22:00:00.000Z,22.4688244906963
2015-03-24T23:00:00.000Z,21.9461828791739
2015-03-25T00:00:00.000Z,21.3218883084538
2015-03-25T01:00:00.000Z,19.9688738415096
2015-03-25T02:00:00.000Z,18.9409031033049
2015-03-25T03:00:00.000Z,18.1829931467353
2015-03-25T04:00:00.000Z,17.6071132686007
2015-03-25T05:00:00.000Z,17.4155712472229
2015-03-25T06:00:00.000Z,17.8112238813252
2015-03-25T07:00:00.000Z,18.0118371454174
2015-03-25T08:00:00.000Z,17.9925110740977
2015-03-25T09:00:00.000Z,17.9146107460869
2015-03-25T10:00:00.000Z,17.6354297651737
2015-03-25T11:00:00.000Z,17.2990959392658
2015-03-25T12:00:00.000Z,16.8942534144482
2015-03-25T13:00:00.000Z,17.0215911252788
2015-03-25T14:00:00.000Z,17.5370547200027
2015-03-25T15:00:00.000Z,19.6239569219906
2015-03-25T16:00:00.000Z,21.4284862546897
2015-03-25T17:00:00.000Z,22.5971622932944
2015-03-25T18:00:00.000Z,24.4516364021043
2015-03-25T19:00:00.000Z,26.314179825294
2015-03-25T20:00:00.000Z,27.2966725797272
2015-03-25T21:00:00.000Z,27.8594008881709
2015-03-25T22:00:00.000Z,26.98771523591
2015-03-25T23:00:00.000Z,26.1419652896808
2015-03-26T00:00:00.000Z,24.2967135065912
2015-03-26T01:00:00.000Z,21.2627783997077
2015-03-26T02:00:00.000Z,19.6223366524463
2015-03-26T03:00:00.000Z,18.9702936572059
2015-03-26T04:00:00.000Z,18.64173108115
2015-03-26T05:00:00.000Z,18.5430028446263
2015-03-26T06:00:00.000Z,18.2597209484404
2015-03-26T07:00:00.000Z,17.8251835175158
2015-03-26T08:00:00.000Z,17.4726877440558
2015-03-26T09:00:00.000Z,17.651946077925
2015-03-26T10:00:00.000Z,17.7491791888976
2015-03-26T11:00:00.000Z,17.5917881825657
2015-03-26T12:00:00.000Z,17.5239416379086
2015-03-26T13:00:00.000Z,17.5307201091079
2015-03-26T14:00:00.000Z,18.2489964460844
2015-03-26T15:00:00.000Z,20.2797517883074
2015-03-26T16:00:00.000Z,21.888709612845
2015-03-26T17:00:00.000Z,23.8693783046019
2015-03-26T18:00:00.000Z,25.6434924437705
2015-03-26T19:00:00.000Z,27.3338701714523
2015-03-26T20:00:00.000Z,30.235307632747
2015-03-26T21:00:00.000Z,31.6784014189275
2015-03-26T22:00:00.000Z,32.4243323492878
2015-03-26T23:00:00.000Z,33.1688980688728
2015-03-27T00:00:00.000Z,30.8713221141196
2015-03-27T01:00:00.000Z,26.8944097638179
2015-03-27T02:00:00.000Z,24.6128150483182
2015-03-27T03:00:00.000Z,22.889746429207
2015-03-27T04:00:00.000Z,21.7148736202902
2015-03-27T05:00:00.000Z,20.8438711038614
2015-03-27T06:00:00.000Z,19.2559699722154
2015-03-27T07:00:00.000Z,18.337368653838
2015-03-27T08:00:00.000Z,17.6177708093268
2015-03-27T09:00:00.000Z,17.1977444392481
2015-03-27T10:00:00.000Z,16.7043132969425
2015-03-27T11:00:00.000Z,16.2471811295094
2015-03-27T12:00:00.000Z,16.087861898997
2015-03-27T13:00:00.000Z,15.6362635324538
2015-03-27T14:00:00.000Z,15.692528763157
2015-03-27T15:00:00.000Z,16.1186855064984
2015-03-27T16:00:00.000Z,17.3886258325874
2015-03-27T17:00:00.000Z,18.2540910121364
2015-03-27T18:00:00.000Z,19.5148327389508
2015-03-27T19:00:00.000Z,20.6023266315466
2015-03-27T20:00:00.000Z,21.3854066767194
2015-03-27T21:00:00.000Z,21.9084983994613