Published
Edited
Jul 6, 2020
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])
//.attr("preserveAspectRatio", "xMinYMin");
const group1 = svg.append("g")
svg.selectAll('.label')
.attr("transform", "translate(20, 13)")
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)()) //.shape("circle")
.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')
.attr("transform", "translate(10,20)")
.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')
.attr('transform', `translate(${renderData.margin},${renderData.margin})`);
const textX = 10;
const textY = 10;
const infoText = stage
.append('g');
const tEnter = enter =>
enter
.append('path')
.attr('d', pathGen)
.attr('stroke', 'white')
.attr('fill', mapColor)
.attr('opacity', '0.35')
.classed('geopath', true)
const tUpdate = null;
const tExit = null;
stage
.selectAll('.geopath')
.data(geoJson.features)
.join(tEnter, tUpdate, tExit);
return svg.node();
}
plot_malls(geoMercator, data_mapped[dd3])
function plot_malls(geoMercator, data, color){
console.log(dd3)
const svg = d3.select(".malls_chart");
console.log( svg)
svg.selectAll(".malls")
.remove();
svg.append("g")
.attr("class", "malls")
.selectAll(".mall_circles")
.data(data)
.enter().append("circle", ".mall_circles")
.attr("r", 2)
.attr("opacity", "0.6")
.attr("fill", d => d.color)
.attr("transform", function(d) {
return "translate(" + geoMercator([
d.longitude,
d.latitude
]) + ")";
})
.on("mouseover", function(d) {
tooltip
.html(
`<div>${d.mall_name} is located at <strong>${d.province}</strong></div>`
)
.style('visibility', 'visible')
.style('color', d => d.color);
})
.on('mousemove', function () {
tooltip
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px');
})
.on('mouseout', function () {
tooltip.html(``).style('visibility', 'hidden')
.style('color', "rgba(200, 69, 0, 1)");
});
svg.selectAll(".malls")
.attr('transform', `translate(${renderData.margin},${renderData.margin})`);
}
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.
