bugfree55

Covid 19 Cases in the US

This visualization displays COVID-19 case counts in the United States using a three-dimensional bar chart. The chart shows daily values for positive, negative, and recovered cases across multiple dates from the provided COVID-19 dataset. The code utilizes D3.js v5 alongside the d3-x3d library and X3DOM to render the 3D multi-series bar chart, with data loaded from a CSV file and parsed into a format compatible with the d3.x3d.chart.barChartMultiSeries() API.

Jul 19, 2022

Fork of Let's make finland a map with D3.js!

This example renders a world map using D3.js and the TopoJSON library from the `world-atlas` dataset. It draws a sphere as a blue background and countries as light-green filled paths with subtle black strokes. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection, and it loads geographic data from a remote JSON file. It demonstrates how to project geographic coordinates and display vector-based map features in an SVG container.

Jul 18, 2022

Fork of Let's make a map with D3.js!

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Jul 18, 2022

ICE - 8 Maps (Country Map) France

This example shows a single-country map of France, rendered as a light green SVG path on a blue background. It uses the Mercator projection with a custom center and scale to zoom in on France. The code loads world country boundaries from the world-atlas TopoJSON dataset, filters for France using `feature`, and draws the result with `d3.geoPath` and `d3.geoMercator`.

Social Network Graph in d3.js

This example visualizes a small social network with five people and their connections as a force-directed graph rendered in SVG. It loads node and link data from a JSON file, drawing each person as a green circle and each relationship as a gray line. The layout is computed dynamically using d3.forceSimulation, which applies forces for pairwise repulsion (d3.forceManyBody), edge-based attraction (d3.forceLink), and centering (d3.forceCenter). As the simulation runs, a ticked callback updates the positions of the circles and lines, letting the network settle into a readable arrangement.

Fun Family tree in d3.js

This interactive family tree visualization in D3.js v3 displays hierarchical relationships among named individuals, with expandable and collapsible nodes. Clicking a node toggles its children, animating the tree’s layout with smooth transitions. The SVG-based chart uses `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved links. Built with React, it renders circular nodes with labels and color-coded states, animating position changes via `transition` over 750 milliseconds.

Fork of ICE - 8 Making Maps (Country Map) Finland

This example displays France as a single green country on a blue background, projected using the Mercator projection centered on coordinates [2, 47]. The visualization uses D3’s `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into SVG paths, sourcing country boundaries from the world-atlas TopoJSON dataset. The code filters the original GeoJSON for France’s name property and renders it with a light-green fill and black stroke.

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Fork of 3D Scatter Plot

This example displays a 3D scatter plot of the Iris dataset, projecting three months (January, February, March) onto the x, y, and z axes. It uses two overlaid marker traces to visualize the same data points with different styling—one with transparent markers and a light outline, the other with solid gray circles. The visualization is rendered using the Plotly.js library, which is loaded via a CDN, while data is fetched and parsed with the D3.js `d3.csv` function. The chart is drawn inside a div with ID `myDiv`, and the layout margins are set to zero to maximize the plotting area.

Jul 6, 2022

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Fork of Area Chart

This example displays an area chart of two ordered numeric variables over time, using a gradient-filled path to show the amount across dates. It loads data from a CSV via `d3.csv`, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The SVG is built with `d3.area` and `d3.axisBottom`/`d3.axisLeft`, while the React-based page styles the title via CSS. The chart renders in a fixed-size SVG with margins and labels for both axes.

Fork of ICE - 7 Pie Chart

This pie chart visualizes the top 10 countries with the highest deaths from air pollution in 2020. The chart displays each segment with a label showing the death count in thousands, alongside a colored legend listing each country and its corresponding value. The chart is built with D3 v5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, with data fetched from a CSV hosted on GitHub. The SVG rendering positions the pie at a fixed coordinate and places the legend to its right.

Fork of Line Chart

This example displays a line chart of two ordered numerical variables, plotting date against value. It uses D3.js v4 to load CSV data and render an SVG path with a steelblue stroke. The code explicitly configures time-scaled x-axis and linear y-axis, with axis labels for “Numbers” and “Amount.” The visualization is built within a React-style HTML page, embedding d3.csv for data loading and d3.timeParse for date formatting.