This is my first sentence
This is a link to the d3 graph gallery
``` -------------------------------- ### D3.js Ridgeline Plot Setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/ridgeline_animation.html Initial setup and library loading for ridgeline plots in d3.js v4 and v6. ```html ``` ```html ``` -------------------------------- ### Ridgeline plot template setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/ridgeline_template.html HTML and script setup for rendering a ridgeline plot using d3.js versions 4 and 6. ```html ``` ```html ``` -------------------------------- ### D3.js Transition Implementation Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/interactivity_transition.html A complete example showing how to initialize SVG circles with a dataset and trigger a transition to a new dataset using a button. ```html ``` -------------------------------- ### D3.js Connected Scatter Plot Setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/connectedscatter_tooltip.html Basic HTML and script setup for initializing a D3.js connected scatter plot with hover effects. ```html ``` ```html ``` -------------------------------- ### Initialize Force-Directed Network Graph Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/network_test.html Sets up the SVG container, loads network data, and configures force simulation parameters for nodes and links. ```javascript // set the dimensions and margins of the graph const margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/test.json").then( function(data) { // Initialize the links const link = svg .selectAll("line") .data(data.links) .join("line") .style("stroke", "#aaa") // Initialize the nodes const node = svg .selectAll("circle") .data(data.nodes) .join("circle") .attr("r", 20) .style("fill", "#69b3a2") // Let's list the force we wanna apply on the network const simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes .force("link", d3.forceLink() // This force provides links between nodes .id(function(d) { return d.id; }) // This provide the id of a node .links(data.links) // and this the list of links ) .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area .on("tick", ticked); // This function is run at each iteration of the force algorithm, updating the nodes position. function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("cx", function (d) { return d.x+6; }) .attr("cy", function(d) { return d.y-6; }); } }); ``` -------------------------------- ### D3.js v6 Bubble Chart Tooltip Setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/bubble_tooltip.html Initial HTML and CSS setup for a bubble chart using D3.js v6, including hover effects defined in CSS. ```html ``` -------------------------------- ### Initialize tooltips and versioning Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/bubblemap_basic.html Initializes Bootstrap tooltips and sets the D3 version display. ```javascript $(function () { $('[data-toggle="tooltip"]').tooltip(); }); ``` ```javascript showCodeVersion("v4"); ``` -------------------------------- ### D3.js v4 Bubble Chart Tooltip Setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/bubble_tooltip.html Initial HTML and CSS setup for a bubble chart using D3.js v4, including hover effects defined in CSS. ```html ``` -------------------------------- ### HTML Script Tag Source: https://github.com/holtzy/d3-graph-gallery/blob/master/DOC/reference.html A simple script tag example. ```html ``` -------------------------------- ### Get Unique Entries Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/basic_datamanipulation.html Extract unique values from a specific column. ```javascript var allGroup = d3.map(data, function(d){return(d.name)}).keys() ``` -------------------------------- ### Load UI Components with jQuery Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/violin_basicHist.html Initializes newsletter and footer sections and enables tooltips. ```javascript $(function(){ $("#contact").load("../html_chunk/newsletter_section.html"); }); ``` ```javascript $(function(){ $("#myFooter").load("../html_chunk/footer.html"); }); $(function () { $("[data-toggle='tooltip']").tooltip() }) ``` -------------------------------- ### Google Analytics Tracking Setup Source: https://github.com/holtzy/d3-graph-gallery/blob/master/javascript-frontend-glossary.html Initializes Google Analytics and defines a helper function for tracking outbound link clicks. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-79254642-6'); var getOutboundLink = function (url) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': url, 'transport_type': 'beacon', 'event_callback': function () { document.location = url; } }); } ``` -------------------------------- ### Example Node Coordinate Structure Source: https://github.com/holtzy/d3-graph-gallery/blob/master/d3-function-glossary.html Represents the structure of a node object after coordinate calculation. ```json { x: 0.45, y: 0, children: [ { x: 0.2, y: 1, children: [Array] }, { x: 1 y: 0.8, children: [Array] } ] } ``` -------------------------------- ### Initialize and animate a network graph with D3.js Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/network_animationStart.html Sets up an SVG container, loads network data, and applies a force simulation to position nodes and links. ```javascript // set the dimensions and margins of the graph const margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json").then(function( data) { // Initialize the links const link = svg .selectAll("line") .data(data.links) .join("line") .style("stroke", "#aaa") // Initialize the nodes const node = svg .selectAll("circle") .data(data.nodes) .join("circle") .attr("r", 20) .style("fill", "#69b3a2") // Let's list the force we wanna apply on the network const simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes .force("link", d3.forceLink() // This force provides links between nodes .id(function(d) { return d.id; }) // This provide the id of a node .links(data.links) // and this the list of links ) .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area .on("tick", ticked); // This function is run at each iteration of the force algorithm, updating the nodes position. function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.source.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("cx", function (d) { return d.x+6; }) .attr("cy", function(d) { return d.y-6; }); } }); ``` -------------------------------- ### D3 Shape Helper Source: https://github.com/holtzy/d3-graph-gallery/blob/master/DOC/reference.html Example of using D3 shape helpers to draw elements. ```javascript svg.append("circle") ``` -------------------------------- ### Initialize and render chord diagram with tooltips Source: https://github.com/holtzy/d3-graph-gallery/blob/master/graph/chord_interactive.html JavaScript logic to create the SVG, define the data matrix, compute chord layout, and attach mouseover/mouseleave event listeners for tooltips. ```javascript ```