Skip to content

Instantly share code, notes, and snippets.

@tomruarol

tomruarol/.block

Last active December 31, 2018 10:01
Show Gist options
  • Save tomruarol/dbd4ff206773bac16df8355100c4b3b3 to your computer and use it in GitHub Desktop.
Save tomruarol/dbd4ff206773bac16df8355100c4b3b3 to your computer and use it in GitHub Desktop.
Download ZIP
Obesity in adults of the US
Raw
.block
license: mit
Raw
README.md

A reusable D3 scatter plot, constructed using Towards Reusable Charts and Standalone Scatter Plot as inspiration.

In the original reusable charts example, the comments state

// Convert data to standard representation greedily;
// this is needed for nondeterministic accessors.

In this adaptation, a simplifying assumption was made that no nondeterministic accessors will be given. Going one step further, an assumption was made that accessors will only want to access specific "columns" of data, meaning properties on each row object.

web counter

forked from curran's block: scat

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Obesity in adults of the US</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" type="text/css">
<style>
/* Make the container flush against the upper left corner. */
body {
margin: 0px;
}
/* Put a border around SVG elements so we can see how big they are. */
svg {
border-style: solid;
border-width: 1px;
}
/* Style the X and Y axes. */
.axis text {
font-family: "Poiret One", cursive;
font-size: 16pt;
}
.axis .label {
font-size: 32pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="scatterPlot.js"></script>
<script src="main.js"></script>
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66108038-1', 'auto'); ga('send', 'pageview'); </script>
</body>
</html>
Raw
iris.csv
Years Location Value Ethnicity
2011 Alabama 29.6 Non-Hispanic White
2011 Alaska 29.6 Hispanic
2011 California 29.5 Non-Hispanic White
2012 Alabama 35.5 Non-Hispanic White
2012 Florida 32.3 Non-Hispanic Black
2012 Alaska 31 Hispanic
2012 California 22.2 Non-Hispanic White
2013 California 17.3 Non-Hispanic White
2013 Alabama 27.2 Non-Hispanic Black
2013 Alaska 33.1 Hispanic
2014 Florida 35.1 Non-Hispanic White
2014 Florida 34.2 Non-Hispanic Black
2014 Alabama 28 Non-Hispanic White
2014 Alaska 35.4 Non-Hispanic White
2014 California 33.4 Non-Hispanic Black
2015 Florida 31.9 Asian
2015 Alaska 32 Non-Hispanic White
2015 California 31.1 Non-Hispanic Black
2015 California 25.4 Non-Hispanic White
2015 Alabama 25.5 Non-Hispanic Black
2015 Alaska 28.6 Non-Hispanic White
2016 Florida 38.3 Non-Hispanic Black
2016 Alaska 33.1 Hispanic
2016 Alaska 9.8 Asian
2016 California 30.6 Non-Hispanic Black
2016 Florida 38.1 American Indian/Alaska Native
2016 Alaska 31 Non-Hispanic Black
2016 California 26.1 Asian
Raw
main.js
var scatterPlot = ScatterPlot();
scatterPlot
.outerWidth(960)
.outerHeight(500)
.margin({ left: 95, top: 5, right: 10, bottom: 85 })
.xColumn("Values")
.xAxisLabel("Obesity Value")
.xAxisLabelOffset(70)
.xTicks(20)
.yColumn("Years")
.yAxisLabel("Years")
.yAxisLabelOffset(50)
.yTicks(20)
.colorColumn("Ethnicity")
.rColumn("Value")// "r" stands for radius
.rMin(5)
.rMax(50)
.colorRange(["#00c65c", "#8400c6", "#e54100"]);
function type(d){
d.Years = +d.Years;
d.Location = +d.Location;
d.Value = +d.Value;
d.Ethnicity = +d.Ethnicity;
return d;
}
d3.csv("iris.csv", type, function (data){
d3.select("#chart")
.datum(data)
.call(scatterPlot);
});
Raw
scatterPlot.js
function ScatterPlot(){
var outerWidth = 100;
var outerHeight = 100;
var margin = { left: 60, top: 5, right: 10, bottom: 60 };
var rMin = 2; // "r" stands for radius
var rMax = 300;
var xColumn = "No X column configured";
var yColumn = "No Y column configured";
var rColumn = "No radius column configured";
var colorColumn = "No color column configured";
var colorRange = d3.scale.category10().range();
var xAxisLabel = "No X axis label configured";
var xAxisLabelOffset = 40;
var yAxisLabel = "No Y axis label configured";
var yAxisLabelOffset = 30;
var xScale = d3.scale.linear();
var yScale = d3.scale.linear();
var rScale = d3.scale.linear();
var colorScale = d3.scale.ordinal();
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.tickFormat(d3.format("s"))
.outerTickSize(0);
var xTicks = 5;
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.tickFormat(d3.format("s"))
.outerTickSize(0);
var yTicks = 5;
function chart(selection){
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
colorScale.range(colorRange);
xScale.range([0, innerWidth]);
yScale.range([innerHeight, 0]);
rScale.range([rMin, rMax]);
xAxis.ticks(xTicks);
yAxis.ticks(yTicks);
selection.each(function (data) {
var svg = d3.select(this).selectAll("svg").data([data]);
var gEnter = svg.enter().append("svg").append("g");
var g = svg.select("g");
var circles = g.selectAll("circle").data(data);
gEnter
.append("g")
.attr("class", "x axis")
.append("text")
.attr("class", "label")
.style("text-anchor", "middle");
gEnter
.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "label")
.style("text-anchor", "middle");
xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
rScale.domain(d3.extent(data, function (d){ return d[rColumn]; }));
svg
.attr("width", outerWidth)
.attr("height", outerHeight);
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g
.select(".x.axis")
.attr("transform", "translate(0," + innerHeight + ")")
.call(xAxis)
.select("text")
.attr("x", innerWidth / 2)
.attr("y", xAxisLabelOffset)
.text(xAxisLabel);
g
.select(".y.axis")
.call(yAxis)
.select("text")
.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
.text(yAxisLabel);
circles.enter().append("circle");
circles
.attr("cx", function (d){ return xScale(d[xColumn]); })
.attr("cy", function (d){ return yScale(d[yColumn]); })
.attr("r", function (d){ return rScale(d[rColumn]); })
.attr("fill", function (d){ return colorScale(d[colorColumn]); });
circles.exit().remove();
});
}
chart.outerWidth = function(_) {
if (!arguments.length) return outerWidth;
outerWidth = _;
return chart;
};
chart.outerHeight = function(_) {
if (!arguments.length) return outerHeight;
outerHeight = _;
return chart;
};
chart.xColumn = function(_) {
if (!arguments.length) return xColumn;
xColumn = _;
return chart;
};
chart.yColumn = function(_) {
if (!arguments.length) return yColumn;
yColumn = _;
return chart;
};
chart.rColumn = function(_) {
if (!arguments.length) return rColumn;
rColumn = _;
return chart;
};
chart.rMin = function(_) {
if (!arguments.length) return rMin;
rMin = _;
return chart;
};
chart.rMax = function(_) {
if (!arguments.length) return rMax;
rMax = _;
return chart;
};
chart.colorRange = function(_) {
if (!arguments.length) return colorRange;
colorRange = _;
return chart;
};
chart.colorColumn = function(_) {
if (!arguments.length) return colorColumn;
colorColumn = _;
return chart;
};
chart.xAxisLabel = function(_) {
if (!arguments.length) return xAxisLabel;
xAxisLabel = _;
return chart;
};
chart.yAxisLabel = function(_) {
if (!arguments.length) return yAxisLabel;
yAxisLabel = _;
return chart;
};
chart.xAxisLabelOffset = function(_) {
if (!arguments.length) return xAxisLabelOffset;
xAxisLabelOffset = _;
return chart;
};
chart.yAxisLabelOffset = function(_) {
if (!arguments.length) return yAxisLabelOffset;
yAxisLabelOffset = _;
return chart;
};
chart.xTicks = function(_) {
if (!arguments.length) return xTicks;
xTicks = _;
return chart;
};
chart.yTicks = function(_) {
if (!arguments.length) return yTicks;
yTicks = _;
return chart;
};
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
return chart;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment