puripant/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A line chart whose data points work as tabs. Mouseover to view the aggregated value. Click to switch the values in the data table.

  
## index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Line Chart as Tabs</title>

<div class="container">
  <div id="chart"></div>
  <div id="datatable">
    <table>
      <thead>
        <th></th>
        <th></th>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Tether tooltip JS dependencies -->
<script src="https://raw.githubusercontent.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
<script src="https://raw.githubusercontent.com/HubSpot/drop/master/dist/js/drop.min.js"></script>
<script src="https://raw.githubusercontent.com/HubSpot/tooltip/master/dist/js/tooltip.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/HubSpot/tooltip/master/dist/css/tooltip-theme-arrows.css">

<!-- ThreesyLine dependencies. Styles can be overriden -->
<script src="https://raw.githubusercontent.com/threesy/threesy-line/master/dist/threesy-line.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/threesy/threesy-line/master/dist/threesy-line.css">

<script src="line-tabs.js"></script>
<link rel="stylesheet" href="line-tabs.css">

## line-tabs.css
html {
  font-size: 12px;
  font-family: 'proxima-nova', 'Helvetica Neue', sans-serif;
}

.container {
  width: 500px;
  margin: 20px auto;
  text-align: center;
}

.axis {
  opacity: 0.5;
}

.threesy-line .threesy-grid-line-x {
  stroke: lightgray;
}
.threesy-line .threesy-grid-line-y {
  stroke: #FF576C;
  stroke-dasharray: 5;
  display: none;
}

.threesy-line path.line {
  fill: none;
  stroke: darkgray;
}

.threesy-line .threesy-data-point {
  fill: darkgray;
  stroke: darkgray;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th {
  font-size: 2rem;
  font-weight: 200;
  padding: 8px;
}
tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}
td {
  padding: 8px;
}

## line-tabs.js
/* global ThreesyLine document d3 */

const titles = ['index 1', 'index 2', 'index 3', 'index 4', 'index 5',
  'index 6', 'index 7', 'index 8', 'index 9', 'index 10'];
const data = [
  { x: 'Oct 2016' },
  { x: 'Nov 2016' },
  { x: 'Dec 2016' },
  { x: 'Jan 2017' },
  { x: 'Feb 2017' },
];
data.forEach((_, i) => {
  data[i].raw = [...Array(titles.length)].map(() => Math.random());
  data[i].y = data[i].raw.reduce((a, b) => a + b); // plot average
});
let selectedDatum = data[data.length - 1];

const active_color = '#FF576C';
const inactive_color = 'darkgray';

const lineChart = new ThreesyLine({
  height: 200,
  width: 500,
  element: '#chart',
  classes: ['threesy-line-chart', 'line-chart'],
  data,
});
const getValue = ThreesyLine.getValue;
lineChart.draw();

const table = d3.select('#datatable');
const tbody = table.select('tbody');
const tr = tbody.selectAll('tr')
    .data(selectedDatum.raw)
  .enter().append('tr');

const selectPoint = (datum) => {
  // Update chart
  d3.selectAll('.threesy-data-point')
      .style('stroke', inactive_color)
      .style('fill', inactive_color)
    .filter(d => d === datum)
      .style('stroke', active_color)
      .style('fill', active_color);
  d3.selectAll('.threesy-grid-line-x')
      .style('stroke', 'lightgray')
      .style('stroke-dasharray', '5, 5')
    .filter(d => d === datum)
      .style('stroke', active_color)
      .style('stroke-dasharray', '5, 0');
  d3.selectAll('.threesy-grid-line-y')
      .style('display', 'none')
    .filter(d => d === datum)
      .style('display', 'unset');

  // Update table
  selectedDatum = datum;
  const td = tr.selectAll('td')
    .data((d, i) => [titles[i], selectedDatum.raw[i].toFixed(2)], d => d);
  td.exit().remove();
  td.enter().append('td')
    .text(d => d);
};
selectPoint(selectedDatum);

// Enable tooltips using Tether tooltip.
lineChart.dataPoints
  .attr('data-tooltip', d => `${getValue(lineChart.accessorX, d)}: ${getValue(lineChart.accessorY, d).toFixed(2)}`)
  .attr('data-tooltip-position', 'top center');
d3.selectAll('.threesy-data-point')
  .on('click', (d) => {
    selectPoint(d);
  });

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<title>Line Chart as Tabs</title>

	<div class="container">
	<div id="chart"></div>
	<div id="datatable">
	<table>
	<thead>
	<th></th>
	<th></th>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<!-- Tether tooltip JS dependencies -->
	<script src="https://raw.githubusercontent.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
	<script src="https://raw.githubusercontent.com/HubSpot/drop/master/dist/js/drop.min.js"></script>
	<script src="https://raw.githubusercontent.com/HubSpot/tooltip/master/dist/js/tooltip.min.js"></script>
	<link rel="stylesheet" href="https://raw.githubusercontent.com/HubSpot/tooltip/master/dist/css/tooltip-theme-arrows.css">

	<!-- ThreesyLine dependencies. Styles can be overriden -->
	<script src="https://raw.githubusercontent.com/threesy/threesy-line/master/dist/threesy-line.js"></script>
	<link rel="stylesheet" href="https://raw.githubusercontent.com/threesy/threesy-line/master/dist/threesy-line.css">

	<script src="line-tabs.js"></script>
	<link rel="stylesheet" href="line-tabs.css">
	html {
	font-size: 12px;
	font-family: 'proxima-nova', 'Helvetica Neue', sans-serif;
	}

	.container {
	width: 500px;
	margin: 20px auto;
	text-align: center;
	}

	.axis {
	opacity: 0.5;
	}

	.threesy-line .threesy-grid-line-x {
	stroke: lightgray;
	}
	.threesy-line .threesy-grid-line-y {
	stroke: #FF576C;
	stroke-dasharray: 5;
	display: none;
	}

	.threesy-line path.line {
	fill: none;
	stroke: darkgray;
	}

	.threesy-line .threesy-data-point {
	fill: darkgray;
	stroke: darkgray;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}
	th {
	font-size: 2rem;
	font-weight: 200;
	padding: 8px;
	}
	tbody tr:nth-child(odd) {
	background-color: #f5f5f5;
	}
	td {
	padding: 8px;
	}
	/* global ThreesyLine document d3 */

	const titles = ['index 1', 'index 2', 'index 3', 'index 4', 'index 5',
	'index 6', 'index 7', 'index 8', 'index 9', 'index 10'];
	const data = [
	{ x: 'Oct 2016' },
	{ x: 'Nov 2016' },
	{ x: 'Dec 2016' },
	{ x: 'Jan 2017' },
	{ x: 'Feb 2017' },
	];
	data.forEach((_, i) => {
	data[i].raw = [...Array(titles.length)].map(() => Math.random());
	data[i].y = data[i].raw.reduce((a, b) => a + b); // plot average
	});
	let selectedDatum = data[data.length - 1];

	const active_color = '#FF576C';
	const inactive_color = 'darkgray';

	const lineChart = new ThreesyLine({
	height: 200,
	width: 500,
	element: '#chart',
	classes: ['threesy-line-chart', 'line-chart'],
	data,
	});
	const getValue = ThreesyLine.getValue;
	lineChart.draw();

	const table = d3.select('#datatable');
	const tbody = table.select('tbody');
	const tr = tbody.selectAll('tr')
	.data(selectedDatum.raw)
	.enter().append('tr');

	const selectPoint = (datum) => {
	// Update chart
	d3.selectAll('.threesy-data-point')
	.style('stroke', inactive_color)
	.style('fill', inactive_color)
	.filter(d => d === datum)
	.style('stroke', active_color)
	.style('fill', active_color);
	d3.selectAll('.threesy-grid-line-x')
	.style('stroke', 'lightgray')
	.style('stroke-dasharray', '5, 5')
	.filter(d => d === datum)
	.style('stroke', active_color)
	.style('stroke-dasharray', '5, 0');
	d3.selectAll('.threesy-grid-line-y')
	.style('display', 'none')
	.filter(d => d === datum)
	.style('display', 'unset');

	// Update table
	selectedDatum = datum;
	const td = tr.selectAll('td')
	.data((d, i) => [titles[i], selectedDatum.raw[i].toFixed(2)], d => d);
	td.exit().remove();
	td.enter().append('td')
	.text(d => d);
	};
	selectPoint(selectedDatum);

	// Enable tooltips using Tether tooltip.
	lineChart.dataPoints
	.attr('data-tooltip', d => `${getValue(lineChart.accessorX, d)}: ${getValue(lineChart.accessorY, d).toFixed(2)}`)
	.attr('data-tooltip-position', 'top center');
	d3.selectAll('.threesy-data-point')
	.on('click', (d) => {
	selectPoint(d);
	});