bmurill2019

@bmurill2019·24 public vizzes

Tree ICE-8 BM

This interactive family tree visualizes three generations of a family, with each node representing a person colored by gender (blue for male, magenta for female). Built with D3.js version 3.5.17, the SVG diagram uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to render hierarchical links, while animated transitions expand and collapse branches on click. The embedded JSON data defines parent-child relationships, and node colors update dynamically based on the gender attribute during the 750-millisecond transitions.

Apr 13, 2023

Loading thumbnail…

Social_Network_graph_ICE-8 BM

A social network graph visualizes connections between nine named individuals, with node size and link thickness encoding relationship weight. Using D3.js v4, the visualization employs a force-directed layout to position nodes, applying gravity, charge, and distance parameters to simulate attraction and repulsion between connected entities. The graph renders as an SVG, loading node and edge data from a JSON file, with black circles for nodes, green stroke outlines, and brown labels. Dragging nodes is supported, while the force simulation updates link coordinates and node transforms on each tick.

Apr 13, 2023

Loading thumbnail…

Colombia Map ICE8

This example displays a choropleth map of Colombia, with each department rendered as a green SVG path with black borders. The visualization uses a geoMercator projection to center and scale the country within a 600 by 500 pixel canvas. The code loads GeoJSON data from a remote GitHub gist using `d3.json`, then applies `d3.geoPath` with the projection to generate the map shapes. The implementation combines React 16.9 for the layout and D3 v5 for geographic rendering within an SVG container.

Apr 13, 2023

Loading thumbnail…

World_Map_ICE_8__BM

This example renders a world map using an azimuthal equal-area projection, coloring landmasses in purple and overlaying blue graticule lines with red interior boundaries. The visualization uses React to manage state and render SVG elements, while D3 utilities like `geoAzimuthalEqualArea`, `geoPath`, and `geoGraticule` handle projection and path generation. Geographic data is loaded from the world-atlas TopoJSON file via `d3.json` and `topojson.feature`, with the sphere outline drawn from D3’s `geoPath`. The map displays a static global view with no interactive elements.

Apr 13, 2023

Loading thumbnail…

TechLaidoffs

This visualization shows global layoffs over time, plotting each incident’s laid-off count against its timestamp to reveal trends in workforce reductions worldwide. The chart uses a D3 v5 line generator with a basis curve, mapping time to the x-axis and layoff counts to a linear y-axis with abbreviated tick formatting. Data is loaded from a CSV file via `d3.csv`, parsed into dates and numbers, and rendered as an SVG with maroon stroked paths and labeled axes. The y-axis labels are formatted using `d3.format`, and the line path is smoothed using `d3.curveBasis`. The visualization includes a title and axis labels, with scales created via `d3.scaleTime` and `d3.scaleLinear`.

Apr 9, 2023

Loading thumbnail…

Fork of TechLaid-offs cummulative

This line chart displays the cumulative number of tech layoffs over time, with the x-axis representing timestamps and the y-axis showing the cumulative count formatted in billions. The data is loaded from a CSV file and parsed using d3.csv, with dates converted to JavaScript Date objects. The visualization is rendered as an SVG using d3.scaleTime, d3.scaleLinear, axis generators, and a d3.line generator with a curveBasis interpolation. Axis labels and a title are added as SVG text elements, styled through the accompanying CSS file.

Apr 9, 2023

Loading thumbnail…

PiebusinessFormationUS

This visualization shows the average prevailing wage for the top 10 areas in a dataset, displayed as a pie chart. The pie chart uses D3's `pie` layout and `arc` for rendering, with color mapping via `scaleOrdinal` and `schemeCategory10`. The code loads CSV data from a gist URL using `csv`, sorts it, and renders the first 10 entries. An interactive `mouseover` event logs the average wage to the console. The SVG rendering is structured with indexed-based positioning, and legends display each area's name and average wage using formatted labels.

Apr 8, 2023

Loading thumbnail…

formationBusinessesTX

This chart displays the cumulative quantity of business formations in Texas over time, plotted as a smooth line. The visualization is built with D3.js v5 and renders to an SVG canvas. It uses `scaleTime` and `scaleLinear` for the axes, with a `curveBasis` line generator to create the smoothed trend. The data, sourced from a CSV file, includes a two-value Y-axis label and tick formatting that abbreviates large numbers. The chart updates only after loading and parsing the external dataset.

Apr 8, 2023

Loading thumbnail…

formationBusinessesNY

This line chart tracks the cumulative quantity of business formations in New York over time, with time on the x-axis and quantity on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.curveBasis to draw the smooth maroon trend line. Data comes from a CSV file loaded via d3.csv, with the title and axis labels rendered as SVG text elements.

Apr 8, 2023

Loading thumbnail…

formationBusinessesCA

This line chart displays the cumulative quantity of business formations in California over time, with time on the x-axis and quantity on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line with curveBasis for the smooth line path. The SVG renders a maroon line against a light background with labeled axes. Data comes from a CSV file loaded via d3.csv, covering business formation records by date.

Apr 8, 2023

Loading thumbnail…

formationBusinessesUSInformation

This line chart shows the cumulative number of business formations in the U.S. over time, with a title, axis labels, and a maroon curved line. It uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` generator, rendering to SVG. The y-axis formats quantities with `format('.2s')`, and the data is loaded from a GitHub gist source.

Apr 8, 2023

Loading thumbnail…

formationBusinessesUS

This line chart tracks the cumulative quantity of business formations in the United States over time, with the x-axis representing time and the y-axis representing quantity. The visualization uses D3 v5’s scaleTime, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render a smooth maroon path on an SVG canvas. Data is loaded from a CSV file hosted on GitHub, and the chart includes rotated axis labels and a title, with tick marks and grid lines styled via CSS.

Apr 8, 2023

Loading thumbnail…

formationBusinessesFL

This line chart shows business formation in Florida over time, with the x-axis labeled “Time” and the y-axis labeled “Quantity.” It renders a smooth curve using d3.line with curveBasis, scaling time via scaleTime and linear values via scaleLinear. Axes are drawn with axisBottom and axisLeft, and the data comes from a CSV file loaded with d3.csv. The SVG output includes maroon strokes for the line and formatted tick labels using d3.format.

Apr 8, 2023

Loading thumbnail…

ICE 5 BM

A word-search game displays a hidden puzzle grid, with the user inputting letters to match an image-based clue. The example renders an SVG heatmap of solved letter positions, where correct matches are highlighted by a black background and white text. The code uses d3.v5 for DOM manipulation and CSV loading, while SVG elements handle the visual representation of the grid and its styling.

Mar 30, 2023

Loading thumbnail…

Despacito_area_chart

This area chart displays the daily view counts of the “Despacito” music video across 2017, using a time-based x-axis and a linear y-axis for total views. The visualization is rendered as an SVG with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis` for a smooth filled path. Data is loaded via `csv` from a GitHub gist, and the chart includes labeled axes and a title, with styling applied through CSS classes.

Mar 30, 2023

Loading thumbnail…

Despacito_time_chart

This line chart shows the daily increase in YouTube views for the song “Despacito” over a week in 2017, with dates on the x-axis and view increments on the y-axis. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for both axes, `line` with `curveBasis` for the smoothed path, and `axisLeft`/`axisBottom` for ticks. Data is loaded via `csv` from a GitHub gist, and the chart includes gridlines, axis labels, and a title. The data originates from the Data Canvas - Sense Your City project.

Mar 30, 2023

Loading thumbnail…

pie_chart_prevailing_wage_Dataset

This pie chart visualizes the average prevailing wage across the top 10 geographical areas from a CSV dataset, with each slice colored and paired with a legend listing the area name and wage value. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the SVG segments, while mouseover events log the average wage to the console. The code also sorts the data and renders the first ten entries, with legend labels and values formatted as text.

Mar 30, 2023

Loading thumbnail…

Reusable_D3_Scatter_Plot_ICE7_BM.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. The plot uses D3.js scaleLinear, axisLeft, and axisBottom to render axes, while SVG circles represent data points colored by species (Setosa, Versicolor, Virginica). Written as a React-compatible reusable module, the code loads CSV data via d3.csv, applies a color legend, and dynamically updates axes with setInterval.

Mar 29, 2023

Loading thumbnail…

d3 tutorial

A tutorial demonstrates basic D3.js selection and DOM manipulation using a static HTML page with car listings and paragraphs. The code uses `d3.select` and `d3.selectAll` to change text colors—turning headings blue, list items magenta, and paragraphs green—and to style nested table cells with cyan backgrounds. Data binding via `.data()` maps an array of numbers to blank `h2` elements, while class-based selectors color warning and error messages. All styling is applied through D3's `.style()` and `.text()` methods on the live DOM.

Mar 24, 2023

Loading thumbnail…

ICE_6_BM

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes, with each species (Setosa, Versicolor, Virginica) represented by a distinct color (black, magenta, beige). The chart also encodes sepal length and width as the horizontal and vertical radii of elliptical markers, creating a multivariate display. Built with React, it loads CSV data via `d3.csv` and uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG and axes.

Mar 23, 2023

Loading thumbnail…

ICE-6_BM

This example shows the average hourly wages for 25 geographic areas as a horizontal bar chart, with bars colored the default SVG black and red gridlines marking the linear x-axis scale. Built with React and D3 v5, it loads a CSV of prevailing wage data via `d3.csv`, slices the dataset to the first 25 rows, and renders SVG rectangles positioned by `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The React component uses hooks (`useState`, `useEffect`) to asynchronously fetch and parse the data, then manually renders axis ticks and gridlines with D3 selectors and SVG elements.

Mar 23, 2023

Loading thumbnail…

Fork of React Starter bm

This example displays a large, centered “Hello React!” message in a full-page browser view. It demonstrates a minimal React application by rendering a single component into the document’s root element. The code imports React and ReactDOM, defines a functional `App` component that returns a styled `<div>`, and calls `ReactDOM.render` to mount it. The styling is applied through a CSS class defined in the accompanying HTML file, and the bundle is loaded via a separate `bundle.js` script.

Mar 22, 2023

Loading thumbnail…

fork Data vis -overlapping Buddha

A dense cluster of semi-transparent, randomly colored triangles overlaps a large Buddha silhouette rendered as an SVG path, creating a layered, abstract composition against a black background. The triangles are generated procedurally through nested React map calls, with positions and fill colors determined by `Math.random()`, while the Buddha path is drawn using SVG polygon and path elements. The visualization relies on React for component structure and SVG for rendering, with no external data source, instead exploring generative randomness and geometric overlap.

Mar 2, 2023

Loading thumbnail…

Fork of funn face for Data Visualization

This example renders a stylized, cartoon-like face constructed entirely from SVG primitives. The face is composed of a magenta background circle with a green stroke, two elliptical eyes, a mouth drawn using D3's `arc` generator, and teeth built from hard-coded lines. The React application manages the rendering, using D3 to define the mouth's geometric path, while the SVG output applies a linear gradient for visual interest. All dimensions and colors are passed as parameters to the component, making the face easily adjustable, though the code appears to be a static, incomplete experiment.

Mar 2, 2023