Skip to content

Instantly share code, notes, and snippets.

@Mbrownshoes

Mbrownshoes/index.html

Created May 17, 2018 23:06
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Mbrownshoes/eaa0e267cea142079601964bd4897618 to your computer and use it in GitHub Desktop.
Download ZIP
Fish_wholesale_bc
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style>
.axis--x path {
display: none;
}
.tooltip {
position: absolute;
width: auto;
height: auto;
pointer-events: none;
background-color: white;
border-radius: 10px;
padding: 10px;
}
body, html {
width:100%;
height:95%;
}
#chart {
width:95%;
height:100%;
}
svg {
width: 100%;
height: 100%;
}
form{
position: absolute;
left: 40px;
top: 10px;
}
</style>
<!-- <button onclick="transition()">Update</button> -->
<form>
<label><input type="radio" name="mode" value="landings" checked>Landings ('000 tonnes)</label>
<label><input type="radio" name="mode" value="wholesale" > Wholesale ($ millions)</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<div id="chart" class='chart'>
<svg></svg>
</div>
<script>
var selected = 'landings'
var data = {
resource_id: '3e68c5d5-2c96-44fd-b43d-1c3445d41739', // the resource id
limit: 1000,
};
var parseTime = d3.timeParse("%Y");
var tooltip= d3.select("body")
.append("div")
.attr("class", "tooltip")
.attr("id", "tooltip")
.text(' ')
// .style("position", "absolute")
// .style("z-index", "10")
.style("visibility", "hidden")
// .style("color", "#222")
// .style("padding", "8px")
// .style("background-color", "white")
// .style("border-radius", "6px")
// .style("font", "14 px sans-serif")
var series,
series1,
layers,
area,
y
$.ajax({
url: 'https://catalogue.data.gov.bc.ca/api/action/datastore_search',
data: data,
dataType: 'json',
success: function(data) {
var cats = [];
// dat = data.result.records;
data = data.result.records;
test = data
const unique = [...new Set(data.map(item => item.Species))]
n = unique.length
m = data.length
var nested = d3.nest()
.key(function(d) {
// console.log(d)
return d.Year
})
.entries(data);
landata = nested.map(function(d) {
// console.log(d)
var obj = {
Year: d.key
}
d.values.forEach(function(v) {
obj[v['Species']] = +v["Landings ('000 tonnes)"];
})
return obj
});
valdata = nested.map(function(d) {
var obj = {
Year: d.key
}
d.values.forEach(function(v) {
obj[v['Species']] = +v["Wholesale Values ($millions)"];
})
return obj
});
var stack = d3.stack()
.keys(unique)
.order(d3.stackOrderNone)
.offset(d3.stackOffsetWiggle);
series = stack(landata)
series1 = stack(valdata)
layers = series.concat(series1);
var svg = d3.select("svg").style("width", "100%").style("height", "100%");
var margin = {
top: 20,
right: 0,
bottom: 30,
left: 20
},
screenHeight = parseFloat(d3.select("svg").node().clientHeight || d3.select("svg").node().parentNode.clientHeight);
screenWidth = parseFloat(d3.select("svg").node().clientWidth|| d3.select("svg").node().parentNode.clientWidth);
console.log(screenWidth)
g = svg.append("g");
// g = svg.append("g").attr("transform", "translate(" + margin.right+ "," + margin.top + ")");
var x = d3.scaleTime()
.range([40, screenWidth-0]);
x.domain(d3.extent(data, function(d) {
return parseTime(d.Year); }))
y = d3.scaleLinear()
.domain([d3.min(series, stackMin), d3.max(series, stackMax)])
.range([screenHeight-50, 10]);
// var xAxis = d3.axisBottom()
// .scale(x)
// .tickSize(0)
// .tickPadding(0.1);
var yAxis = d3.axisLeft(y).ticks(6, "s");
var z = d3.interpolateCool;
x.domain(d3.extent(data, function(d) {
// console.log(parseTime(d.Year))
return parseTime(d.Year); }));
area = d3.area()
.x(function(d, i) {
return x(parseTime(d.data.Year));
})
.y0(function(d) {
return y(d[0]);
})
.y1(function(d) {
return y(d[1]);
});
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
g.selectAll("path")
.data(series)
.enter().append("path")
.attr("d", area)
.attr("fill", function(d) {
return z(Math.random());
})
.on('mouseover', function(d) {
// d3.select(this).style('fill', d3.rgb(d3.select(this).style("fill")).brighter());
// d3.select("#major").text(d.key);
tooltip.style("visibility", "visible");
})
.on("mousemove", function(d) {
console.log(selected)
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getFullYear()
// console.log(invertedx)
// console.log()
if (selected == 'landings'){
landata.forEach(function(y,i){
// console.log()
if (y.Year == String(invertedx)){
tooltip.html(d.key + ": " + y[d.key])
console.log(y[d.key])
}
})
}else{
valdata.forEach(function(y,i){
// console.log()
if (y.Year == String(invertedx)){
tooltip.html(d.key + ": " + y[d.key])
console.log(y[d.key])
}
})
}
return tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 20) + "px");
})
.on('mouseout', function(d) {
// d3.select(this).style('fill',
// d3.rgb(d3.select(this).style("fill")).darker());
return tooltip.style("visibility", "hidden");
// d3.select("#major").text("Mouse over");
// tooltip.transition()
// .duration(500)
// .style("opacity", 0);
})
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + (screenHeight-45) + ")")
.call(d3.axisBottom(x)
.tickSize(0)
.tickPadding(6));
// g.append("g")
// .attr("class", "axis axis--y")
// .call(yAxis)
// .append("text")
// .attr("x", 2)
// .attr("y", y(y.ticks(8).pop()))
// .attr("dy", "-0.95em")
// .attr("text-anchor", "start")
// .attr("fill", "#000")
// .text(function(d){
// console.log(d)
// });
function stackMin(layer) {
return d3.min(layer, function(d) {
return d[0];
});
}
function stackMax(layer) {
return d3.max(layer, function(d) {
return d[1];
});
}
d3.selectAll("input")
.on("change", changed);
var timeout = d3.timeout(function() {
d3.select("input[value=\"landings\"]")
.property("checked", true)
.dispatch("change");
}, 2000);
function changed() {
timeout.stop();
selected = this.value
if (this.value === "landings") transitionLandings();
else transitionWholesale();
}
function transitionWholesale() {
console.log('wholesale')
// y.domain([0,100])
y.domain([d3.min(series1, stackMin), d3.max(series1, stackMax)])
d3.selectAll("path")
.data((series1))
.transition()
.duration(2500)
.attr("d", area);
}
function transitionLandings() {
console.log('landing')
// y.domain([0,100])
y.domain([d3.min(series, stackMin), d3.max(series, stackMax)])
d3.selectAll("path")
.data((series))
.transition()
.duration(2500)
.attr("d", area);
}
}
})
// function transition() {
// y.domain([0, 2000]);
// console.log('ji')
// var t;
// d3.selectAll("path")
// .data((t = series1, series1 = series, series = t))
// .transition()
// .duration(2500)
// .attr("d", area);
// // g.selectAll(".axis.axis--y").transition()
// // .duration(500)
// // .call(yAxis)
// }
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment