chart= {
const svg= d3.create("svg")
.attr("viewBox", ([0, 0, width, height + 410]));
const grouping= svg.append("g");
// grouping.append("path")
// .join("path")
// .attr("d", path(outline))
// .attr("fill", "#fff");
// MAP geogrpahical features
grouping.append("path")
.join("path")
.attr("transform", `translate(${ margin.left }, ${ margin.height - 50})`)
.attr("d", path(land))
//.attr("fill", "lightgray")
.attr("fill", "#E8E8E8")
.attr("stroke", "#000")
.attr("stroke-width", 0.15);
grouping.append("path")
.join("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.15);
grouping.append("path")
.join("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none")
.attr("stroke-width", 0.45);
//circles
grouping.selectAll("circle")
.data(data_power)
.join("circle")
.attr("cx", d=> projection([d.Longitude, d.Latitude])[0])
.attr("cy", d=> projection([d.Longitude, d.Latitude])[1])
.attr("fill", "rgb(217, 91, 67)")
.attr("r", 2)
/////////////////////
// LABELS
svg.selectAll("text")
.data(data_power_name_notEdit)
.enter()
.append("text")
.text(function(d){
return d["Name"];
})
.attr("x", function(d) { return projection([d.Longitude, d.Latitude ])[0] + 10; })
.attr("y", function(d) { return projection([d.Longitude, d.Latitude])[1] - 15;})
.attr("class", "label");
// .attr("x", d => projection([d.Longitude, d.Latitude ])[0] + 10 )
// .attr("y", d => projection([d.Longitude, d.Latitude])[1] + 15 )
// .attr("class", "label");
// BAR PLOT multiple
const grouping_bar= svg.append("g")
.attr("transform", `translate(${width /5.6}, ${height - 65})`);
grouping_bar.append("svg:image")
.attr("xlink:href", bar_chart_image)
.attr("width", 580)
.attr("height", 520)
// grouping.append("line")
// svg.append("g")
// .attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(x).tickSize(0));
// svg.append("g")
// .call(d3.axisLeft(y));
return svg.node();
}
subgroups= data_power.columns.slice(1)
groups = d3.map(data_power, function(d){return(d.group)}).keys()
// Add X axis
bar_x = d3.scaleBand()
.domain(groups)
.range([0, width])
.padding([0.2])
bar_y = d3.scaleLinear()
.domain([0, 40])
.range([ height, 0 ]);
// Another scale for subgroup position?
xSubgroup = d3.scaleBand()
.domain(subgroups)
.range([0, bar_x.bandwidth()])
.padding([0.05])
projection = d3.geoEqualEarth().translate( [ width /2, height -200]).scale([135])
path = d3.geoPath(projection)
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
world = FileAttachment("countries-50m.json").json()
x= d3.scaleLinear()
.domain([0, d3.extent(data_salary, d=> d["YearsExperience"])])
.range([0 , iwidth])
y= d3.scaleLinear()
.domain(d3.extent(data_salary, d=> d["Salary"]))
.range([iheight- 0])
margin= ({ left: 20, top: 40, right: 30, bottom: 20})
iwidth= width - margin.left -margin.right
iheight= height - margin.top - margin.bottom
height= 400
data_power= FileAttachment("table_4_mean.csv").csv({typed: true})
data_power_name_notEdit= FileAttachment("table_4_source_names_no_EDITING.csv").csv({typed:true})
data_oco2= FileAttachment("cali_2018_2020.csv").csv()
data_salary= FileAttachment("Salary_Data.csv").csv()
bar_chart_image= await(FileAttachment("bar_plot_world_power_plant_GRAPH_A.png").url())
d3= require("d3@6")
import {swatches} from "@d3/color-legend"
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.
