<!DOCTYPE html>
<html>
<head>
<!--<link data-require="normalize@6.0.0" data-semver="6.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" />-->
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="basscss@8.0.1" data-semver="8.0.1" rel="stylesheet" href="https://npmcdn.com/basscss@8.0.1/css/basscss.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid">
<h1 class="bg-primary text-center text-white">Scalable D3 Charts</h1>
<!-- Chart 1 -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Chart 1</h4>
<p>Input Domain = min and max of data</p>
<p>Output Range = adjusts input domain into pixel size</p>
<h5>D3 v3 - d3.scale.linear</h5>
<h5>D3 v4 - d3.scaleLinear()</h5>
<code>
var scale = d3.scaleLinear([100,400 /* input min/max */).range([10,100] /*outpix pixels for SVG*/)
</code>
<p class="card-text"></p>
<!-- SVG Container-->
</div>
</div>
<div id="d3Container" class="d3Container">
</div>
</div>
<!-- scripts -->
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 modules -->
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<!--<script src="https://d3js.org/d3-path.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-shape.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-collection.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-array.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-color.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-format.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-time.v1.min.js"></script>-->
<!--<script src="https://d3js.org/d3-time-format.v2.min.js"></script>-->
<!--<script src="https://d3js.org/d3-scale.v1.min.js"></script>-->
<script src="script.js"></script>
</body>
</html>
// Code goes here
// var svgH = '100%';
// var svgW = '100%';
var padding = '20';
var pxH = 100;
var pxW = 400;
// Since using % for widths and heights
var realHeight = document.getElementById('d3Container').offsetHeight;
var realWidth = document.getElementById('d3Container').offsetWidth;
/*****************************************************************
* Chart from Github
*/
var scale = d3.scaleLinear()
.domain([130, 350]).range([10, 100]);
// var tscale = d3.time.scale().domain();
function getDate(d) {
var strDate = d.toString(); // convert to string obj
var year = strDate.substr(0,4);
var month = strDate.substr(4,2)-1; // 0-indexed
var day = strDate.substr(6,2);
return new Date(year, month, day);
}
var githubUrl = 'https://api.github.com/repos/bsullins/d3js-resources/contents/monthlySalesbyCategoryMultiple.json';
var buildLine = function(ds, dl, idx) {
var minDate = getDate(ds.monthlySales[0].month);
var maxDate = getDate(ds.monthlySales[ds.monthlySales.length - 1]);
var minMonth = d3.min(ds.monthlySales, function(d) {
return d.month;
});
var maxMonth = d3.max(ds.monthlySales, function(d) {
return d.month;
});
var maxSales = d3.max(ds.monthlySales, function(d) {
return d.sales;
})
// create scales
// var xScale = d3.scaleLinear()
// .domain([minMonth, maxMonth])
// .range([padding, realWidth - padding]);
var xScale = d3.scaleTime()
.domain([minDate, maxDate]) // broken here v4
.range([padding, realWidth - padding]);
var yScale = d3.scaleLinear()
.domain([0, maxSales])
.range([ // broken here v4
document.getElementById('d3Container').offsetHeight / ( dl * (1+idx) ) +100,
10 // for top padding
]);
// create axees
var yAxis = d3.axisLeft(yScale).ticks(4); // v4j, specify left y axis tickmarks
var xAxis = d3.axisBottom(xScale).ticks(4).tickFormat(d3.timeFormat("%b"));
// add scales below in .x and .y
var lineFun = d3.line()
.x(function(d) {
// return ((d.month -20130001)/3.25); // hardcoded works
return xScale( d.month );
})
.y(function(d, i) {
var svgHeight = document.getElementById('d3Container').offsetHeight;
// return ( (svgHeight / ( dl * (1+idx) ) - d.sales) );
return yScale( d.sales );
})
.curve(d3.curveLinear);
var svg3 = d3.select('body #d3Container')
.append('svg')
.attrs({
'h': '100%',
'w': '100%',
'fill': 'black'
});
var yaxis = svg3.append('g')
.call(yAxis)
.attrs({
'class': 'axis',
'transform': 'translate(' + padding + ',0)'
})
var xaxis = svg3.append('g')
.call(xAxis)
.attrs({
'class': 'axis',
'transform': 'translate(0,' + document.getElementById('d3Container').offsetHeight / (idx+1) + ')'
}) // BUGGY
var viz = svg3.append('path')
.attrs({
/** access nested JSON here **/
'd': lineFun(ds.monthlySales),
'stroke': function() {
return (idx + 1 === dl) ? 'royalblue' : 'lime';
},
'stroke-width': 4,
'fill': 'white;'
})
};
var showHeader = function(ds) {
d3.select('body #d3Container')
.append('h1')
.text(ds.category + 'Sales 2013');
};
// githubUrl
d3.json(githubUrl, function(error, data) {
if (error) {
return;
} else {
// decode data
var decodedData = JSON.parse(window.atob(data.content));
// pass in functions for each
decodedData.contents.forEach(function(ds, idx) {
showHeader(ds);
buildLine(ds, decodedData.contents.length, idx);
})
}
});
/* Styles go here */
body {
min-height: 100vh;
}
.d3Container {
background: #ddd;
padding: 0;
margin: 0;
width: 100%;
height: auto;
/*height: 100%;*/
/*height: inherit;*/
}
svg {
height: 100%;
width: 100%;
fill: none;
/*overflow: visible;*/
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
h1 {
font-family: sans-serif;
font-weight: 300;
font-size: 16px;
}
{ "contents": [
{
"category": "Furniture",
"region": "West",
"monthlySales":
[{
"month":20130101,
"sales":38
},
{
"month":20130201,
"sales":35
},
{
"month":20130301,
"sales":41
},
{
"month":20130401,
"sales":55
},
{
"month":20130501,
"sales":58
},
{
"month":20130601,
"sales":66
},
{
"month":20130701,
"sales":74
},
{
"month":20130801,
"sales":78
},
{
"month":20130901,
"sales":38
},
{
"month":20131001,
"sales":30
},
{
"month":20131101,
"sales":26
},
{
"month":20131201,
"sales":29
}
]
},
{
"category": "Technology",
"region": "West",
"monthlySales":
[{
"month":20130101,
"sales":54
},
{
"month":20130201,
"sales":66
},
{
"month":20130301,
"sales":77
},
{
"month":20130401,
"sales":70
},
{
"month":20130501,
"sales":60
},
{
"month":20130601,
"sales":63
},
{
"month":20130701,
"sales":55
},
{
"month":20130801,
"sales":47
},
{
"month":20130901,
"sales":55
},
{
"month":20131001,
"sales":30
},
{
"month":20131101,
"sales":22
},
{
"month":20131201,
"sales":77
}
]
}
]}