Sweetierams

@Sweetierams·29 public vizzes

Family Tree

This example presents a three-generation family tree as a static, animated diagram. Circular nodes, colored by generation (blue, red, brown), represent individuals, while black connecting lines show parent-child relationships. The visualization uses d3.stratify() to convert the flat parent-child data into a hierarchy and d3.tree() to compute node positions. Nodes and links animate into place via the `.transition().duration()` API, with all elements rendered as SVG.

Jul 10, 2022

Loading thumbnail…

tree test

A hierarchical tree diagram displays a professor as the root node with three children, each branching to two or three leaf nodes. Rendered using D3.js v3 and SVG, the visualization features green circles connected by violet diagonal links and includes animated transitions when nodes are clicked. The tree layout uses `d3.layout.tree` and `d3.svg.diagonal` projections, with click handling that collapses or expands child nodes while updating positions smoothly.

Jul 10, 2022

Loading thumbnail…

Map of Mexico

This visualization renders a choropleth-style map of Mexico using React and D3 v6, displaying the country’s twelve regions as olive-colored SVG paths from TopoJSON data. The map uses a `geoMercator` projection via `d3.geoPath`, with graticule lines overlaid in purple. Land regions respond to hover with a pink stroke, while missing data areas appear gray. The code loads geographic features from an external JSON URL using `d3.json` and `topojson.feature`, then passes them to the `Marks` component for rendering.

Jul 10, 2022

Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example renders a map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw both national land boundaries and state interiors. TopoJSON data from `us-atlas@3` is loaded with `d3.json` and converted via `feature` and `mesh` from the topojson library. The SVG output, styled with CSS, fills land in red, state borders in green, and includes a blue circle mark. React manages the component state and data loading through the `useState` and `useEffect` hooks.

Jul 10, 2022

Loading thumbnail…

Fork of Fork of ICE8 USA Map

Jul 10, 2022

Loading thumbnail…

World Map ICE 8

This example displays a world map using a natural Earth projection, rendering countries as green SVG paths with subtle black strokes against a blue spherical backdrop. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via the `json` method, then processes them with `topojson.feature`. The visualization applies `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate the SVG paths, with the sphere outline drawn separately before the country features are appended.

Jul 10, 2022

Loading thumbnail…

Fork of Family Tree

This visualization presents the inheritance of blood group types as a branching tree, showing parent groups (A, B, AB, O) splitting into positive and negative variants. The code uses d3.stratify and d3.tree to compute the hierarchy and layout, with SVG circles and text labels colored by generation depth. Animated transitions with d3.transition().duration draw the connecting paths from parent to child nodes, while the text and circles appear sequentially.

Jul 9, 2022

Loading thumbnail…

Fork of Family Tree

This example shows a tidy radial tree diagram of human blood group types. The visualization maps major blood groups (A, B, AB, O) to their positive and negative Rh factor variants, with each generation assigned a distinct fill color. Built with D3 v6, the code uses `d3.stratify()` to convert the parent-child data into a hierarchy and `d3.tree()` for layout. SVG circles, text labels, and path links are animated into place using D3's `.transition()` API.

Jul 9, 2022

Loading thumbnail…

heist Network graph

This network graph visualizes character relationships from the show *Money Heist*, with nodes representing named characters and links indicating connections. The visualization uses a force-directed layout, powered by the custom `d3.layout.force()` API, to position nodes, while SVG circles and text labels render the graph elements. The graph's data is loaded from a local JSON file, and edge weights are encoded through link stroke widths. Node dragging is enabled via the `force.drag` interaction. The styling applies green strokes for links and red text for labels, creating a clear, interactive character map.

Jul 9, 2022

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes Walmart sales data by plotting weekly sales, year, and temperature as x, y, and z coordinates. It uses Plotly’s `scatter3d` trace with semi-transparent markers to show relationships between the variables. The data is loaded via `d3.csv` from a GitHub raw URL, and the layout removes all chart margins. The example demonstrates combining D3’s CSV parsing with Plotly’s 3D rendering capabilities in a React-compatible setting, displaying the plot in a dedicated div element.

Jul 7, 2022

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example presents a 3D vertical bar chart displaying minimum and maximum temperature data for seven station names, shown as paired, stacked columns. The visualization uses Highcharts with the highcharts-3d module, enabling an isometric perspective through configurable alpha, beta, and depth settings. Each category on the x-axis represents a station, while the y-axis tracks station-names and the z-axis indicates temperature values. Data is loaded as arrays with explicit category indices, and series are defined for MIN_TEMP and MAX_TEMP with stacking and groupZPadding to separate the two temperature groups visually.

Jul 7, 2022

Loading thumbnail…

Fork of Fork of Bonus ICE - 3D Bar chart

This 3D bar chart visualizes total downloads for five applications from various sources, using stacked, non-grouped columns to compare values across categories like GROUSE, HERMIT, longitude, and latitude. The chart, built with Highcharts and its highcharts-3d module, applies a three-dimensional perspective through enabled options3d settings with alpha, beta, and depth parameters. Each series represents a different application, with data plotted against categorical x-axis labels and a y-axis for download counts. The chart’s title and source labels reflect the data’s origin, while the z-axis is titled “Various Sources.”

Jul 7, 2022

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart of download numbers for five applications across five categorical sources, with data series plotted along a depth axis to create a three-dimensional column layout. The chart uses the Highcharts library with the highcharts-3d module, enabling rotation through the `options3d` configuration. The `plotOptions` define stacking and grouping for the columns, while the x-axis lists categories like latitude and longitude, and the z-axis is labeled "Various Sources." Each series is paired with its data points, and the chart is rendered inside a container using jQuery to initialize the Highcharts instance.

Jul 7, 2022

Loading thumbnail…

Pie Chart (with labels) with d3

This example shows a pie chart comparing weather conditions across ten Walmart locations, with slices labeled by festival names and their corresponding values. Built with React and rendered as SVG, the chart uses d3.pie() and d3.arc() to generate the slices, while d3.scaleOrdinal with d3.schemeCategory10 assigns colors. Interactive hover effects adjust slice opacity and display a tooltip containing the location name and value, positioned via d3.mouse(). Data is loaded from an external CSV file using d3.csv.

Jul 3, 2022

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This example visualizes the top 10 US states by GDP as a donut chart with interactive tooltips. The visualization uses d3.arc and d3.pie to generate SVG paths, while d3.scaleOrdinal assigns categorical colors. Hovering over a segment highlights it and displays a tooltip showing the state name and value. Data is loaded from a CSV file using d3.csv, with the top ten rows selected for display in a React component using hooks.

Jul 3, 2022

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This example visualizes the top 10 US states by GDP as a static pie chart, with each slice labeled and interactivity via hover tooltips that display the state name and value. The chart is built using React with D3 v4, rendering SVG paths via the `d3.arc` and `d3.pie` APIs. Data is loaded from a CSV file using `d3.csv`, and colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory10`. The tooltip is a dynamically appended SVG group that follows mouse movement using `d3.mouse`.

Jul 3, 2022

Loading thumbnail…

Area chart

This area chart visualizes temperature changes at Walmart from 2001 to 2021 using a smooth basis curve. The chart employs D3 v5’s `area` and `line` generators with `curveBasis` to create the shaded region and outline, while `scaleTime` and `scaleLinear` map the temporal and temperature axes. Data is loaded from a CSV via D3’s `csv` function, and the SVG rendering includes styled axes with tick marks and labels, with the area filled in blue and the line stroked in black.

Jul 3, 2022

Loading thumbnail…

Fork of Line Chart

This example displays a red line chart of Walmart temperatures from 2001 to 2021, with year on the x-axis and temperature on the y-axis. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the respective axes, and d3.axisLeft and d3.axisBottom to render tick marks. The line is generated with d3.line, while d3.extent and d3.max compute the domain. The SVG is rendered in React, with styled axis labels and a title, using D3 v5.

Jul 3, 2022

Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes the temperature of a Walmart dataset over time from 2009 to 2019, combining a smooth line chart with a filled area beneath it to emphasize the trend. The visualization uses D3 v5 to parse CSV data, apply time and linear scales, and render SVG paths via `d3.line` and `d3.area` with `curveBasis` for smoothing. Axis ticks, labels, and gridlines are generated with `d3.axisBottom` and `d3.axisLeft`.

Jul 3, 2022

Loading thumbnail…

Fork of Line Chart

This example displays temperature data from Walmart stores between 2001 and 2021 as a line chart. It uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for the x and y axes, and d3.line to generate the path. The chart includes labeled axes and a title, with grid lines created using axis tick sizes and SVG rendering via the d3.select method.

Jul 3, 2022

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This pie chart displays the top 10 US states by GDP, with each slice representing a state’s economic output. The visualization uses d3.arc to generate the pie geometry and d3.pie to compute the arc angles, while a hover tooltip with a bounding box reveals state names and values. It is built with React, loading data via d3.csv from a remote CSV file, and rendered as SVG. The legend and slice colors use d3.scaleOrdinal with d3.schemeCategory10.

Jul 2, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot renders the Iris dataset with animated transitions that alternate the x-axis between the `season` and `winner` columns every two seconds. Built using D3 v6.7.0, the visualization applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, while the chart’s dimensions adapt to the window size. The example demonstrates a reusable chart component, updating axes and marks in place via D3’s join operation.

Jul 2, 2022

Loading thumbnail…

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width as x/y coordinates while encoding sepal length and width in each point’s `rx` and `ry` attributes, with species indicated by color (violet, pink, or a square symbol). The D3 v6 code loads data via `d3.csv`, scales it with `d3.scaleLinear`, and renders SVG circles using `d3.symbol` for the setosa class. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with custom text labels for petal length and sepal length.

Jun 29, 2022

Loading thumbnail…

Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal dimensions along the axes while encoding sepal measurements through elliptical point shapes. D3’s `csv` loader parses the external plant data, with `scaleLinear` mapping values and `axisLeft`/`axisBottom` rendering labeled ticks. Circles, colored by species via a switch statement, use `rx` and `ry` attributes to reflect sepal length and width, offering a six-dimensional view of flower characteristics. The responsive SVG fills the viewport, with rotated text labels for clarity.

Jun 29, 2022

Loading thumbnail…

Fork of ICE - 6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, virginica, and versicolor). Each circle’s `rx` and `ry` attributes are set to the sepal measurements, though the rendering remains circular. The code uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render axes with `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window with an SVG, and axis labels highlight petal length and sepal length.

Jun 29, 2022

Loading thumbnail…

ICE-6

This visualization shows the maximum temperature for the first 11 weather stations from a CSV dataset, displayed as horizontal bars ranked by station name. Using React for component structure and D3 v5 for scales and data loading, the bar chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders grid lines and labels via SVG. The bars are colored steelblue, with tick marks and station names annotated directly in the SVG.

Jun 26, 2022

Loading thumbnail…

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

This dashboard plots country-level data as a scatterplot, using x/y positions to represent two quantitative variables and point color to encode a third. Built with React and D3 v5, the visualization constructs SVG circles from a dataset of countries and marks them with a linear color scale. The code explicitly uses `d3.scaleLinear` to map data values to positions and colors, and `d3.extent` to compute the domain from the underlying CSV data. The page title and data values are rendered directly from the dataset, showing the integration of React’s declarative UI with D3’s quantitative mapping functions.

Jun 26, 2022

Loading thumbnail…

ICE-5

This example displays a large red and yellow message about cricket data alongside a static SVG house image. Using d3.csv, it fetches a remote CSV file, calculates its size in kilobytes with d3.csvFormat, and counts its rows and columns. The resulting summary appears as plain text in a pre element, styled by CSS. The visualization emphasizes the data-loading process over any graphical mapping, serving as a minimal demonstration of D3 version 7 in a React-hosted HTML page.

Jun 22, 2022

Loading thumbnail…

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example presents a welcome page for the ICE-5 data visualization, displaying metadata about a dataset of the top 100 actors. The page shows a summary message with the file size in kilobytes, row count, and column count, alongside a static SVG image. It uses D3.js v7, specifically the `d3.csv` method to fetch and parse a CSV file from a GitHub gist, and then leverages `d3.csvFormat` to calculate the data size. The layout is styled with simple HTML and CSS, including a large title and a cyan message container.

Jun 22, 2022