2a:null 2b:["$","title",null,{"children":"Untitled | Stephanie Adeline | Observable"}] 30:Tb11,chart = { const root = pack(data); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill", d => color(d.data.group)) leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); svg .append('circle') .attr('cx', 15) .attr('cy', 25) .attr('r', 10) .style('fill', '#0d98ba'); // .style('stroke', '#000000'); svg .append('text') .text('Kapal Cargo') .attr('x', 35) .attr('y', 30) .attr('text-anchor', 'start') .style('font-size', '20px'); //2001 svg .append('circle') .attr('cx', 15) .attr('cy', 50) .attr('r', 10) .style('fill', '#2e856e'); svg .append('text') .text('Kapal Tanker') .attr('x', 35) .attr('y', 55) .attr('text-anchor', 'start') .style('font-size', '20px'); //2001 svg .append('circle') .attr('cx', 15) .attr('cy', 75) .attr('r', 10) .style('fill', '#cccccc'); svg .append('text') .text('Kapal lainnya') .attr('x', 35) .attr('y', 80) .attr('text-anchor', 'start') .style('font-size', '20px'); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") .offset([-15, 0]) .html(function (d) { return `Jenis Kapal: ${d.data.id}
${d.data.typeid}
Jumlah: ${d.value} kapal `}); // .html(function(d) { return `Alasan kematian: ${d.data.id} `; }) svg.call(tip).selectAll("circle") .on('mouseover', function(d) { tip.show(d, this); d3.select(this).style('opacity', "50%"); }) .on('mouseout', function(d) { tip.hide(); d3.select(this).style('opacity', "100%"); }); // leaf.append("text") // .attr("clip-path", d => d.clipUid) // .selectAll("tspan") // .data(d => d.data.id.split(/(?=[A-Z][a-z])|\s+/g)) // .join("tspan") // .attr("x", 0) // .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) // .text(function (d){ // if (d.r <= 50) { // return ""; // } // return d; // }); // leaf.append("title") // .text(d => `${d.data.title === undefined ? "" : `${d.data.title} // `}${format(d.value)}`); return svg.node(); }31:T41f,// tooltip = { // chart; // const tooltip = d3 // .select("body") // .append("div") // .attr("class", "svg-tooltip") // .style("position", "absolute") // .style("visibility", "hidden"); // // select all rect // d3.selectAll("circle") // .on("mouseover", function(d) { // // change the selection style // d3.select(this) // .attr('stroke-width', '2') // .attr("stroke", "black"); // // make the tooltip visible and update its text // tooltip // .style("visibility", "visible") // .html(`Jenis Kapal: ${d.data.id}
${d.data.typeid}
Jumlah: ${d.value} kapal `); // }) // .on("mousemove", function() { // tooltip // .style("top", d3.event.pageY - 10 + "px") // .style("left", d3.event.pageX + 5 + "px"); // }) // .on("mouseout", function() { // // change the selection style // d3.select(this).attr('stroke-width', '0'); // tooltip.style("visibility", "hidden"); // }); // }32:[{"id":"185220e1231debe1efdc00c4a23a1d672f370a88aacc4a992d5fffce20e6e10e96c813fb40bce9d4f06b5324a10f179911937d62206ba0043afb38e68103925e","href":"https://static.observableusercontent.com/files/185220e1231debe1efdc00c4a23a1d672f370a88aacc4a992d5fffce20e6e10e96c813fb40bce9d4f06b5324a10f179911937d62206ba0043afb38e68103925e","name":"bpp_marine_con.csv","type":"text/csv","lastModified":1595560218771.396,"size":2849},{"id":"dcf59c97cc0be449971f98f457ea5c4b9d6a401833ff6aee48450258751b644bf8a92f2a28633c18911209aa8c1a515006031afc6be938fa249778c8bf48dc69","href":"https://static.observableusercontent.com/files/dcf59c97cc0be449971f98f457ea5c4b9d6a401833ff6aee48450258751b644bf8a92f2a28633c18911209aa8c1a515006031afc6be938fa249778c8bf48dc69","name":"bpp_con_new.csv","type":"text/csv","lastModified":1595568997981.629,"size":2849}] 2e:{"id":"7808646c53a58a27","slug":"untitled","title":"","thumbnail":"879e731db445e8639d91f22a9f9f41df1246d24d11f030829cfe74750bc08e02","access_level":"public","create_time":"$D2020-07-22T14:36:36.285Z","update_time":"$D2020-08-02T07:55:47.818Z","view_time":null,"first_public_time":"$D2020-07-24T03:32:17.981Z","has_unpublished_edits":null,"fork":{"id":"64e74b1cb96692d4","slug":"bubble-chart-component","title":"Bubble chart component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"15a59822afb543e3","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":"starter_2024"},"version":350,"publish_version":350,"role":null,"authored":false,"authors":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null}],"members":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":0,"value":"md`## Bubble Chart Marine Traffic in Balikpapan\n\nData from MarineTraffic\n\nCode adapted from https://observablehq.com/@d3/bubble-chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"bpp_con_new.csv\").text())\n // , ({id, value, group, }) => ({name: id.split(\".\").pop(), title: id.replace(/\\./g, \"/\"), group: id.split(\".\")[1], value: +value}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (d3.hierarchy({children: data})\n .sum(d => d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"width = 932","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"color = d3.scaleOrdinal(data.map(d => d.group), [\n \"#0d98ba\",\n \"#2e856e\",\n \"#cccccc\",\n\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"styles = html`\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"