Skip to content

Instantly share code, notes, and snippets.

@espetro

espetro/index.html

Last active March 30, 2017 22:41
Show Gist options
  • Save espetro/1afa474d6b27bb6dd6376979150be609 to your computer and use it in GitHub Desktop.
Save espetro/1afa474d6b27bb6dd6376979150be609 to your computer and use it in GitHub Desktop.
Download ZIP
Percentage of total load per total weight in a public transport vehicle in Brasil (2016)
Raw
index.html
<!DOCTYPE html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="https://i.imgur.com/UMeohYH.jpg" alt="Total load / total weight percentage; transport types in Brasil" height="500" width = "500">
</body>
Raw
script.js
function draw(data) {
/*
D3 setup code
*/
var margin = 75,
width = 1100,
height = 600;
var svg = d3.select('body')
.append("svg")
.attr("width",width)
.attr("height",height)
.append('g')
.attr("class","chart");
/*
dimple setup code
*/
var easyChart = new dimple.chart(svg,data);
var x = easyChart.addCategoryAxis("x","type");
var y = easyChart.addMeasureAxis("y","load_perc");
x.title = "Transportation type";
y.title = "Load / Weight";
y.tickFormat = "%";
easyChart.addSeries(null,dimple.plot.bar);
easyChart.draw();
// svg.append("g")
// .style("font-size","14px");
svg.append("text")
.attr("x", easyChart._xPixels() + easyChart._widthPixels() / 2)
.attr("y", easyChart._yPixels() - 20)
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-weight", "bold")
.text("Total load depending on total weight");
}
d3.json('weightdata.json',draw);
Raw
weightdata.json
[
{
"type": "bus",
"load_perc": 0.611
},
{
"type": "railway",
"load_perc": 0.207
},
{
"type": "boat",
"load_perc": 0.136
},
{
"type": "airplane",
"load_perc": 0.04
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment