Skip to content

Instantly share code, notes, and snippets.

@nivas8292

nivas8292/index.html

Last active August 29, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nivas8292/d89bd5f03508a3470d70 to your computer and use it in GitHub Desktop.
Save nivas8292/d89bd5f03508a3470d70 to your computer and use it in GitHub Desktop.
Download ZIP
Scatter Plot - Donut sales
Raw
index.html
<html>
<head>
<title>Scatter Plot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<br>
<script>
var w = 800;
var h = 450;
var margin = {
top: 60,
bottom: 60,
left: 80,
right: 20
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var chart = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("id", "chart")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.domain([1, 5])
.range([height, 0]);
var responseScale = d3.scale.linear()
.range([2, 15]);
var colorScale = d3.scale.category10();
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(20)
.ticks(5)
.tickFormat(function (d) {
return d.toFixed(1);
})
.orient("left");
var tickValues = [18, 25, 32, 39, 46, 53, 60, 67, 74];
var xAxis = d3.svg.axis()
.scale(xScale)
.tickValues(tickValues)
.orient("bottom");
var xGridLines = d3.svg.axis()
.scale(xScale)
.tickValues(tickValues)
.tickSize(-height, -height)
.tickFormat("")
.orient("bottom");
var yGridLines = d3.svg.axis()
.scale(yScale)
.tickSize(-width, 0, 0)
.tickFormat("")
.orient("left");
function drawAxis(params) {
if (params.initialize) {
this.append("g")
.classed("y gridline", true)
.attr("transform", "translate(0,0)")
.call(params.axis.gridline.y);
this.append("g")
.classed("x gridline", true)
.attr("transform", "translate(0, " + height + ")")
.call(params.axis.gridline.x);
this.append("g")
.classed("y axis", true)
.attr("transform", "translate(0,0)")
.call(params.axis.y);
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(0, " + height + ")")
.call(params.axis.x);
this.select(".y.axis")
.append("text")
.classed("y axis-label", true)
.attr("transform", "translate(-56," + height / 2 + ") rotate(-90)")
.text("Rating");
this.select(".x.axis")
.append("text")
.classed("x axis-label", true)
.attr("transform", "translate(" + width / 2 + ", 48) ")
.text("Customer Age");
this.append("g")
.append("text")
.classed("chart-header", true)
.attr("transform", "translate(0,-24)")
.text("");
}
}
function plot(params) {
params.scale.x.domain(d3.extent(params.data, function (d) {
return d.age
}));
params.scale.r.domain(d3.extent(params.data, function (d) {
return d.responses
}));
drawAxis.call(this, params);
var self = this;
var donuts = d3.keys(params.data[0]).filter(function (d) {
return d !== 'age' && d !== 'responses';
});
//enter() for <g>
this.selectAll(".donut")
.data(donuts)
.enter()
.append("g")
.attr("class", function (d) {
return d;
})
.classed("donut", true);
//update for <g>
this.selectAll(".donut")
.style("fill", function (d, i) {
return params.scale.color(i)
})
.on("mouseover", function (d, i) {
d3.select(this)
.transition()
.style("opacity", 1)
})
.on("mouseout", function (d, i) {
d3.select(this)
.transition()
.style("opacity", 0.1)
});
donuts.forEach(function (donut) {
var g = self.select('g.' + donut);
var arr = params.data.map(function (d) {
return {
key: donut,
value: d[donut],
age: d.age,
responses: d.responses
};
});
//enter()
g.selectAll('.response')
.data(arr)
.enter()
.append("circle")
.classed('response', true);
//update
g.selectAll('.response')
.attr("r", function (d) {
return params.scale.r(d.responses)
})
.attr("cx", function (d) {
return params.scale.x(d.age)
})
.attr("cy", function (d) {
return params.scale.y(d.value)
})
.on("mouseover", function (d, i) {
str = d.key + " donut: ";
str += " age: " + d.age;
str += " responses: " + d.responses;
str += " average rating: " + d.value;
d3.select('.chart-header').text(str);
})
.on("mouseout", function (d, i) {
d3.select('.chart-header').text("");
});
//exit()
g.selectAll('.response')
.data(arr)
.exit()
.remove();
});
}
d3.csv("survey_data.csv", function (error, parsed_data) {
plot.call(chart, {
data: parsed_data,
scale: {
x: xScale,
y: yScale,
r: responseScale,
color: colorScale,
},
axis: {
x: xAxis,
y: yAxis,
gridline: {
x: xGridLines,
y: yGridLines,
}
},
initialize: true,
});
});
</script>
</body>
</html>
Raw
main.css
body, html {
margin:0;
padding:0;
font-family:"Arial", sans-serif;
font-size:0.95em;
text-align:center;
}
#chart {
background-color:#F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill:purple;
shape-rendering:crispEdges;
}
.bar-label {
text-anchor:end;
fill:white;
}
.axis path,
.axis line {
fill:none;
stroke:#000;
shape-rendering:crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.trendline {
fill: none;
stroke: #ccc;
stroke-width: 2;
/*stroke-dasharray:10;*/
}
.area {
fill: #ccc;
stroke: #ccc;
opacity: 0.25;
}
.donut {
opacity:0.1;
}
.axis-label {
text-anchor: middle;
}
.chart-header {
text-transform: capitalize;
font-size: 110%;
}
.temperature {
stroke:#95cddf;
stroke-width:2px;
}
.rain {
fill:none;
stroke:#cc627a;
stroke-width:0.5;
}
#cursor {
stroke: black;
}
Raw
survey_data.csv
age responses glazed jelly powdered sprinkles
18 7 3.14 4.43 2.43 3.86
19 3 3 3.67 2.67 4
20 3 2 4 2.33 4.33
21 2 3.5 4.5 1 3.5
22 6 2.83 3.5 1.83 4.5
23 4 3.25 4.75 2.25 3.5
25 2 1.5 4 2.5 4
26 3 1.67 3 1.33 4
27 2 2.5 4 1 4.5
28 3 3 4.33 1.33 4.33
29 1 5 4 1 4
30 1 5 5 2 5
31 4 1.5 4.5 3 4.75
32 3 3.67 3.33 1.67 4.67
33 2 2 4.5 1 5
34 4 2.75 3.75 2.5 4.5
35 4 4 3 2.75 4.25
36 2 1.5 3 4 4
37 2 3 3 3.5 4
39 3 4 2 3.33 4.67
40 2 3.5 3 4 4.5
41 4 2.75 2.75 4 4.25
42 4 2.25 2.5 1.75 4.25
43 1 1 2 1 5
44 3 2 3 3.67 3.33
46 3 3.33 2.33 3.33 3.33
47 4 2.25 4 2.75 3
48 4 3.75 2 3 2.75
49 4 2.75 2 3.75 3.25
51 3 2.67 2.67 1.67 3.67
52 2 2.5 2.5 4 3
53 3 3 3.67 4.67 2.67
54 2 5 5 5 3.5
55 3 2.33 1.67 2.33 3.33
56 1 3 2 3 3
57 1 2 2 2 4
59 4 1.25 2 3 1.75
60 2 2.5 2.5 4 2.5
61 3 2.33 2.33 2.67 3
62 4 2.25 2.5 3.75 3
63 2 1.5 3 3 2
64 5 2 3 3.4 2.4
65 2 2 1 4.5 2
66 3 2 1.67 4 1.67
67 4 1.5 1.75 3.75 2.25
68 4 2 2.5 4.25 2
70 1 3 2 3 3
71 3 2.33 2.67 4.33 2.33
72 4 3 2.5 3.75 2
73 2 2 2.5 4.5 2.5
74 2 3 2 4 1.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment