A dive into D3

01.sh

# bash
$ echo 'export const apiKey = "<YOUR OPEN WEATHER MAP API KEY>";' >> javascripts/apiKey.js

02.js

// javascript
export const apiKey = "<YOUR OPEN WEATHER MAP API KEY>";

03.js

// javascript
export function drawChart(chartData) {

  // 1. Set the height, width, and margin of the chart based on the window and height of the navbar.
  let margin = {top: 50, right: 50, bottom: 50, left: 50},
      width = $('#chart').width() - margin.left - margin.right,
      height = window.innerHeight - margin.top - margin.bottom - $('#nav').height() - 20;

  // 2. Create an SVG using the dimensions set above.
  let svg = d3.select('#chart').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

}

04.html

<!-- html -->
<svg width="1270" height="896">
    <g transform="translate(50,50)"></g>
</svg>

05.js

// javascript
export function drawChart(chartData) {

  // [...]

  // 3. Set the scale for the y-axis, mapped from 0 to highest temperature + 10
  const yScale = d3.scaleLinear()
      .domain([0, d3.max(chartData, d => d.temp_max) + 10])
      .range([height, 0]);

  // 4. Set the scale for the x-axis, mapped to range of times in dataset
  const xScale = d3.scaleTime()
      .domain(d3.extent(chartData, d => d.time))
      .range([0, width]);
}

06.js

// javascript
[
    {
        temp_max: 62.4,
        time: 1589749200000
    },
    // [...]
]

07.js

// javascript
export function drawChart(chartData) {

  // [...]

  // 5. Append dots for each temperature
  svg.selectAll('.dot')
      .data(chartData)
      .enter().append('circle')
      .attr('class', 'dot')
      .attr('cx', (d) => xScale(d.time))
      .attr('cy', (d) => yScale(d.temp_max))
      .attr('r', 2);
}

08.html

<!-- html -->
<svg width="1270" height="896">
    <g transform="translate(50,50)">
        <circle class="dot" cx="0" cy="109.7779616604606" r="2"></circle>
        <circle class="dot" cx="30" cy="133.27044545579915" r="2"></circle>
        <circle class="dot" cx="60" cy="168.28961522548602" r="2"></circle>
        
        <!-- etc. -->
    </g>
</svg>

09.js

// javascript
export function drawChart(chartData) {

  // [...]
    const line = d3.line()
        .x(d => xScale(d.time))
        .y(d => yScale(d.temp_max));
}

10.js

// javascript
export function drawChart(chartData) {

  // [...]
    svg.append('path')
        .datum(chartData)
        .attr('d', line)
        .attr('class', 'line');
}

11.css

/* css */
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1;
}

12.js

// javascript
export function drawChart(chartData) {

  // [...]

  svg.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .call(d3.axisBottom(xScale)
      .ticks(d3.timeHour.every(6)));
}

13.js

// javascript
export function drawChart(chartData) {

  // [...]
  svg.append('g')
      .call(d3.axisLeft(yScale))
}

14.js

// javascript
export function drawChart(chartData) {

  // [...]
svg.append('g')
      .call(d3.axisLeft(yScale))
      .append('text')
      .attr('fill', '#000000')
      .text('Temperature (F)')
      .attr('transform', 'rotate(-90)')
      .attr('y', 5)
      .attr('dy', '0.71em')
      .attr('text-anchor', 'end');
}