window.outputRegionNumber="21"
chart_province = () => {
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = 700 - margin.left - margin.right,
height = 550 - margin.top - margin.bottom;
var current_selected;
var last_selected;
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("viewBox", [0, 0, 960, 700])
.style("background-color", "#fafafa");
svg
.append("g")
.attr("transform", "translate(20, 10)")
.append(() =>
legend({
color,
title: "中车任务可视化图表(省份)",
ticks: 0
})
);
const g = svg
.append("g")
.selectAll(".provinces")
.data(provinceFeatures)
.join("path")
.attr("class", "provinces")
.attr("d", pathGenerator)
.attr("fill", (d) => {
let cases = d.properties.count;
return cases === "NA" || cases === undefined ? "#636363" : color(+cases);
})
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "0.7px")
// ********** new stuff starts here **********
.on("mousemove", mouseMove)
.on("mouseleave", mouseLeave)
.on("click", mouseClick)
.append("title")
.html(
(d) => `省份区域：${d.properties.ProvCH}
任务总数量：${d.properties.count === undefined ? 0 : d.properties.count}
已完成任务数量：${
d.properties.count_finish === undefined ? 0 : d.properties.count_finish
}
正在执行任务数量：${
d.properties.count_notFinish === undefined
? 0
: d.properties.count_notFinish
}`
);
// handle hovering over a circle
function mouseMove(event, d) {
// make the circle larger
d3.select(this).attr("fill", "#D19F4A");
d3.selectAll(".provinces").style("opacity", 0.2);
d3.select(this).style("opacity", 1);
d3.select("svg")
.append("rect")
.attr("class", "rect_zuoxia")
.attr("x", 0) // 左上角的x坐标
.attr("y", 550) // 左上角的y坐标
.attr("width", 350) // 矩形的宽度
.attr("height", 150) // 矩形的高度
.style("fill", "white"); // 设置填充颜色为白色
// 添加文字
d3.select("svg")
.append("text") // 添加一个外部对象元素
.attr("class", "text_zuoxia") // 指定一个类名
.attr("x", 0) // 设置位置
.attr("y", 625)
.attr("width", 200) // 设置宽度
.text("此处为"+d3.select(this).datum().properties.ProvCH+"的描述信息");
}
// handle leaving a circle
function mouseLeave(event, d) {
// reset the size of the circle
d3.select(this).attr("fill", (d) => {
let cases = d.properties.count;
return cases === "NA" || cases === undefined ? "#636363" : color(+cases);
});
d3.selectAll(".provinces").style("opacity", 1);
d3.selectAll(".rect_zuoxia").remove();
d3.selectAll(".text_zuoxia").remove();
current_selected.attr("fill","yellow");
}
// onclick
function mouseClick(event, d) {
last_selected = current_selected;
current_selected = d3.select(this);
current_selected.attr("fill","yellow");
last_selected.attr("fill", (d) => {
let cases = d.properties.count;
return cases === "NA" || cases === undefined ? color(+0) : color(+cases);
})
window.outputRegionNumber = d3.select(this).datum().properties.GbProv;
}
return svg.node();
}
color = d3.scaleSequentialLog()
.domain([1, maxTotalCases])
.interpolator(d3.interpolateReds);
maxTotalCases = provinceFeatures.reduce((accumulator, d) => {
accumulator = (accumulator < +d.properties.count
&& d.properties.count !== 'NA') ?
+d.properties.count :
accumulator;
return accumulator;
}, 0)
projection = d3.geoMercator()
.center([105, 43])
.scale([820]);
pathGenerator = d3.geoPath().projection(projection);
provinceFeatures = provinces.features;
provinceFeatures[0].geometry.coordinates[0][0][0]
starMap = FileAttachment("use.csv").csv()
provinces = {
const provinces = topojson.feature(provinceJson, provinceJson.objects.china_province_basemap);
provinceID.forEach(d => {
d.count = starMap.filter(s => s.code__3.substring(0,2) === d.ID).length;
d.count_finish = starMap.filter(s => s.code__3.substring(0,2) === d.ID && s.execute_end_date!='').length;
d.count_notFinish = starMap.filter(s => s.code__3.substring(0,2) === d.ID && s.execute_end_date =='').length;
});
provinces.features.forEach(d => {
Object.assign(d.properties, provinceID.filter(a => a.ID === d.properties.GbProv)[0])
});
return provinces;
}
provinceJson = FileAttachment("china_province_basemap@1.json").json()
cityJson = FileAttachment('china_city_basemap@1.json').json()
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from '@d3/color-legend'
type = [{1:"巡检"},{2:"勘察"},{3:"维修"}]
rightContent = window.outputRegionNumber.length === 2 || 4
? starMap.filter(
(s) =>
s.code__3.substring(0, window.outputRegionNumber.length) ===
window.outputRegionNumber
)
: []
rightContent_xunjian = rightContent.filter((s) => s.type === "1");
rightContent_kancha = rightContent.filter((s) => s.type === "2");
rightContent_weixiu = rightContent.filter((s) => s.type === "3");
treeButton = () => {
var margin = { top: 0, right: 0, bottom: 0, left: 0 },
width = 300,
height = 150;
var svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", "#fafafa");
svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var rect1 = svg
.append("rect")
.attr("x", 15) // 左上角的x坐标
.attr("y", 15) // 左上角的y坐标
.attr("width", 80) // 矩形的宽度
.attr("height", 80) // 矩形的高度
.style("fill", "#eeebea").on("click",function(){
console.log(1)
});
var rect2 = svg
.append("rect")
.attr("x", 110) // 左上角的x坐标
.attr("y", 15) // 左上角的y坐标
.attr("width", 80) // 矩形的宽度
.attr("height", 80) // 矩形的高度
.style("fill", "#eeebea").on("click",function(){
console.log(2)
});
var rect3 = svg
.append("rect")
.attr("x", 205) // 左上角的x坐标
.attr("y", 15) // 左上角的y坐标
.attr("width", 80) // 矩形的宽度
.attr("height", 80) // 矩形的高度
.style("fill", "#eeebea").on("click",function(){
console.log(3)
});
var line1 = svg
.append("line")
.attr("x1", 15)
.attr("y1", 95)
.attr("x2", 95)
.attr("y2", 15)
.style("stroke", "black");
var line2 = svg
.append("line")
.attr("x1", 110)
.attr("y1", 95)
.attr("x2", 190)
.attr("y2", 15)
.style("stroke", "black");
var line3 = svg
.append("line")
.attr("x1", 205)
.attr("y1", 95)
.attr("x2", 285)
.attr("y2", 15)
.style("stroke", "black");
var xunjian= svg
.append("text") // 添加一个外部对象元素
.attr("x", 55) // 设置位置
.attr("y", 120)
.text("巡检")
.style("fill","blue")
.style("text-anchor", "middle");
var kancha= svg
.append("text") // 添加一个外部对象元素
.attr("x", 150) // 设置位置
.attr("y", 120)
.text("勘察")
.style("fill","blue")
.style("text-anchor", "middle");
var weixiu= svg
.append("text") // 添加一个外部对象元素
.attr("x", 245) // 设置位置
.attr("y", 120)
.text("维修")
.style("fill","blue")
.style("text-anchor", "middle");
var xunjian1= svg
.append("text") // 添加一个外部对象元素
.attr("x", 55) // 设置位置
.attr("y", 45)
.text(rightContent_xunjian.filter(s=>s.execute_end_date==="").length)
.style("fill","green")
.style("text-anchor", "end");
var kancha1= svg
.append("text") // 添加一个外部对象元素
.attr("x", 150) // 设置位置
.attr("y", 45)
.text(rightContent_kancha.filter(s=>s.execute_end_date==="").length)
.style("fill","green")
.style("text-anchor", "end");
var weixiu1= svg
.append("text") // 添加一个外部对象元素
.attr("x", 245) // 设置位置
.attr("y", 45)
.text(rightContent_weixiu.filter(s=>s.execute_end_date==="").length)
.style("fill","green")
.style("text-anchor", "end");
var xunjian2= svg
.append("text") // 添加一个外部对象元素
.attr("x", 55) // 设置位置
.attr("y", 80)
.text(rightContent_xunjian.length)
.style("fill","black")
.style("text-anchor", "start");
var kancha2= svg
.append("text") // 添加一个外部对象元素
.attr("x", 150) // 设置位置
.attr("y", 80)
.text(rightContent_kancha.length)
.style("fill","black")
.style("text-anchor", "start");
var weixiu2= svg
.append("text") // 添加一个外部对象元素
.attr("x", 245) // 设置位置
.attr("y", 80)
.text(rightContent_weixiu.length)
.style("fill","black")
.style("text-anchor", "start");
return svg.node();
}
import {table} from '@haowei98/handsontable-for-observable'
import {chart_city} from '@haowei98/city'
import { toggleSwitch } from '@chrispahm/toggle-switch-input-button'
cellA = new Cell(grid.querySelector("[name=a]"))
cellB = new Cell(grid.querySelector("[name=b]"))
cellC = new Cell(grid.querySelector("[name=c]"))
cellA.embed(shouldDisplay?chart_province():chart_city())
cellB.embed(treeButton())
cellC.embed(table(rightContent_xunjian))
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.
