Created
October 7, 2018 21:14
-
-
Save anndoko/a484cd7c721e6f65be55396285f169b2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = []; // the variable that holds the data from csv file | |
var category_colors = { | |
"clothing, beauty, & fashion": "#5B7BE9", | |
"computers & internet": "#E0D22E", | |
"education": "#2CCEF6", | |
"food & drink": "#FB7F23", | |
"grab bag": "#D63CA3", | |
"health & fitness": "#c38014", | |
"home & garden": "#E24062", | |
"human relations": "#5BB923", | |
"law & government": "#555", | |
"media & arts": "#B190D0", | |
"pets & animals": "#bcc832", | |
"religion & philosophy": "#ee7b9c", | |
"science & nature": "#f299b3", | |
"shopping": "#01d99f", | |
"society & culture": "#177d62", | |
"sports, hobbies, & recreation": "#a16c2f", | |
"technology": "#a2262a", | |
"travel & transportation": "#f29a76", | |
"work & money": "#88a8b9", | |
"writing & language": "#a46067" | |
}; // JSON object with colors assigned to each category. | |
var dataset1 = []; | |
var dataset2 = []; | |
$(document).ready(function () { | |
loadData(); | |
loadDataset("dataset1"); | |
}); | |
function loadData() { | |
d3.csv("data/data.csv", function (d) { | |
data = d; | |
data.forEach(function (item) { | |
item.n = parseInt(item.n); | |
}); | |
visualizeBarChart(groupDataByYear()); | |
visualizeSmallMultipleBarChart(groupDataByCategory()); | |
visualizePieChart(); | |
visualizeDonutChart(); | |
visualizeMap(); | |
visualizeNodeLinkDiagran(); | |
}); | |
} | |
function groupDataByCategory() { | |
var groupedData = d3.nest() | |
.key(function (d) { return d.category }) | |
.entries(data); | |
return groupedData; | |
} | |
function groupDataByYear() { | |
var groupedData = d3.nest() | |
.key(function (d) { return d.year }) | |
.rollup(function (v) { return d3.sum(v, function (d) { return d.n; }) }) | |
.entries(data); | |
return groupedData; | |
} | |
function visualizeBarChart(dataitems) { | |
var margin = { top: 20, right: 20, bottom: 30, left: 60 }, | |
width = 940 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scaleBand() | |
.domain(dataitems.map(function (d) { return d.key; })) | |
.range([0, width]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(dataitems, function (d) { return d.value; })]) | |
.range([height, 0]); | |
var tooltip = d3.select("body").append("div").attr("class", "toolTip"); //NEW | |
var svg = d3.select("#chart1").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", | |
"translate(" + margin.left + "," + margin.top + ")"); | |
svg.selectAll(".bar") | |
.data(dataitems) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("fill", "#5b717c") | |
.attr("x", function (d) { return x(d.key); }) | |
.attr("width", x.bandwidth()) | |
.attr("y", function (d) { return y(d.value); }) | |
.attr("height", function (d) { return height - y(d.value); }) | |
// NEW | |
.attr("opacity","0.7") | |
.on("mousemove", function (d){ | |
d3.select(this).attr("opacity", "1"); | |
tooltip | |
.style("left", d3.event.pageX - 50 + "px") | |
.style("top", d3.event.pageY - 70 + "px") | |
.style("display", "inline-block") | |
.html("<b>" + (d.key) + "</b> : " + (d.value)); | |
}) | |
.on("mouseout", function(d){ | |
d3.select(this).attr("opacity", "0.7"); | |
tooltip.style("display", "none"); | |
}); | |
// add the x Axis | |
svg.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
// add the y Axis | |
svg.append("g") | |
.call(d3.axisLeft(y)); | |
} | |
function visualizeSmallMultipleBarChart(dataitems) { | |
var margin = { top: 20, right: 0, bottom: 40, left: 40 }, | |
width = $("#chart2").width()*0.22 - margin.left - margin.right, | |
height = 180 - margin.top - margin.bottom; | |
var x = d3.scaleBand() | |
.domain(dataitems[0].values.map(function (d) { return d.year; })) | |
.range([0, width]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(data, function (d) { return d.n; })]) | |
.range([height, 0]); | |
// Loop through categories | |
dataitems.forEach(function (v, i) { | |
var div = d3.select("#chart2").append("div") | |
.attr("id", "holder" + v.key) | |
.attr("class", "chartholder"); | |
div.append("h6").html(v.key); | |
var svg = div.append("svg") | |
.attr("class", "categoryBar") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.selectAll(".bar") | |
.data(v.values) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("id", function (d) { return "bar" + d.year; })//NEW | |
.attr("fill", function (d) { return category_colors[v.key];}) | |
.attr("x", function (d) { return x(d.year); }) | |
.attr("width", x.bandwidth()) | |
.attr("y", function (d) { return y(d.n); }) | |
.attr("height", function (d) { return height - y(d.n); }) | |
// New | |
.on("mousemove", function (d) { | |
$("[id=text" + d.year + "]").show(); | |
$("[id=bar" + d.year + "]").addClass("highlight"); | |
}) | |
.on("mouseout", function (d) { | |
$("[id=text" + d.year + "]").hide(); | |
$("[id=bar" + d.year + | |
"]").removeClass("highlight"); | |
}); | |
// New | |
svg.selectAll(".text") | |
.data(v.values) | |
.enter().append("text") | |
.attr("class", "text") | |
.attr("id", function (d) { return "text" + d.year; }) | |
.text(function (d) { return d.n; }) | |
.attr("x", function (d) { return x(d.year); }) | |
.attr("y", function (d) { return y(d.n) - 2; }) | |
.style("display", "none"); | |
svg.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)) | |
.selectAll("text") | |
.style("text-anchor", "end") | |
.attr("dx", "-.8em") | |
.attr("dy", ".15em") | |
.attr("transform", "rotate(-65)"); | |
// add the y Axis | |
svg.append("g") | |
.call(d3.axisLeft(y).ticks(5)); | |
}); | |
} | |
//////////////////////////////////////////////////// | |
// ANIMATIONS | |
//////////////////////////////////////////////////// | |
function triggerPositionTransformation() { | |
d3.select("#positionRectangle") | |
.transition() | |
.attr("x", 250); | |
} | |
function resetPositionRectangle() { | |
d3.select("#positionRectangle") | |
.transition() | |
.attr("x", 50); | |
} | |
function triggerSizeTransformation() { | |
d3.select("#sizeRectangle") | |
.transition() | |
.attr("x", 250) | |
.attr("width", 100) | |
.attr("height", 100); | |
} | |
function resetSizeRectangle() { | |
d3.select("#sizeRectangle") | |
.transition() | |
.attr("x", 50) | |
.attr("width", 50) | |
.attr("height", 50); | |
} | |
function triggerOpacityTransformation() { | |
d3.select("#opacityRectangle") | |
.transition() | |
.attr("x", 250) | |
.attr("width", 100) | |
.attr("height", 100) | |
.attr("opacity", 0.6); | |
} | |
function resetOpacityRectangle() { | |
d3.select("#opacityRectangle") | |
.transition() | |
.attr("x", 50) | |
.attr("width", 50) | |
.attr("height", 50) | |
.attr("opacity", 1); | |
} | |
function triggerColorTransformation() { | |
d3.select("#colorRectangle") | |
.transition() | |
.attr("x", 250) | |
.attr("width", 100) | |
.attr("height", 100) | |
.attr("opacity", 0.6) | |
.attr("fill", "red"); | |
} | |
function resetColorRectangle() { | |
d3.select("#colorRectangle") | |
.transition() | |
.attr("x", 50) | |
.attr("width", 50) | |
.attr("height", 50) | |
.attr("opacity", 1) | |
.attr("fill", "black"); | |
} | |
function triggerDelayTransformation() { | |
d3.select("#delayRectangle") | |
.transition() | |
.delay(500) | |
.attr("x", 250) | |
.transition() | |
.delay(500) | |
.attr("width", 100) | |
.transition() | |
.delay(500) | |
.attr("height", 100) | |
.transition() | |
.delay(500) | |
.attr("opacity", 0.6) | |
.transition() | |
.delay(500) | |
.attr("fill", "red"); | |
} | |
function resetDelayRectangle() { | |
d3.select("#delayRectangle") | |
.transition() | |
.attr("x", 50) | |
.attr("width", 50) | |
.attr("height", 50) | |
.attr("opacity", 1) | |
.attr("fill", "black"); | |
} | |
function triggerDurationTransformation() { | |
d3.select("#durationRectangle") | |
.transition() | |
.attr("x", 250) | |
.attr("width", 100) | |
.attr("height", 100) | |
.attr("opacity", 0.6) | |
.attr("fill", "red") | |
.duration(2500); | |
} | |
function resetDurationRectangle() { | |
d3.select("#durationRectangle") | |
.transition() | |
.attr("x", 50) | |
.attr("width", 50) | |
.attr("height", 50) | |
.attr("opacity", 1) | |
.attr("fill", "black"); | |
} | |
///////////////////////////////////////////////////// | |
// CHART LEVEL ANIMATIONS | |
///////////////////////////////////////////////////// | |
var dataset1 = [ | |
{ name: "A", x: 10, y: 20 }, | |
{ name: "B", x: 41, y: 15 }, | |
{ name: "C", x: 23, y: 30 }, | |
{ name: "D", x: 18, y: 37 }, | |
{ name: "E", x: 6, y: 50 } | |
]; | |
var dataset2 = [ | |
{ name: "A", x: 30, y: 14 }, | |
{ name: "B", x: 17, y: 45 }, | |
{ name: "C", x: 11, y: 21 }, | |
{ name: "D", x: 50, y: 16 }, | |
{ name: "E", x: 34, y: 8 } | |
]; | |
function loadDataset(ds) { | |
var dataset = null; | |
switch (ds) { | |
case "dataset1": | |
dataset = dataset1; | |
break; | |
case "dataset2": | |
dataset = dataset2; | |
break; | |
} | |
drawBarChart(dataset); | |
drawScatterPlot(dataset); | |
drawLineGraph(dataset); | |
} | |
function drawBarChart(ds) { | |
var x = d3.scaleBand() | |
.domain(["A", "B", "C", "D", "E"]) | |
.range([0, $("#divBarTransition").width()]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, 60]) | |
.range([300, 0]); | |
var svg = d3.select("#barTransition"); | |
svg.selectAll(".bar") | |
.data(ds) | |
.enter().append("rect") | |
.attr("class", "bar"); | |
svg.selectAll(".bar") | |
.attr("fill", "#5b717c") | |
.attr("x", function (d) { return x(d.name); }) | |
.attr("width", x.bandwidth()).transition() | |
.attr("height", function (d) { return 300 - y(d.x); }) | |
.attr("y", function (d) { return y(d.x) }); | |
} | |
function drawScatterPlot(ds) { | |
var x = d3.scaleBand() | |
.domain(["A", "B", "C", "D", "E"]) | |
.range([0, $("#divBarTransition").width()]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, 60]) | |
.range([300, 0]); | |
var svg = d3.select("#scatterTransition"); | |
svg.selectAll(".circle") | |
.data(ds) | |
.enter().append("circle") | |
.attr("class", "circle"); | |
svg.selectAll(".circle") | |
.attr("fill", "#5b717c") | |
.transition() | |
.attr("cx", function (d) { return x(d.name); }) | |
.attr("cy", function (d) { return y(d.x) }) | |
.attr("r", 5); | |
} | |
function drawLineGraph(ds) { | |
var x = d3.scaleBand() | |
.domain(["A", "B", "C", "D", "E"]) | |
.range([0, $("#divBarTransition").width()]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, 60]) | |
.range([300, 0]); | |
var line = d3.line() | |
.x(function (d, i) { return x(d.name); }) | |
.y(function (d) { return y(d.y); }); | |
var svg = d3.select("#lineTransition"); | |
svg.select(".line").remove(); | |
var path = svg.append("path") | |
.datum(ds) | |
.attr("class", "line") | |
.attr("d", line); | |
var totalLength = path.node().getTotalLength(); | |
path | |
.attr("stroke-dasharray", totalLength + " " + totalLength) | |
.attr("stroke-dashoffset", totalLength) | |
.transition() | |
.duration(1000) | |
.ease(d3.easeLinear) | |
.attr("stroke-dashoffset", 0); | |
} | |
////////////////////////////////////////////////////////////// | |
// Other chart types | |
////////////////////////////////////////////////////////////// | |
function visualizePieChart() { | |
var width = $("#divPie").width(), | |
height = 500, | |
radius = Math.min(width, height) / 2; | |
var svg = d3.select("#divPie").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / | |
2 + ")"); | |
var arc = d3.arc() | |
.outerRadius(radius - 10) | |
.innerRadius(0); | |
var pie = d3.pie() | |
.sort(null) | |
.value(function (d) { return d.x; }); | |
var color = d3.scaleOrdinal() | |
.domain(["A", "B", "C", "D", "E"]) | |
.range(["#7b6888", "#6b486b", "#a05d56", "#d0743c", | |
"#ff8c00"]); | |
var labelArc = d3.arc() | |
.outerRadius(radius - 40) | |
.innerRadius(radius - 40); | |
var g = svg.selectAll(".arc") | |
.data(pie(dataset1)) | |
.enter().append("g") | |
.attr("class", "arc"); | |
g.append("path") | |
.attr("d", arc) | |
.style("fill", function (d) { | |
return color(d.data.name); | |
}); | |
g.append("text") | |
.attr("transform", function (d) { return "translate(" + | |
labelArc.centroid(d) + ")"; }) | |
.attr("dy", ".35em") | |
.text(function (d) { | |
return d.data.name; | |
}); | |
} | |
function visualizeDonutChart() { | |
var width = $("#divDonut").width(), | |
height = 500, | |
radius = Math.min(width, height) / 2; | |
var svg = d3.select("#divDonut").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / | |
2 + ")"); | |
var arc = d3.arc() | |
.outerRadius(radius - 10) | |
.innerRadius(radius - 70); | |
var pie = d3.pie() | |
.sort(null) | |
.value(function (d) { return d.x; }); | |
var color = d3.scaleOrdinal() | |
.domain(["A", "B", "C", "D", "E"]) | |
.range(["#7b6888", "#6b486b", "#a05d56", "#d0743c", | |
"#ff8c00"]); | |
var labelArc = d3.arc() | |
.outerRadius(radius - 40) | |
.innerRadius(radius - 40); | |
var g = svg.selectAll(".arc") | |
.data(pie(dataset1)) | |
.enter().append("g") | |
.attr("class", "arc"); | |
g.append("path") | |
.attr("d", arc) | |
.style("fill", function (d) { | |
return color(d.data.name); | |
}); | |
g.append("text") | |
.attr("transform", function (d) { return "translate(" + | |
labelArc.centroid(d) + ")"; }) | |
.attr("dy", ".35em") | |
.text(function (d) { | |
return d.data.name; | |
}); | |
} | |
function visualizeMap() { | |
var width = $("#divMap").width(), | |
height = 600; | |
var svg = d3.select("#divMap").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var path = d3.geoPath(); | |
d3.json("https://d3js.org/us-10m.v1.json", function (error, us) | |
{ | |
if (error) throw error; | |
svg.append("g") | |
.attr("class", "states") | |
.selectAll("path") | |
.data(topojson.feature(us, us.objects.states).features) | |
.enter().append("path") | |
.attr("d", path); | |
svg.append("path") | |
.attr("class", "state-borders") | |
.attr("d", path(topojson.mesh(us, us.objects.states, | |
function (a, b) { return a !== b; }))); | |
}); | |
} | |
function visualizeNodeLinkDiagran() { | |
var graph = { | |
"nodes": [ | |
{ "id": "1", "group": 1 }, | |
{ "id": "2", "group": 1 }, | |
{ "id": "3", "group": 1 }, | |
{ "id": "4", "group": 1 }, | |
{ "id": "5", "group": 1 } | |
], | |
"links": [ | |
{ "source": "1", "target": "2", "value": 1 }, | |
{ "source": "2", "target": "4", "value": 1 }, | |
{ "source": "4", "target": "3", "value": 1 }, | |
{ "source": "4", "target": "5", "value": 1 } | |
] | |
}; | |
var width = $("#divGraph").width(), | |
height = 600; | |
var svg = d3.select("#divGraph").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var simulation = d3.forceSimulation() | |
.force("link", d3.forceLink().id(function (d) { return d.id; })) | |
.force("charge", d3.forceManyBody().strength(-400)) | |
.force("center", d3.forceCenter(width / 2, height / 2)); | |
var link = svg.append("g") | |
.style("stroke", "#aaa") | |
.selectAll("line") | |
.data(graph.links) | |
.enter().append("line"); | |
var node = svg.append("g") | |
.attr("class", "nodes") | |
.selectAll("circle") | |
.data(graph.nodes) | |
.enter().append("circle") | |
.attr("r", 2) | |
.call(d3.drag() | |
.on("start", dragstarted) | |
.on("drag", dragged) | |
.on("end", dragended)); | |
var label = svg.append("g") | |
.attr("class", "labels") | |
.selectAll("text") | |
.data(graph.nodes) | |
.enter().append("text") | |
.attr("class", "label") | |
.text(function (d) { return d.id; }); | |
simulation | |
.nodes(graph.nodes) | |
.on("tick", ticked); | |
simulation.force("link") | |
.links(graph.links); | |
function ticked() { | |
link | |
.attr("x1", function (d) { return d.source.x; }) | |
.attr("y1", function (d) { return d.source.y; }) | |
.attr("x2", function (d) { return d.target.x; }) | |
.attr("y2", function (d) { return d.target.y; }); | |
node | |
.attr("r", 16) | |
.style("fill", "#efefef") | |
.style("stroke", "#424242") | |
.style("stroke-width", "1px") | |
.attr("cx", function (d) { return d.x + 5; }) | |
.attr("cy", function (d) { return d.y - 3; }); | |
label | |
.attr("x", function (d) { return d.x; }) | |
.attr("y", function (d) { return d.y; }) | |
.style("font-size", "10px").style("fill", "#333"); | |
} | |
function dragstarted(d) { | |
if (!d3.event.active) | |
simulation.alphaTarget(0.3).restart(); | |
d.fx = d.x; | |
d.fy = d.y; | |
} | |
function dragged(d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
} | |
function dragended(d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
if (!d3.event.active) | |
simulation.alphaTarget(0); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment