40:null 41:["$","title",null,{"children":"D3 | Lasha | Observable"}] 47:T745,

D3 საინტერესო ბრძანებები

.map((d) => ({ ...d }))

დააბრუნა ყველა დ მონაცემი

.map(d3.autoType)"

csv მონაცემებში სტრინგები გადაკონკვერტირდა (რიცხვი რიცხვად დრო დროდ და ა.შ)

.filter((d) => +d.population);

გაიფილტრა რასაც პოპულეიშენის მონაცემი ქონდა ის დარჩა

<g transform="translate(0,50) rotate(90)"> </g>

ადგილზევე რომ შემოტრიალდეს ტექსტი (g ელემენტში ვსვავთ და მანდვე უწერთ X Y და მობრუნებას) ამ ყველაფერს ჩავსვავთ g ტაგში

appHeaderContent.node().prepend(searchBarContainer.node());

დაამატე მშობლის პირველ შვილად, არ მუშაობს ძველ ბრაუზერებზე

appHeaderContent.node().insertBefore(searchBarContainer.node(), appHeaderContent.node().firstChild);

დაამატე მშობლის პირველ შვილად,მუშაობს ყველა ბრაუზერზე

48:T799,

D3 კოდები გამოსაყენებლად

49:T740,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, 500]); let data = [100, 200, 300, 400, 450]; let linedata = [ [130, 100], [300, 100], [300, 340], [400, 450] ]; let legendLineData = [ [400, 300], [500, 300] ]; let circle = svg .selectAll(".circle") .data(data) .enter() .append("circle") .transition() .duration(1000) .attr("cx", (d) => d) .attr("cy", (d) => d) .attr("class", "circle") .attr("r", 10) .style("fill", "green"); let rectangle = svg .selectAll("rect") .data(data) .enter() .append("rect") .transition() .duration(2000) .attr("width", 10) .attr("height", 10) .attr("x", (d) => d + 10) .attr("y", (d) => d + 10) .attr("fill", "red"); // Create a line generator const line = d3 .line() .x((d) => d[0]) .y((d) => d[1]); // Append the line to the chart let lifeLine = svg .append("path") .datum(linedata) .attr("fill", "none") .attr("stroke", "steelblue") .attr("class", "life-line") .attr("stroke-width", 2) .attr("d", line); // Append the legend line to the chart svg .append("path") .datum(legendLineData) .attr("fill", "none") .attr("stroke", "red") .attr("class", "legend-line") .attr("stroke-width", 2) .attr("d", line); let totalLength = lifeLine.node().getTotalLength(); lifeLine .attr("stroke-dasharray", totalLength + " " + totalLength) // The total length of the path as the dash and gap .attr("stroke-dashoffset", totalLength) // Starting offset, so initially the line is not visible .transition() .duration(2000) // Transition duration .ease(d3.easeLinear) // Transition timing function .attr("stroke-dashoffset", 0); // Ending offset, so the line becomes visible return svg.node(); }4a:[] 45:{"id":"f7b6ef1834196cf7","slug":null,"title":"D3","thumbnail":"ce92f1ceea77fd0df1cc1fda3206c620a71a8d33d1b5f7fd52e6a7b9cacb6851","access_level":"public","create_time":"$D2023-02-28T05:40:50.095Z","update_time":"$D2024-12-18T09:30:39.495Z","view_time":null,"first_public_time":"$D2023-02-28T05:40:50.095Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"620d4e98e45cb6cb","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":"starter_2024","bio":"","following":false},"version":388,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a542e9c8821cfd4b","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a542e9c8821cfd4b","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3","cells":[{"id":0,"value":"# D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$48","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"**Close form if click happens outside**\n\nfunction closeFormIfClickedOutside(form, formContentClass) {\n form.on(\"click\", function (event, d) {\n if (event.target.closest(formContentClass) === null) {\n form.style('display', 'none');\n }\n });\n}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"**Select All containers, add and remove class**\n\n\nlet pricePlans = d3.selectAll('.pricing-box-container');\n\npricePlans.on('click', function (event, d) {\n\n pricePlans.classed('pricing-box-active', false);\n let currentTarget = d3.select(event.currentTarget);\n\n currentTarget.classed('pricing-box-active', true)\n})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"**simply tooltip for bar-chart**\n\n\n // Create a div for the tooltip\n let tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0);\n\n\n .on(\"mouseover\", (event, d) => {\n tooltip.transition()\n .duration(200)\n .style(\"opacity\", .9);\n tooltip.html(d.menPercentage)\n .style(\"left\", (event.pageX) + \"px\")\n .style(\"top\", (event.pageY - 28) + \"px\");\n })\n .on(\"mouseout\", (d) => {\n tooltip.transition()\n .duration(500)\n .style(\"opacity\", 0);\n });","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"**Interesting idea of calculating with scaleLinear**\n\n const gapScale = d3.scaleLinear()\n .domain([300, 400, 500, 600, 700, 800, 900, 1000]) // Input domain values\n .range([7, 7, 7, 7, 7, 7, 7, 8.8]); // Output range values\n\n let gap = gapScale(calc.graphWidth);","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"**Load offline data **\n\nloadOfflineData(\"./offline-data/data.json\")\n\nfunction loadOfflineData(dataLink) {\nd3.json(dataLink, function(error, data) {\n if (error) {\n \n console.error(error);\n } else {\n console.log(data);\n\n\n }\n});\n}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"# heading d3 elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"\narc = d3\n .arc()\n .innerRadius(d => d.innerRadius)\n .outerRadius(d => d.outerRadius)\n .startAngle(d => d.startAngle)\n .endAngle(d => d.endAngle)\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"res = d3\n .arc()\n .innerRadius(0)\n .outerRadius(100)\n .startAngle(0)\n .endAngle(Math.PI / 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"firstRightObj =({\n innerRadius:10,\n outerRadius:100,\n startAngle:0,\n endAngle:Math.PI/2})\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"secondRightObj =({\n innerRadius:100,\n outerRadius:200,\n startAngle:0,\n endAngle:Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"firstRightPath = arc(firstRightObj)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"secondRightPath = arc(secondRightObj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"thirdRightObj =({\n innerRadius:200,\n outerRadius:300,\n startAngle:0,\n endAngle:Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"thirdRightPath = arc(thirdRightObj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"firstLeftObjOne =({\n innerRadius:10,\n outerRadius:100,\n startAngle:0,\n endAngle:-Math.PI/6})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"firstLeftObjTwo =({\n innerRadius:10,\n outerRadius:100,\n startAngle:-Math.PI/6,\n endAngle:-Math.PI/3})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"firstLeftObjThree =({\n innerRadius:10,\n outerRadius:100,\n startAngle:-Math.PI / 3,\n endAngle:-Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"firstLeftPathThree = arc(firstLeftObjThree)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"firstLeftPathOne = arc(firstLeftObjOne)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"firstLeftPathTwo = arc(firstLeftObjTwo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":345,"value":" FourthRightObj =({\n innerRadius:300,\n outerRadius:400,\n startAngle:0,\n endAngle:Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":" FourthLeftObj =({\n innerRadius:300,\n outerRadius:400,\n startAngle:0,\n endAngle:-Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"{\n const a = 4;\n const b = 10;\n\n const result = d3.max([a,b])\n\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"{\nconst arr = [1,2,3,12,5,6]\n\n const res = d3.max(arr, d=> d)\n\n return res;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"a = [1,2,3, null, undefined, 4, '45']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"b = d3.sum(a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"