Line Chart with Multiple Lines

index.js

import {

select,

csv,

scaleLinear,

scaleTime,

scaleOrdinal,

extent,

axisLeft,

axisBottom,

line,

curveBasis,

nest,

schemeCategory10,

descending

} from 'd3';

import { colorLegend } from './colorLegend';

const svg = select('svg');

const width = +svg.attr('width');

const height = +svg.attr('height');

const render = data => {

const title = 'A Week of Temperature Around the World';

const xValue = d => d.timestamp;

const xAxisLabel = 'Time';

const yValue = d => d.temperature;

const circleRadius = 6;

const yAxisLabel = 'Temperature';

const colorValue = d => d.city;

const margin = { top: 60, right: 160, bottom: 88, left: 105 };

const innerWidth = width - margin.left - margin.right;

Last edited Jun 28, 2019

Created on Oct 15, 2018

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed