aruba-haroon

@aruba-haroon·12 public vizzes

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization uses the ILINet Flu Surveillance Dataset to explore influenza activity across U.S. states. It presents a multi-panel view showing geographic patterns on a U.S. map, temporal trends in line charts, and state-level comparisons in bar charts. The visualization is built with React and D3.js, using d3.geoPath for the map, d3.scaleBand and d3.scaleLinear for bar and line charts, and d3.scaleOrdinal for color encoding. Interactive dropdown menus allow selection of various data attributes, with highlight and fade effects on hover and click.

May 14, 2020

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data from the CDC, showing state-level metrics like ILI percentage and patient totals across weeks and years. It combines four coordinated views: a multi-year line chart with color-coded trends, a scatter plot using size for patient volume, a choropleth map of the U.S., and a bar chart of top states. Built with React and D3 v5, it uses d3.scaleOrdinal for color, d3.geoPath for map rendering, and dropdown menus to switch data attributes. The data loads via d3.csv from a GitHub-hosted dataset.

May 14, 2020

Loading thumbnail…

Stack Chart Template

This stacked bar chart compares sales across consumer, corporate, and home office segments for multiple sub-categories. It uses D3.js (v3) with an SVG renderer and animated transitions to toggle between absolute counts and percentage-share views via a form input. Data is loaded from a CSV file and sorted by category, with segments color-coded using a categorical scale. The chart includes a legend and tooltip, and the axes update dynamically during transitions.

May 1, 2020

Loading thumbnail…

Testing Stacked bar

This stacked bar chart visualizes sales values across product categories (accessories, art) segmented by consumer, corporate, and homeoffice sales. A legend highlights specific segments, and hovering over legend items or bars displays a tooltip with exact values via d3-tip. Rendered as SVG with D3’s stack layout, the chart uses ordinal and linear scales for axes, with an animated foreground overlay that dims non-hovered segments. The data comes from an embedded CSV, and the code relies on d3.legend for interactive color filtering.

Apr 28, 2020

Loading thumbnail…

Untitled

This example renders a force-directed graph using React and D3, visualizing a network of nodes and links loaded from a local CSV file. The simulation uses `d3.forceSimulation` with collision and link forces to position elements, while React manages the SVG rendering of circles and lines. Node positions update dynamically through the simulation’s tick event, and drag behavior is implemented with `d3.drag` for interactive exploration. The visualization demonstrates a minimal integration of D3’s physics engine with React’s component lifecycle.

Apr 27, 2020

Loading thumbnail…

Smiling Face

A smiling face is rendered as a simple SVG composition, featuring an orange circle for the head, two black eyes, and a curved mouth. The code uses D3 v5’s selection and arc methods, with `d3.arc()` generating the mouth path from specified inner and outer radii and angles. Eye positions are calculated relative to the SVG’s center using fixed pixel offsets, and all elements are placed within a 960x500 viewport. The visualization demonstrates basic D3 shape generation and coordinate placement without interactive features.

Mar 25, 2020

Loading thumbnail…

Learn pie chart with D3.js

This pie chart visualizes worldwide operating system market share for Android, Windows, and iOS, using percentage values from the displayed data array. The D3.js v4 code creates an SVG-based pie chart by applying `d3.pie` to the data, drawing arcs with `d3.arc`, and coloring each slice via `d3.scaleOrdinal` with the `schemeCategory10` palette. Labels for each platform and its percentage are placed at arc centroids. The chart is rendered within a 500×300 SVG canvas, with the data sourced from the provided JavaScript object.

Mar 25, 2020

Loading thumbnail…

Learn Simple bar chart D3

This example uses D3.js v4 to render a simple bar chart of nine arbitrary numeric values. The chart displays each value as a vertical rectangle, with heights proportional to the data, rendered as SVG elements via `d3.selectAll("rect").data().enter().append()`. Bars are positioned using the `transform` attribute and translated horizontally based on their index. The chart is styled with a teal background from the accompanying CSS file. The dataset is hardcoded in JavaScript rather than loaded from an external source.

Mar 24, 2020

Loading thumbnail…

Learn D3.js

This interactive line chart visualizes Bitcoin’s historical price index from December 2017 to April 2018, using data fetched live from the CoinDesk API. The code parses the JSON response into date–value pairs, then renders an SVG path with D3’s `d3.line()` and `d3.scaleTime()`, alongside `d3.axisBottom()` and `d3.axisLeft()` for axes. The y-axis is labeled “Price ($)” and the single steelblue line is drawn without fill, with rounded line joins and caps. Data is loaded via `fetch` after the DOM content is ready.

Mar 24, 2020

Loading thumbnail…

Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It leverages D3 v5's scaleBand for the categorical y-axis and scaleLinear for the population x-axis, with axisLeft and axisBottom generating the axes. The SVG rendering uses formatted tick labels that convert billions to 'B'. The horizontal bars are colored teal, and the chart includes axis labels for 'Population' and a title 'Populated Countries'.

Mar 24, 2020

Loading thumbnail…

Lets make a face with D3

This example draws a stylized face in SVG using D3 v5, compositing a yellow circle for the head, two eyes, animated eyebrows, and a mouth path. The eyebrows are rectangles that toggle between two vertical positions over two seconds using D3's `transition` API, creating a subtle blinking or winking effect. The mouth is created with `d3.arc` to generate a crescent-shaped path. All geometry is positioned relative to the center of a 960×500 canvas, with coordinates computed from width and height attributes. The rendering relies on SVG elements and animation via chained transitions.

Mar 24, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a D3.js smiley face with animated eyebrows, built using SVG primitives like circles, rectangles, and an arc-based mouth. The face is centered via a translated group, and the eyebrows transition vertically in a repeating 2000-millisecond cycle using `transition.attr` on the group. The code leverages D3 v5’s `select`, `arc`, and chained transitions to manipulate DOM elements directly, with a static orange face and dark eyes defined by hardcoded coordinates.

Mar 24, 2020