Daniel Mata

@daniel-m777·10 public vizzes

ICE 8 - Family Tree

This example shows a family tree using a hierarchical node-link diagram, with each person represented as a colored circle and connected by curved paths. The node color encodes generation depth: red for the root, blue for children, and green for grandchildren. The visualization uses d3.stratify() and d3.tree() to compute the layout from a flat array of parent-child pairs, then renders the result as SVG with cubic Bézier links and text labels next to each node.

Apr 3, 2022

Loading thumbnail…

ICE 8 - Social Network

This interactive force-directed network diagram visualizes the relationships within a social network dataset loaded from a GitHub gist. Red circles represent individual nodes, with dashed gray lines indicating links between them, and each node is labeled with its corresponding name. The layout is computed dynamically using D3.js (v6) APIs, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to attract nodes toward the center. The SVG rendering updates node, link, and label positions at each simulation step.

Apr 3, 2022

Loading thumbnail…

ICE 8 - World Map

This example displays a world map rendered as a green SVG using a Mercator projection. It loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with topojson.feature. The code uses d3.geoPath and d3.geoMercator to define the projection, and appends a path for each country to an SVG element with a light blue background. The map is built with D3 v4 within a React-compatible HTML page.

Apr 3, 2022

Loading thumbnail…

ICE 8 - Country Map

This example displays a choropleth map of the United States, rendering each state as a green SVG path against a light blue background to represent the ocean. The map is generated using React and D3 v4, employing `d3.geoPath` with a `d3.geoAlbersUsa` projection to position states accurately, including Alaska. State boundaries are drawn from TopoJSON data loaded from the us-atlas package via `topojson.feature`. The SVG is styled with a stroke for borders and a consistent fill color for all states.

Apr 3, 2022

Loading thumbnail…

ICE 7 - Line Chart

This line chart visualizes the total daily streams of the song “Shape of You” on Spotify throughout 2017, with the y-axis scaled in millions for readability. The red polyline shows the trend over time, supported by a time-based x-axis and numeric y-axis with gridlines. Built with D3 v7 in a React context, the code loads a CSV dataset, parses dates using `d3.timeParse`, and renders axes and the line via SVG paths. Gridlines are generated using `d3.axisBottom` and `d3.axisLeft` with custom tick formatting.

Apr 1, 2022

Loading thumbnail…

ICE 7 - Pie Chart

A pie chart visualizes the distribution of instruments sold, breaking down totals for Guitar, Bass, Drums, and Keyboard from a CSV dataset. The chart renders as an SVG using D3 v7’s `d3.pie` and `d3.arc` generators, with a color scale from `d3.schemeSet2`. A legend lists each instrument with its count, and the chart is accompanied by a title. Data is grouped and counted using `d3.group` and `d3.count`, with the visualization displayed in a React-compatible HTML page.

Mar 27, 2022

Loading thumbnail…

ICE 7 - Area Chart

This area chart visualizes the daily total streams of the song “Shape of You” from Spotify in 2017, using data loaded from a CSV file. The chart displays the stream counts in millions over time, with a filled area beneath the curve in MediumSlateBlue, purple stroke, and gridlines on both axes. The code uses D3 v7 APIs including `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to render the SVG visualization.

Mar 26, 2022

Loading thumbnail…

ICE 7

This animated scatter plot cycles through four pairings of Iris dataset measurements every second, revealing clusters of the three iris species. Built with D3 v6, the visualization uses a custom reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, while species are color-coded green, blue, and red. Animated via `setInterval`, the SVG updates the x-axis mapping across petal width, sepal width, petal length, and sepal length, with the initial view plotting petal width against sepal length.

Mar 26, 2022

Loading thumbnail…

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

This bar chart displays COVID-19 death counts for the first 20 states from a CSV dataset, rendered as SVG rectangles using React and D3. The code uses `d3.csv` to load data, `scaleBand` for the y-axis state categories, and `scaleLinear` for the death-count x-axis. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, with tick marks and labels generated via the scales’ `.ticks()` and `.domain()` methods.

Mar 4, 2022

Loading thumbnail…

ICE-5

This example presents a bar chart summarizing a dataset of musical instruments, highlighting the most common color for guitars, basses, drums, and keyboards. A text panel displays these summary statistics, including dataset size in kilobytes, row count, and column count. The visualization uses D3 v7 to load CSV data via `d3.csv`, group it with `d3.group`, and render an SVG bar chart with band and linear scales for axes. Popular colors are computed using `d3.mode` and displayed alongside the chart.

Feb 27, 2022