ubl2

@ubl2·15 public vizzes

Country map

This visualization shows a choropleth map of India’s states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map is rendered as SVG using `d3.geoPath` with a `geoMercator` projection, while state boundaries are drawn from TopoJSON data loaded from a GitHub gist. A `scaleOrdinal` with `schemeCategory10` assigns colors, and text labels are placed at each state’s centroid via `pathGenerator.centroid`.

Mar 31, 2022

Loading thumbnail…

world map

This example displays a world map using an orange sphere and red countries outlined in black, rendered as an SVG via D3 v5. It loads geographic data from a TopoJSON file and converts it to GeoJSON using the `topojson.feature` method. The map applies the `geoNaturalEarth1` projection and draws paths with `d3.geoPath`, while a separate path outlines the globe’s sphere.

Mar 31, 2022

Loading thumbnail…

Family Tree

This interactive D3.js v3 family tree visualizes hierarchical generational data from a JSON file, using colored nodes to distinguish four family types. The tree layout computes node positions, with SVG rectangles and foreignObject text blocks rendering each family member’s name. Animation transitions reposition nodes when the hierarchy updates, while zoom and drag behaviors allow panning and scaling via `d3.behavior.zoom`. Links and arrow markers connect parent-child relationships, and a collision-avoidance pass prevents overlapping nodes.

Mar 31, 2022

Loading thumbnail…

Network tree

This example shows a force-directed network tree with six nodes and five weighted links, rendered as draggable orange circles with text labels. The code uses d3.layout.force (v4) to simulate gravity, charge, and link distance, while rendering SVG lines and groups. Node weights set stroke-width via Math.sqrt(d.weight), and data loads from an external graphFile.json containing name, group, and link target/source arrays. The visualization updates node positions on each tick using the force layout’s tick event.

Mar 31, 2022

Loading thumbnail…

Pie Chart with Overlapping Labels

This pie chart displays the GDP of ten countries, with each slice labeled directly on the chart. The labels, however, overlap when slices are narrow or adjacent. The visualization uses D3 v4 with SVG rendering. It creates the pie layout with `d3.pie()` and draws slices using `d3.arc()`. Text labels are positioned via `arc.centroid()` and styled with Arial font. Countries and their GDP values are hardcoded, and slice colors come from a `d3.scaleOrdinal()` with a predefined color range.

Mar 28, 2022

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot animates through the Iris dataset, cycling the x-axis among four measurements every two seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, while a custom `scatterPlot` function manages the plot’s width, height, margins, and radius. Circles are colored by species (setosa red, versicolor indigo, virginica orange) and sized via `rx`/`ry` attributes. The SVG updates dynamically through `setInterval`, demonstrating a modular design where the same chart is re-parameterized with different data columns.

Mar 28, 2022

Loading thumbnail…

Area Chart

This area chart displays India's GDP in billions from 2011 to 2020, using a filled pink path with a cyan stroke over a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parsing years as dates and GDP values as numbers. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` interpolation to create the smooth shaded region. Margins, axis labels, and a title are positioned using SVG groups, with tick lines and labels styled via CSS.

Mar 24, 2022

Loading thumbnail…

Line Chart

This line chart displays India's GDP in billions from 2011 to 2020, using a time-scaled x-axis for years and a linear y-axis for GDP values. The visualization is rendered as an SVG using D3 v5, with the code importing modular functions such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `extent`, and `max`. Data is loaded from a CSV file hosted in a GitHub gist, and the chart includes labeled axes, gridlines, a title, and a green stroke path generated by the `line` generator.

Mar 24, 2022

Loading thumbnail…

Pie Chart

A pie chart displays GDP per capita for ten countries from a CSV file, with color-coded slices and a legend showing country names and GDP values in billions. Built with D3 v5, the visualization uses `d3.pie()` and `d3.arc()` to generate SVG paths, `d3.scaleOrdinal` for color mapping, and `d3.format` for numeric labels. The data is loaded asynchronously via `d3.csv` from a gist URL, and the legend is manually positioned with rect and text elements.

Mar 24, 2022

Loading thumbnail…

Bonus ICE

A bubble chart visualizes Baskin-Robbins ice cream flavors by calories on the y-axis and trans fat on the x-axis, with circle size encoding carbohydrate content and color distinguishing individual flavors. Hovering over a bubble displays a tooltip with the flavor name. The visualization uses d3.csv to load data and d3.scaleLinear for positioning and sizing, while d3.scaleOrdinal with d3.interpolateTurbo assigns colors. SVG circles, axis labels, a legend for carbohydrate values, and a color legend are rendered. The code follows the d3-graph-gallery bubble chart template.

Mar 10, 2022

Loading thumbnail…

Bonus ICE

This example shows the top 10 cricket batters by ICC Player Ranking, grouped by their national teams. The chart presents a 3D bar chart, with bars grouped by country, including India, Australia, England, New Zealand, Sri Lanka, and Pakistan. The code uses the Highcharts library with the Highcharts 3D module, enabling a three-dimensional perspective. The chart has margins and a view distance configured, stacking bars in groups per country while displaying batting ratings along the y-axis.

Mar 10, 2022

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows a bar chart of the top 10 countries by GDP per capita, using green rounded rectangles to encode values. Data is loaded from a CSV via d3.csv and sorted by slicing the first ten rows. The visualization uses React hooks (useState, useEffect) to manage state, while D3 scales (scaleBand, scaleLinear) and SVG elements are rendered declaratively. Axis ticks and grid lines are generated manually using xScale.ticks() and DOM elements, without axis helper components.

Mar 10, 2022

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as red circles. The axes are rendered using d3.axisLeft and d3.axisBottom, while d3.scaleLinear and d3.extent compute the scales from the CSV data loaded via d3.csv. The SVG canvas fills the viewport, with fixed margins and labeled axes added as text elements.

Mar 2, 2022

Loading thumbnail…

Class Assignment 5

This example displays a text summary of a Baskin Robbins ice cream nutrition dataset, including the row and column counts. It uses the D3.js version 3 CSV parsing API (`d3.csv`) to load a remote CSV file and present a formatted message in the HTML page. The page also logs the list of ice cream flavors and dimension counts to the console. Styling is applied through CSS classes for visual presentation.

Feb 24, 2022

Loading thumbnail…

Fork of Smiley Face Part I

This example renders a partial smiley face using React and D3.js, showing a pink circle with black stroke, two eyes, and a mouth arc drawn with D3’s `arc` generator. The face is centered via SVG grouping and transformations, with the mouth path built from inner and outer radii and angular start/end points. It uses React for component structure and `d3.arc` to compute the mouth’s path data, all rendered as static SVG elements at a fixed 960×500 canvas size.

Feb 16, 2022