Skip to content

Instantly share code, notes, and snippets.

@Mbrownshoes

Mbrownshoes/index.html

Last active May 17, 2018 23:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Mbrownshoes/062e2198aa30fcbc94657e1e50de22e5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Mbrownshoes/062e2198aa30fcbc94657e1e50de22e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.4.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="main.css">
<style>
mainSvg {
position: relative;
width: 680;
height: 200px;
}
#chart {
font: 18px "Helvetica Neue", Helvetica;
}
#chart_container {
position: absolute;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x1axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: #1f77b4;
stroke-width: 2.5px;
}
.line2 {
fill: none;
stroke: #ff7f0e;
stroke-width: 2.5px;
}
.xaxis .domain {
fill: none;
stroke: #000;
stroke-opacity: .3;
stroke-width: 10px;
stroke-linecap: round;
}
.x1axis .halo {
fill: none;
stroke: #ddd;
stroke-width: 8px;
stroke-linecap: round;
}
.g-slider .background {
cursor: ew-resize !important;
}
.g-slider .handle {
fill: #fff;
stroke: #000;
stroke-width: 1.0px;
pointer-events: none;
}
#slider {
position: absolute;
top: 450px;
left: 600px;
font-size: 1em;
}
.g-summary {
position: absolute;
top: 410px;
left: 590px;
width: 340px;
}
</style>
<body>
<!-- <h1>BC Schools Grade-to-Grade Transition</h1> -->
<b>See how </b>
<select id="group" class="selectpicker" data-style="btn-primary">
<option value = "ALL" >All </option>
<option value = "FEM">Female </option>
<option value = "MAL">Male </option>
<option value = "AB">Aboriginal </option>
<option value = "XAB">Non Aboriginal </option>
<option value = "FRI">French Immersion </option>
<option value = "SN">Special Needs No Gifted </option>
<option value = "ELL">English Language Learner </option>
</select>
<b>students compare to </b>
<select id="group2" class="selectpicker" data-style="btn-warning">
<option disabled selected>Select Group...</option>
<option value = "ALL">All </option>
<option value = "FEM">Female </option>
<option value = "MAL">Male </option>
<option value = "AB">Aboriginal </option>
<option value = "XAB">Non Aboriginal </option>
<option value = "FRI">French Immersion </option>
<option value = "SN">Special Needs No Gifted </option>
<option value = "ELL">English Language Learner </option>
</select>
<b>students.</b>
<students.>
<div id="chart_container">
<div id="chart"></div>
<!-- <p>Powered by Ministry of Education, Analysis and Reporting <a target="_parent" href="//catalogue.data.gov.bc.ca/dataset/bc-schools-grade-to-grade-transition">data</a> <p> -->
</div>
<div id="slider"></div>
<script>
d3.select("#chart")
.append("p")
.html("Grade Transitioning From")
.attr("class", "g-summary")
var parseDate = d3.time.format("%y %m").parse;
var alldat
// var psv = d3.dsv("|", "text/plain")
var sliderHeight = 30,
sliderWidth = 260;
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 70
},
width = 860 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var current = {
"year": 1
},
maxValue = 11,
moving;
var sliderContainer = d3.select("#slider").append("svg")
.attr("width", sliderWidth + margin.left + margin.right + 10)
.attr("height", sliderHeight + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x1 = d3.scale.linear() // scale for slider
.domain([1, 11])
.range([0, sliderWidth])
.clamp(true);
var brushToyear = d3.scale.threshold()
.domain([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
.range([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
var xAxis1 = d3.svg.axis() // added this just to get the ticks to show up (slider)
.scale(x1)
.orient("bottom")
.ticks(12)
.tickSize(10, 0)
.tickPadding(0);
var brush = d3.svg.brush()
.x(x1)
.extent([current.year, current.year])
.on("brush", brushed);
sliderContainer.append("g")
.attr("class", "x1axis")
.attr("transform", "translate(0," + sliderHeight / 2 + ")")
.call(d3.svg.axis()
.scale(x1)
.orient("bottom")
.ticks(12)
.tickSize(0)
.tickPadding(12))
.select(".domain") // rest stylized the slider to hide ticks
.select(function() {
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "halo");
sliderContainer.call(xAxis1)
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.avg);
});
var svg = d3.select("#chart").append("svg")
.attr("class", "mainSvg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var slider = sliderContainer.append("g")
.attr("class", "g-slider")
.call(brush);
slider.selectAll(".extent, .resize").remove();
slider.select(".background").attr("height", sliderHeight);
var handle = slider.append("circle")
.attr("class", "handle")
.attr("transform", "translate(0," + sliderHeight / 2 + ")")
.attr("r", 9);
var data = {
resource_id: 'bca62da0-936b-450d-a8a8-7b70231aa225', // the resource id
limit: 3000
};
$.ajax({
url: 'https://catalogue.data.gov.bc.ca/api/action/datastore_search',
data: data,
success: function(data) {
alldat = data.result.records
alldat.forEach(function(d) {
d.Year = parseDate(d.Year.slice(0, 2) + " 06");
})
}
}).then(function() {
// console.log(alldat)
group = $('#group').val();
// console.log(alldat)
chartData = gatherdata(alldat, current.year, group)
$(document).ready(function() {
$('#group').on('change', function(data) {
group = $('#group').val();
console.log(group)
groupNo = 1
chartData = gatherdata(alldat, current.year, group)
updatechart(chartData, groupNo)
});
});
//Change second line
$(document).ready(function() {
$('#group2').on('change', function(data) {
group2 = $('#group2').val();
groupNo = 2
chartData = gatherdata(alldat, current.year, group2)
updatechart(chartData, groupNo)
});
});
makechart(chartData)
slider.call(brush.event)
.transition()
.duration(1000)
.call(brush.extent([10, 10]))
.call(brush.event);
})
function makechart(data) {
console.log('start: ' + current.year)
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([40, 100]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -60)
.attr("dy", ".51em")
.style("text-anchor", "end")
.text("Transition Rate (%)");
svg.append("path")
.attr("class", "line")
.attr("d", line(data));
svg.append("path")
.attr("class", "line2")
.attr("d", line([]));
}
function updatechart(data, groupNo) {
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([40, 100]);
if (groupNo == 1) {
svg.select(".line")
.transition()
.duration(1000)
.attr("d", line(data));
} else {
svg.select(".line2")
.transition()
.duration(1000)
.attr("d", line(data));
}
}
function brushed() {
var value = brush.extent()[0];
if (d3.event.sourceEvent) {
value = Math.round(x1.invert(d3.mouse(this)[0]));
brush.extent([value, value]);
}
handle.attr("cx", x1(value));
var brushDate = brushToyear(value - 1);
current.year = brushDate;
group = $('#group').val();
group2 = $('#group2').val();
chartData1 = gatherdata(alldat, current.year, group)
chartData2 = gatherdata(alldat, current.year, group2)
updatechart(chartData1, 1)
updatechart(chartData2, 2)
}
function gatherdata(datain, yearIn, group) {
var chartData = []
for (i = 0; i < alldat.length; i++) {
if (alldat[i].Grade == yearIn && alldat[i].Group == group) {
chartData.push({
grade: alldat[i].Grade,
date: alldat[i].Year,
avg: Number(alldat[i].Perc)
})
}
}
return chartData;
}
</script>
Raw
main.css
/*html {
min-width: 840px;
}*/
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 1em auto 4em auto;
position: relative;
padding-left: 100px;
}
h1 {
font-weight: 300;
padding-bottom: 20px;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
}
h1, h2 {
text-rendering: optimizeLegibility;
}
#leftcolumn, #rightcolumn {
float: left;
}
#leftcolumn {
width: 550px;
}
#rightcolumn {
width: 250px;
}
aside {
font-size: small;
left: 780px;
position: absolute;
text-align: right;
width: 180px;
}
p {
line-height: 1.5em;
}
blockquote {
width: 640px;
}
li {
width: 680px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
pre, code, textarea {
font-family: "Menlo", monospace;
line-height: normal;
}
textarea {
font-size: 100%;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment