H

hm0421

@hm0421·25 public vizzes

Loading thumbnail…

Social Network ICE 8

A force-directed network diagram visualizes eight individuals grouped into four clusters, with weighted links between them indicating connection strength. The SVG rendering uses D3 v4’s force layout (`d3.layout.force`) to position nodes, applying gravity, charge, and distance parameters. Links are drawn as red lines with stroke widths based on link weight, while black circles represent nodes with blue name labels. Node positions update continuously during the simulation’s tick events, and dragging is enabled via `force.drag`. The code loads data from a JSON file containing node names, group assignments, and link weights.

Loading thumbnail…

MY Tree ICE-8

This interactive tree chart displays a family genealogy, with the root ancestor “chandraiah” branching into children and grandchildren. Nodes representing each person are drawn as cyan circles with blue outlines, connected by black curved links. The visualization is built using the D3.js library (version 3.5.17) and its `d3.layout.tree` and `d3.svg.diagonal` APIs. Clicking a node collapses or expands its subtree with a smooth 750-millisecond transition, and the SVG is rendered with animated updates to node positions and link paths.

Loading thumbnail…

Mexico map

This example displays a map of Mexico, rendering the country’s regions as purple landmasses outlined in yellow, set against a blue graticule grid. The visualization uses a Mercator projection configured with `geoMercator`, scaling and centering the map over the country. Geographic data is loaded as TopoJSON from a GitHub gist and converted to GeoJSON using `feature` from the `topojson` library. The map is drawn with `d3.geoPath` into an SVG within a React component, with styling applied via CSS classes.

Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Loading thumbnail…

3D Bar chart

This 3D bar chart visualizes public transport usage across six countries for each year from 2014 to 2019, with columns grouped by country along the x-axis and stacked by year along the z-axis. The chart uses the Highcharts library with its highcharts-3d module, enabling a perspective view through the options3d configuration (alpha, beta, and depth). Each series represents a year, and the data is provided as arrays of [category index, value] pairs. The chart also includes styled axes labels and a title, all rendered on a simple HTML page with a blue background.

Loading thumbnail…

BONUS ICE

This interactive 3D scatter plot visualizes the relationships between age, deep sleep percentage, and awakenings. Each red circular marker represents a data point, with its position along the three axes corresponding to the three variables. The visualization uses the Plotly.js library to render the 3D scene and D3.js to fetch and parse the CSV data from a GitHub gist. The chart allows users to explore the dataset by rotating and zooming into the plot, with axis labels clearly indicating the variables.

Loading thumbnail…

barGraph

This bar chart visualizes Indian startup data from a CSV file, mapping company names along the x-axis and city indices along the y-axis. Animated SVG rectangles transition when sorting buttons are clicked, reordering bars by ascending or descending city values while blue circles mark the exact data points. Built with d3.v5, the visualization uses scaleBand, scaleLinear, axisBottom, axisLeft, and transition methods, with tooltips displaying company and city information on mouseover.

Loading thumbnail…

Fork of barGraph

This example shows a bar chart of country population data, where users can sort bars in ascending or descending order by clicking buttons. The visualization reads population figures from a CSV file and renders them as SVG rectangles using D3 v5. The code also includes an HTML tooltip div for potential hover interactions. Data spans multiple years and includes country metadata like continent and capital, though only the population values are currently displayed.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset with color-coded markers for species. Built with React and D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles for rendering. An animated `setInterval` cycles the x-axis through different flower measurements. CSS styling uses the Share Tech font, and the legend labels each species with distinctive colors.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements. A D3.js animation cycles through the four measurement columns on the x-axis, while y-values remain fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend displayed. The visualization is built with the D3.js library using React, rendered as an SVG with animated transitions, and includes axis labels and a title.

Loading thumbnail…

Fork of Line_Stroke_Death

This example displays a 3D column chart using Highcharts and the highcharts-3d add-on, showing vehicle sales counts by month across four stacked series: new vehicles, used vehicles, total new sales, and total used sales. The chart uses Highcharts’ `column` plot type with `options3d` enabled for depth and rotation, and the data is hardcoded in the script. The visualization is rendered in an HTML page with a background color set via inline CSS, and jQuery is included to initialize the chart in a container div.

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes data from an ice company dataset, comparing new and used product values against company names and cities. Built with Plotly.js and D3.js, the visualization renders two separate 3D marker traces—one plotting New versus Used values by company, another plotting New versus Total Sales New by city. The code loads data from a GitHub gist CSV file using D3’s csv function, then constructs interactive 3D scatter plots with configurable marker sizes, opacity, and colors within a minimal-margin layout.

Loading thumbnail…

Fork of Area Death's

This area chart visualizes average life expectancy by year from a brain stroke dataset, rendered as an orange, curved path over a time-scaled x-axis. The code uses D3 v5 to load CSV data, construct scales with `scaleTime` and `scaleLinear`, and generate the area path via `area()` with `curveBasis`. The SVG chart includes titled axes, gridlines, and labels, sourced from a gist CSV file.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements. A D3.js animation cycles through the four measurement columns on the x-axis, while y-values remain fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend displayed. The visualization is built with the D3.js library using React, rendered as an SVG with animated transitions, and includes axis labels and a title.

Loading thumbnail…

Fork of ice-6

A horizontal bar chart shows the number of hospitalized confirmed COVID-19 patients for the top 20 counties, fetched from a CSV file via `d3.csv`. The chart uses React state and effects to load data, then renders SVG `rect` elements scaled with `d3.scaleBand` for counties and `d3.scaleLinear` for patient counts. Orange gridlines and tick labels are drawn manually, with axes positioned using SVG transforms.

Loading thumbnail…

ice-6

This example shows the number of hospitalized COVID-confirmed patients per county as a horizontal bar chart, with bars colored orange against a plain SVG backdrop and an axis showing tick values. It uses React with D3 v5, employing `scaleBand` for the county categories and `scaleLinear` for the patient counts, while `csv` loads data from a remote GitHub gist. The visualization renders as raw SVG elements, with gridlines and county labels manually drawn via `select` and standard SVG components.

Loading thumbnail…

ICE-6

This visualization shows the relationship between Country/Region and Confirmed COVID-19 cases for the first 15 entries in a dataset, rendered as a horizontal bar chart using React and D3 v5. The code uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent the bars, with red gridlines and text labels drawn via D3 selections. The chart is embedded in a React component with a blue title, and data originates from a GitHub gist URL.

Loading thumbnail…

ICE-6 Bar Graph

A horizontal bar graph displays the top 20 countries by confirmed COVID-19 cases, with orange gridlines marking the linear x-axis and a categorical y-axis. Built with React hooks and D3 v5, the visualization uses `d3.csv` to load data from a GitHub gist, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles. The code also manually draws tick marks and labels using array mapping rather than D3’s axis components.

Loading thumbnail…

ICE-6

This visualization displays the relationship between holiday status and temperature for insured individuals, using horizontal bars to compare temperature values across different holiday categories. The React component loads data from a CSV file and renders an SVG chart with D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while manually constructing axes and gridlines. Each rectangle’s width corresponds to the temperature value, and the chart title clarifies the focus on age and BMI, though the visualization actually plots holiday flags against temperature data.

Loading thumbnail…

Fork of Fork of ICE-6

This horizontal bar chart displays the relationship between county-level COVID-19 hospitalization counts and patient BMI among insured individuals, using the first 15 records from a Walmart-related CSV dataset. The visualization is built with React and D3 v5, using `d3.csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` elements for bars. Axes are manually generated with tick loops, and the chart is rendered in the browser from a bundled `bundle.js` file.

Loading thumbnail…

Fork of ICE-6

This visualization displays the relationship between age and BMI for insured individuals, showing a bar chart of hospitalized COVID-confirmed patients per county. The data comes from a CSV file loaded via `d3.csv`, with the first fifteen records rendered as horizontal bars. The chart uses React for component management and D3 v5’s `scaleBand`, `scaleLinear`, and `max` functions to map county names and patient counts. The SVG output includes manually drawn axes with tick marks and labels, while the grid lines are styled in red.

Loading thumbnail…

ice-6

This example shows the cost of 15 laptops from a CSV dataset, displayed as a horizontal bar chart. The visualization uses React to manage state and render an SVG, while D3 v5 utilities (`scaleBand`, `scaleLinear`, `max`, `csv`) handle data loading, scaling, and axes. Values are plotted with `rect` elements, and orange grid lines with tick labels are generated via `xScale.ticks()`. The chart is titled "laptops" and uses a magenta heading, with bars extending from the left margin.

Loading thumbnail…

Fork of ICE5

This example displays metadata for a laptops dataset, showing the file size, row count, and column count on a webpage with a laptop background image. The page presents this summary in large, bold text under a title and a link to the dataset. The code uses D3 v7’s `d3.csv` and `d3.csvFormat` functions to fetch the CSV from a GitHub gist, calculate the character length in kilobytes, and extract the number of rows and columns, then injects the result into the DOM via `textContent`. The layout is styled with CSS for the background and centered typography.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of randomly generated, semi-transparent colored polygons layers over a large Buddha path, creating an overlapping abstract composition. The visualization uses React to render SVG elements, mapping nested arrays to produce hundreds of polygons with random coordinates, fill colors, and rotations atop the intricate path data. The Buddha shape is drawn via an SVG `path` element, while the polygon overlay adds chaotic, colorful geometry that partially obscures the underlying figure.