-
Notifications
You must be signed in to change notification settings - Fork 2
/
adjudicatarios.html
132 lines (113 loc) · 4.95 KB
/
adjudicatarios.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<style>
body {
font-family:"Helvetica Neue";
color: #686765;
}
.name {
float:right;
color:#27aae1;
}
.axis {
fill: none;
stroke: #AAA;
stroke-width: 1px;
}
text {
stroke: none;
fill: #666666;
font-size: .6em;
font-family:"Helvetica Neue"
}
.label {
fill: #414241;
}
.node {
cursor:pointer;
}
.dot {
opacity: .7;
cursor: pointer;
}
</style>
<h1>Hackaton de Datos Abiertos - FliSol Tandil 2017</h1>
<h3>Distribución de adjudicatarios segun monto y costo total de adjudicaciones</h3>
</p>
<div id="adjudicatarios-scatter"></div>
</p>
Visualizacion basada en https://jsfiddle.net/eamonnmag/Q567s/
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
// just to have some space around items.
var margins = {
"left": 100,
"right": 30,
"top": 30,
"bottom": 30
};
var width = 1600;
var height = 1000;
// this will be our colour scale. An Ordinal scale.
var colors = d3.scale.category10();
// we add the SVG component to the adjudicatarios-scatter div
var svg = d3.select("#adjudicatarios-scatter").append("svg").attr("width", width).attr("height", height).append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")");
d3.json("output/adjudicatarios.json", function showScatterPlot(data) {
// this sets the scale that we're using for the X axis.
// the domain define the min and max variables to show. In this case, it's the min and max costo_total of items.
// this is made a compact piece of code due to d3.extent which gives back the max and min of the costo_total variable within the dataset
var x = d3.scale.log()
.domain(d3.extent(data, function (d) {
return d.costo_total;
}))
// the range maps the domain to values from 0 to the width minus the left and right margins (used to space out the visualization)
.range([0, width - margins.left - margins.right]);
// this does the same as for the y axis but maps from the cantidad variable to the height to 0.
var y = d3.scale.log()
.domain(d3.extent(data, function (d) {
return d.cantidad;
}))
// Note that height goes first due to the weird SVG coordinate system
.range([height - margins.top - margins.bottom, 0]);
// we add the axes SVG component. At this point, this is just a placeholder. The actual axis will be added in a bit
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + y.range()[0] + ")");
svg.append("g").attr("class", "y axis");
// this is our X axis label. Nothing too special to see here.
svg.append("text")
.attr("fill", "#414241")
.attr("text-anchor", "end")
.attr("x", width / 2)
.attr("y", height - 35)
.text("Costo total");
// this is the actual definition of our x and y axes. The orientation refers to where the labels appear - for the x axis, below or above the line, and for the y axis, left or right of the line. Tick padding refers to how much space between the tick and the label. There are other parameters too - see https://github.com/mbostock/d3/wiki/SVG-Axes for more information
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickPadding(2);
var yAxis = d3.svg.axis().scale(y).orient("left").tickPadding(2);
// this is where we select the axis we created a few lines earlier. See how we select the axis item. in our svg we appended a g element with a x/y and axis class. To pull that back up, we do this svg select, then 'call' the appropriate axis object for rendering.
svg.selectAll("g.y.axis").call(yAxis);
svg.selectAll("g.x.axis").call(xAxis);
// now, we can get down to the data part, and drawing stuff. We are telling D3 that all nodes (g elements with class node) will have data attached to them. The 'key' we use (to let D3 know the uniqueness of items) will be the razon_social. Not usually a great key, but fine for this example.
var adjudicatario = svg.selectAll("g.node").data(data, function (d) {
return d.razon_social;
});
// we 'enter' the data, making the SVG group (to contain a circle and text) with a class node. This corresponds with what we told the data it should be above.
var adjudicatariosGroup = adjudicatario.enter().append("g").attr("class", "node")
// this is how we set the position of the items. Translate is an incredibly useful function for rotating and positioning items
.attr('transform', function (d) {
return "translate(" + x(d.costo_total) + "," + y(d.cantidad) + ")";
});
// we add our first graphics element! A circle!
adjudicatariosGroup.append("circle")
.attr("r", 5)
.attr("class", "dot")
.style("fill", function (d) {
return colors(d.razon_social);
});
// now we add some text, so we can see what each item is.
adjudicatariosGroup.append("text")
.style("text-anchor", "middle")
.attr("dy", -10)
.text(function (d) {
return d.razon_social;
});
});
</script>