Skip to content

Instantly share code, notes, and snippets.

@ptvans

ptvans/.block

Last active October 12, 2016 05:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ptvans/18fa94507c0fb45f90da1de182eb1273 to your computer and use it in GitHub Desktop.
Save ptvans/18fa94507c0fb45f90da1de182eb1273 to your computer and use it in GitHub Desktop.
Download ZIP
code Q 2
Raw
.block
license: mit
border:
Raw
README.md

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

  • Reusable modular design
  • Responsive design, chart size adjusts with screen size
  • Customizable options
    • Chart Size
    • Margins
    • Div Selector
    • Chart Colors
    • Axis labels
  • Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from asielen's block: Reusable Line Chart v2

forked from ptvans's block: 1988 Porsche 959 Sport

forked from ptvans's block: 1988 Porsche 959 Sport

forked from ptvans's block: 1994 Porsche 911 Carrera Turbo

forked from ptvans's block: 2003 BMW Z8

forked from ptvans's block: 1977 Datsun 280Z

forked from ptvans's block: 1985 Audi Quattro

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
<body>
<div class="left-nav">(navigation)</div>
<div class="main-container">
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
<p>(main content)</p>
</div>
</body>
</html>
Raw
main.css
body {
margin: 0;
background-color: skyblue;
}
.left-nav {
width: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding: 6px;
background-color: orange;
box-sizing: border-box;
}
.main-container {
position: absolute;
left: 200px;
top: 0;
bottom: 0;
right: 0;
padding: 12px;
overflow: scroll;
}
Raw
multiline.css
.chart-wrapper {
max-width: 650px;
min-width: 304px;
margin: 0 auto;
background-color: #f5f8f9;
}
.chart-wrapper .inner-wrapper {
position: relative;
padding-bottom: 50%;
width: 100%;
}
.chart-wrapper .outer-box {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.chart-wrapper .inner-box {
width: 100%;
height: 100%;
}
.chart-wrapper text {
font-family: sans-serif;
font-size: 11px;
}
.chart-wrapper p {
font-size: 16px;
margin-top:5px;
margin-bottom: 40px;
}
.chart-wrapper .axis path,
.chart-wrapper .axis line {
fill: none;
stroke: #1F1F2E;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.chart-wrapper .axis path {
stroke-width: 1px;
}
.chart-wrapper .line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.chart-wrapper .legend {
min-width: 200px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
font-size: 16px;
padding: 10px 40px;
}
.chart-wrapper .legend > div {
margin: 0px 25px 10px 0px;
flex-grow: 0;
cursor: pointer;
}
.chart-wrapper .legend .series-marker:hover {
opacity: 0.8;
}
.chart-wrapper .legend p {
display:inline;
font-size: 0.8em;
font-family: sans-serif;
font-weight: 600;
}
.chart-wrapper .legend .series-marker {
height: 1em;
width: 1em;
border-radius: 35%;
background-color: crimson;
display: inline-block;
margin-right: 4px;
margin-bottom: -0.16rem;
}
.chart-wrapper .overlay {
fill: none;
pointer-events: all;
}
.chart-wrapper .tooltip circle {
fill: black;
stroke: white;
stroke-width: 2px;
fill-opacity: 25%;
}
.chart-wrapper .tooltip rect {
fill: #ecf0f4;
opacity: 0.7;
border-radius: 2px;
}
.chart-wrapper .tooltip text {
font-size: 14px;
}
.chart-wrapper .tooltip .line {
stroke: steelblue;
stroke-dasharray: 2,5;
stroke-width: 2;
opacity: 0.5;
}
@media (max-width:500px){
.chart-wrapper .line {stroke-width: 3px;}
.chart-wrapper .legend {font-size: 14px;}
}
Raw
multiline_data.csv
value1 value2 value3 value4 indexValue date averageValue buzz notes currency
16100 10900 7300 4000 100 2006-09-01T00:00:00 USD
16100 10900 7300 4000 100 2007-01-01T00:00:00 USD
17600 11500 7700 4000 105.5045871559633 2007-05-01T00:00:00 The “Ur-Quattro" coupe is still of little interest to collectors in spite of its technical significance and rally heritage. The E30 M3 crowd should take a look. USD
17600 11500 7700 4000 105.5045871559633 2007-09-01T00:00:00 USD
21200 11700 7700 4000 107.33944954128441 2008-01-01T00:00:00 USD
21200 11700 7700 4000 107.33944954128441 2008-05-01T00:00:00 USD
21200 11700 7700 4000 107.33944954128441 2008-09-01T00:00:00 USD
24800 13800 7900 4350 126.60550458715596 2009-01-01T00:00:00 USD
24800 13800 8150 4700 126.60550458715596 2009-05-01T00:00:00 USD
24800 13800 8150 4700 126.60550458715596 2009-09-01T00:00:00 USD
25000 14600 8800 5250 133.94495412844037 2010-01-01T00:00:00 USD
25000 14800 8900 5000 135.77981651376146 2010-05-01T00:00:00 USD
25000 15200 8800 4750 139.44954128440367 2010-09-01T00:00:00 USD
26200 15300 8900 4800 140.36697247706422 2011-01-01T00:00:00 USD
28000 16500 9200 4900 151.37614678899084 2011-05-01T00:00:00 USD
28000 16500 9200 4900 151.37614678899084 2011-09-01T00:00:00 The car that revolutionized rallying. As a technical tour de force, it has few peers. As a 1980s Audi, not many people care. They will someday. USD
28000 16500 9200 4900 151.37614678899084 2012-01-01T00:00:00 USD
32000 17250 9500 5100 158.25688073394497 2012-05-01T00:00:00 USD
32000 17250 9500 5100 158.25688073394497 2012-09-01T00:00:00 USD
32000 17250 9500 5100 158.25688073394497 2013-01-01T00:00:00 USD
32000 17250 9500 5100 158.25688073394497 2013-05-01T00:00:00 USD
34500 18300 9900 5400 167.88990825688074 2013-09-01T00:00:00 USD
37500 19800 10700 6200 181.651376146789 2014-01-01T00:00:00 USD
37500 19800 10700 6200 181.651376146789 2014-05-01T00:00:00 USD
37500 19800 10700 6200 181.651376146789 2014-09-01T00:00:00 USD
37500 19800 10700 6200 181.651376146789 2015-01-01T00:00:00 USD
37500 19800 10700 6200 181.651376146789 2015-05-01T00:00:00 USD
62000 38900 26000 13700 356.8807339449541 2015-09-01T00:00:00 USD
65000 39700 27600 14000 364.2201834862385 2016-01-01T00:00:00 USD
65000 40200 27800 14300 368.8073394495413 2016-05-01T00:00:00 USD
65000 40200 27900 14500 368.8073394495413 2016-09-01T00:00:00 USD
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment