Published
Edited
Jul 7, 2020
2 stars
md `## Assign colors to each malls`
{
sm_data.forEach(function (item, index) {
item.color = "blue"
});
robinsons_data.forEach(function (item, index) {
item.color = "red"
});
ayala_data.forEach(function (item, index) {
item.color = "orange"
});
}
data_mapped = ({"all": sm_data.concat(robinsons_data).concat(ayala_data), "sm": sm_data, "robinsons": robinsons_data, "ayala": ayala_data})
chart = {
return render_chart()
}
function render_chart(){
const svg = d3.create("svg")
.classed("malls_chart", true)
.attr("viewBox", [0, 0, renderData.width, renderData.height])
.on("click", reset);
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
const circle = d3.symbol().type(d3.symbolCircle);
const symbolScale = d3.scaleOrdinal()
.domain(['SM Supermall', 'Robinsons Mall', 'Ayala Mall'])
.range([ "blue", "red", "orange"] );
const legendCircle = d3Legend
.legendColor()
.shape("path", d3.symbol().type(d3.symbolCircle).size(25)())
.scale(symbolScale)
.shapePadding(15)
.labelOffset(5)
.labels(["SM Supermalls"]);
svg.append("g")
.attr("class", "legend_circle")
.style('font-size', 12)
.style('font-family', 'sans-serif')
.call(legendCircle)
const margin_top_legend = 70;
const margin_right_legend = 250;
svg.select(".legend_auto")
.attr("transform", `translate(${centerScale(8)},${margin_top_legend})`)
svg.select(".legend_circle")
.attr("transform", `translate(${centerScale(8)},${margin_top_legend+220})`)
const pathGen = d3.geoPath(geoMercator);
const stage = svg
.append('g')
const textX = 10;
const textY = 10;
const infoText = stage
.append('g');
const tEnter = enter =>
enter
.append('path')
.attr("cursor", "pointer")
.attr('d', pathGen)
.attr('stroke', 'white')
.attr('fill', mapColor)
.attr('opacity', '0.35')
.classed('geopath', true)
.on("click", clicked)
.append("title")
.text(d => d.properties.ADM1_EN);
const tUpdate = null;
const tExit = null;
stage
.selectAll('.geopath')
.data(geoJson.features)
.join(tEnter, tUpdate, tExit);
function clicked(d) {
const [[x0, y0], [x1, y1]] = pathGen.bounds(d);
d3.event.stopPropagation();
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / renderData.width, (y1 - y0) / renderData.height)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.mouse(svg.node())
);
}
function reset() {
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([renderData.width / 2, renderData.height / 2])
);
svg.attr('transform', `translate(${renderData.margin},${renderData.margin})`);
}
function zoomed() {
const {transform} = d3.event;
stage.attr("transform", transform);
stage.attr("stroke-width", 1 / transform.k);
}
return svg.node();
}
plot_malls(geoMercator, data_mapped[dd3])
d3 = require("d3@v5", "d3-hexbin@0.2")
d3Legend = require("d3-svg-legend")
clippedWidth = renderData.width - renderData.margin * 2;
clippedHeight = renderData.height - renderData.margin * 2;
geoMercator = d3
.geoMercator()
// the center uses longtitude and latitude
// get Long/Lat data from google maps
.center([118, 11.6])
.fitSize([clippedWidth, clippedHeight], geoJson);
mapColor = "gray"
height = 500;
topojson = require("topojson-server@3", "topojson-client@3", "topojson-simplify@3")
color = '#69b3a2'
population_format = d3.format(".2s")
renderData = ({
width: 750,
height: 900,
margin: 50,
})
centerScale = d3.scaleLinear()
.domain([0,10])
.range([0, renderData.width]);
import {select} from "@jashkenas/inputs"
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.
