Quantitative Political Scientist, GIS User, R & Python developer.
Public
Edited
Jan 15, 2020
chart_3 = {
var width = 700,
height = 700
projection.fitSize([width, height], data_h3);
const svg = d3.select(DOM.svg(800, 800))
.style("width", width)
.style("height", height);
const g = svg.append("g")
g.selectAll("path")
.data(data_h3.features)
.enter().append("path")
.attr("d", path)
.attr('stroke', '#000')
.attr("fill", function(d) {
console.log(d.properties.h3, expression[d.properties.h3])
return expression[d.properties.h3]
})
.attr("d", path)
.attr("transform", "translate(0," + 30 + ")")
svg.append("g")
.attr("transform", "translate(400,40)")
.call(legend);
svg.append("text")
.attr("y", 760)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.attr("font-size", "10")
.attr("font-family", "Helvetica")
.text("Source: Observatorio de Ciudades UC (2017); GOPLACEIT (2019)");
return svg.node();
}
// Using https://observablehq.com/@d3/threshold-choropleth
legend = g => {
const width = 260;
const length = scale.range().length;
const x = d3.scaleLinear()
.domain([1, length - 1])
.rangeRound([width / length, width * (length - 1) / length]);
g.selectAll("rect")
.data(scale.range())
.join("rect")
.attr("height", 8)
.attr("x", (d, i) => x(i))
.attr("width", (d, i) => x(i + 1) - x(i))
.attr("fill", d => d);
g.append("text")
.attr("y", -6)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "12")
.text("m² Areas Verdes");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(i => scale.domain()[i - 1])
.tickValues(d3.range(1, length)))
.select(".domain")
.remove();
}
expression
data_hexagons.forEach(function(row) {
expression[row['h3']] = scale(row['valor']);
});
expression = []
data_hexagons
scale = d3.scaleQuantile()
.domain(data_hexagons_value)
.range(colorbrewer["Greens"][9]);
data_hexagons_value = data_hexagons.map(function(a) {return a.valor;});
chart_2 = {
var width = 700,
height = 700
projection.fitSize([width, height], data);
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
const g = svg.append("g")
var comunaFillColor = {
"LAS CONDES": "#ddc",
"LA CISTERNA": "#cdd",
"PUDAHUEL": "#cdc",
"SANTIAGO": "#dcd",
"PUENTE ALTO": "white",
"ESTACIÓN CENTRAL": "#ddc",
"RENCA": "#cdd",
"SAN MIGUEL": "#cdc",
"SAN BERNARDO": "#dcd",
"PROVIDENCIA": "white",
"VITACURA": "#ddc",
"EL BOSQUE": "#cdd",
"SAN RAMÓN": "#cdc",
"LA GRANJA": "#dcd",
"LA PINTANA": "white",
"CERRILLOS": "#ddc",
"MAIPÚ": "#cdd",
"QUINTA NORMAL": "#cdc",
"SAN JOAQUÍN": "#dcd",
"PEDRO AGUIRRE CERDA": "white",
"LA FLORIDA": "#ddc",
"MACUL": "#cdd",
"PEÑALOLÉN": "#cdc",
"ÑUÑOA": "#dcd",
"LO BARNECHEA": "white",
"LA PINTANA": "#cdc",
"HUECHURABA": "#dcd",
"QUILICURA": "white",
"LO ESPEJO": "#ddc",
"LA REINA": "#cdd",
"INDEPENDENCIA": "#cdc",
"ÑUÑOA": "#dcd",
"PADRE HURTADO": "white",
"RECOLETA": "#cdc",
"CONCHALÍ": "#dcd",
"CERRO NAVIA": "white",
"LO PRADO": "#ddc",
"SAN JOSÉ DE MAIPO": "#cdd",
"PIRQUE": "#ddc",
}
g.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.attr('stroke', '#000')
.attr("fill", function(d) {
console.log(d.properties.NOM_COMUNA, comunaFillColor[d.properties.NOM_COMUNA])
return comunaFillColor[d.properties.NOM_COMUNA]
})
.attr("d", path)
return svg.node();
}
chart = {
var width = 700,
height = 700
projection.fitSize([width, height], data);
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
const g = svg.append("g")
g.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.attr("fill", "#f3f3f3")
.attr('stroke', '#000');
return svg.node();
}
// set projection
projection = d3.geoTransverseMercator()
.rotate([69,0])
.center([0,0])
path = d3.geoPath()
.projection(projection);
import {serialize} from "@mbostock/saving-svg"
data_hexagons = d3.csv("https://gist.githubusercontent.com/robsalasco/8d3ec4cc39171cf39b88996d6c3995c7/raw/31868bf8682aa447ae8583ce1fed673e4dac7207/variable_res8.csv")
data_h3 = d3.json("https://gist.githubusercontent.com/robsalasco/88e108b2429c5668b47132fab8751677/raw/12b706360ea1a6844c763fcb2996a344783f54dc/h3_res8.geojson")
data =
d3.json("https://gist.githubusercontent.com/robsalasco/9a8dae4f0350c309b6e307e538359a0d/raw/7576be854a438b8bde010271dc42f20cd0af8a66/map.geojson")
colorbrewer = require('https://bundle.run/colorbrewer@1.3.0')
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
