|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis path{ |
|
fill: none; |
|
stroke: none; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font: 10px "Roboto", sans-serif; |
|
} |
|
|
|
.title { |
|
font: bold 14px "News Gothic MT", sans-serif; |
|
} |
|
|
|
.subtitle { |
|
font: 10px "News Gothic MT", sans-serif; |
|
} |
|
|
|
.cells path { |
|
fill: none; |
|
pointer-events: all; |
|
} |
|
|
|
.cells :hover circle { |
|
stroke: #000; |
|
} |
|
|
|
.legend circle { |
|
stroke: none; |
|
} |
|
|
|
.legend text { |
|
fill: #777; |
|
font: 10px sans-serif; |
|
text-anchor: middle; |
|
} |
|
|
|
.legendTitle { |
|
font: 14px sans-serif; |
|
fill: #4F4F4F; |
|
font-weight: 300; |
|
} |
|
|
|
</style> |
|
<svg width="750" height="300"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
margin = {top: 40, right: 90, bottom: 60, left: 40}, |
|
width = svg.attr("width") - margin.left - margin.right, |
|
height = svg.attr("height") - margin.top - margin.bottom; |
|
|
|
var formatValue = d3.timeFormat("%b %d, %Y"); |
|
|
|
var mindate = new Date(1992, 00, 01), |
|
maxdate = new Date(2018, 00, 01), |
|
parsedate = d3.timeParse("%m/%d/%y"); |
|
|
|
var xScale = d3.scaleTime() |
|
.domain([mindate, maxdate]) |
|
.range([0, width]); |
|
|
|
var colorScale = d3.scaleThreshold() |
|
.domain(["A", "C", "E"]) |
|
.range(d3.schemeRdYlBu[4]); |
|
|
|
var legendScale = d3.scaleThreshold() |
|
.domain(["Active", "Cancelled", "Expired"]) |
|
.range(d3.schemeRdYlBu[4]); |
|
|
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
var colorValue = function(d) { return colorScale(d.data.status); }; |
|
|
|
var legendValue = function(d) { return legendScale(d.data); }; |
|
|
|
d3.csv("gator-test.csv", type, function(error, data) { |
|
if (error) throw error; |
|
|
|
var simulation = d3.forceSimulation(data) |
|
.force("x", d3.forceX(function(d) { return xScale(d.value); }).strength(1)) |
|
.force("y", d3.forceY(height / 2)) |
|
.force("collide", d3.forceCollide(4)) |
|
.stop(); |
|
|
|
var keys = ["Active", "Cancelled", "Expired"]; |
|
|
|
for (var i = 0; i < 100; ++i) simulation.tick(); |
|
|
|
g.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(xScale).ticks(d3.timeYear.every(2))) |
|
.append("text") |
|
.attr("class", "title") |
|
.attr("dx", width/2) |
|
.attr("dy", 50) |
|
.style("text-anchor", "end") |
|
.style("fill", "#000") |
|
.style("font-size", "13px") |
|
.style("font-weight", 400) |
|
.text("Year"); |
|
|
|
var cell = g.append("g") |
|
.attr("class", "cells") |
|
.selectAll("g").data(d3.voronoi() |
|
.extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]]) |
|
.x(function(d) { return d.x; }) |
|
.y(function(d) { return d.y; }) |
|
.polygons(data)).enter().append("g"); |
|
|
|
cell.append("circle") |
|
.attr("r", 4) |
|
.attr("fill", colorValue) |
|
.attr("fill-opacity", 0.8) |
|
.attr("cx", function(d) { return d.data.x; }) |
|
.attr("cy", function(d) { return d.data.y; }); |
|
|
|
cell.append("path") |
|
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); |
|
|
|
cell.append("title") |
|
.text(function(d) { return d.data.id + "\n" + formatValue(d.data.value); }); |
|
|
|
svg.append("text") |
|
.attr("class", "title") |
|
.attr("x", (width / 22)) |
|
.attr("y", (margin.top / 2)) |
|
.attr("text-anchor", "left") |
|
.style("fill", "#000") |
|
.text("Businesses with \"Gator\" or \"Swamp\" in the name "); |
|
|
|
svg.append("text") |
|
.attr("class", "subtitle") |
|
.attr("x", (width/ 22)) |
|
.attr("y", (margin.top - 7)) |
|
.attr("text-anchor", "left") |
|
.style("fill", "#000") |
|
.text("by state name registration date"); |
|
|
|
var legendActive = svg.append("g") |
|
.attr("class", "legend") |
|
.attr("transform", "translate(" + (width + margin.right - 30) + "," + (margin.top - 10) + ")") |
|
.selectAll("g") |
|
.data(["Active"]) |
|
.enter().append("g"); |
|
|
|
legendActive.append("circle") |
|
.attr("y", (margin.top - 20)) |
|
.attr("fill", "#FCC08C") |
|
.attr("r", 4); |
|
|
|
legendActive.append("text") |
|
.attr("dy", (margin.top - 37)) |
|
.attr("dx", 22) |
|
.text(d3.format("3s")) |
|
.text("Active"); |
|
|
|
var legendCancelled = svg.append("g") |
|
.attr("class", "legend") |
|
.attr("transform", "translate(" + (width + margin.right - 30) + "," + (margin.top + 5) + ")") |
|
.selectAll("g") |
|
.data(["Cancelled"]) |
|
.enter().append("g"); |
|
|
|
legendCancelled.append("circle") |
|
.attr("y", (margin.top - 20)) |
|
.attr("fill", "#BFE2EE") |
|
.attr("r", 4); |
|
|
|
legendCancelled.append("text") |
|
.attr("dy", (margin.top - 37)) |
|
.attr("dx", 30) |
|
.text(d3.format("3s")) |
|
.text("Cancelled"); |
|
|
|
var legendExpired = svg.append("g") |
|
.attr("class", "legend") |
|
.attr("transform", "translate(" + (width + margin.right - 30) + "," + (margin.top + 20) + ")") |
|
.selectAll("g") |
|
.data(["Expired"]) |
|
.enter().append("g"); |
|
|
|
legendExpired.append("circle") |
|
.attr("y", (margin.top - 20)) |
|
.attr("fill", "#5A96C3") |
|
.attr("r", 4); |
|
|
|
legendExpired.append("text") |
|
.attr("dy", (margin.top - 37)) |
|
.attr("dx", 25) |
|
.text(d3.format("1s")) |
|
.text("Expired"); |
|
|
|
|
|
}); |
|
|
|
|
|
function type(d) { |
|
if (!d.value) return; |
|
d.value = parsedate(d.value); |
|
return d; |
|
} |
|
|
|
</script> |
