MariamArabi

@MariamArabi·12 public vizzes

Treemap2

A hierarchical treemap displays plant nutrient data, using colored rectangles to represent crop categories and individual species. Clicking a cell zooms into that branch, while the orange top label navigates back. The visualization uses the d3.v3 treemap layout with a custom recursive layout and accumulation function for zooming. Data is loaded from a CSV file via d3.csv, and transitions animate the zooming interaction.

Mar 7, 2018

Loading thumbnail…

Zoomable treemap template

This zoomable treemap template visualizes hierarchical agricultural data, organizing crops by category such as Plants, Vegetable, and Forage, with leaf size reflecting the numeric value for each plant. Users can click any cell to drill down into a sub-hierarchy, with animated transitions and a breadcrumb-style grandparent bar enabling navigation back up. Built with D3 v3, it uses the `d3.layout.treemap` for layout, `d3.scale.category20c` for color, and linear scales for positioning, rendering with SVG and CSS transitions. The data comes from a JSON file containing crop names, scientific names, and measured attributes.

Mar 4, 2018

Loading thumbnail…

GeoMap TP4

This map of France shows the cumulative total of flu cases for each region over the year 2014, with each region colored using a categorical color scale. The visualization is built with D3.js, loading geographic boundaries from a GeoJSON file and merging them with CSV data of weekly counts per region. The map uses the `d3.geoConicConformal` projection and renders the paths via `d3.geoPath`. Hovering over a region displays a tooltip showing its name and the summed value.

Feb 7, 2018

Loading thumbnail…

fresh block2

A minimal D3.js v4 example renders a static SVG canvas containing a single monospace text label, “Edit the code below to change me!”, positioned near the top of a 960×500 viewport. The code uses `d3.select` to append an `svg` element and a `text` child, setting explicit width, height, x, y, and font-size attributes. No data source or interaction is involved; the visualization simply demonstrates basic SVG creation with D3’s selection and attribute methods.

Feb 6, 2018

Loading thumbnail…

D3 Example

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using nested selections in D3. Each company is positioned along a horizontal ordinal axis, with its price history drawn as a pie chart where each slice represents one month and its radius is scaled by the closing price. The slices are colored by date using a categorical color scale, with a legend generated by the d3-legend library. The code uses d3.csv, d3.nest, d3.layout.pie, and d3.svg.arc to structure and render the data as SVG.

Feb 2, 2018

Loading thumbnail…

Grouped to stacked bar chart (random function)

The chart shows five series of ten random values that transition between grouped and stacked bar layouts. Users toggle the view using radio buttons, and the animation triggers automatically after two seconds. D3 v4’s `d3.stack` computes cumulative values for the stacked state, while `d3.scaleBand` and `d3.scaleLinear` position bars. The `transition` API animates bar positions, heights, and widths smoothly. Random, smoothly-varying data is generated by a custom `bumps` function, and the chart renders as SVG with an ordinal color scale.

Feb 2, 2018

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 onward, with each company represented as a distinct color layer. The chart uses D3.js’s `d3.nest`, `d3.layout.stack`, and ordinal and linear scales to structure and render the data. A color legend, built with `d3.legend`, identifies each series. The SVG visualization reads from a CSV file and updates its axes and bars based on the loaded dataset.

Feb 1, 2018

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization uses D3.js version 3.5.5 to create SVG elements, with a d3.layout.stack for layering data, d3.scale.ordinal for the x-axis, and d3.legend.color for the categorical color legend. Bars are grouped by date, colored by symbol, and rendered from the CSV data file.

Feb 1, 2018

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each layer colored by company. The visualization uses D3.js version 3.5.5 to load CSV data, nest and stack the series, and render SVG axes and rectangles. A d3-legend color scale identifies the three companies, while ordinal and linear scales map months and prices to the chart’s dimensions.

Feb 1, 2018

Loading thumbnail…

D3 Example

A grouped bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with months on the x-axis and price on the y-axis. Bars are color-coded by company using a categorical color scale, with a color legend for identification. The chart loads data from `stocks.csv` and renders with SVG, using D3.js version 3.5.5 for scales, axes, nesting, and stacking, alongside the d3-legend library to generate the color legend.

Feb 1, 2018

Loading thumbnail…

Transitions

This visualization shows a stacked bar chart of monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each layer representing a different date range. The chart uses D3.js to load data from a CSV file, nest it by date, and apply the d3.layout.stack function to create the stacked layout. The code renders the chart as SVG, using d3.svg.axis for the x and y axes, d3.scale.ordinal and d3.scale.linear for scaling, and d3.legend.color to display a color legend for the date layers.

Feb 1, 2018

Loading thumbnail…

ScatterPlot + Regression Line applied on iris

This D3.js v4 visualization applies a linear regression model to the classic Iris dataset, plotting petal length against petal width. It uses distinct SVG symbols (triangle, wye, and star) to represent the three iris species, with color encoding from `d3.scaleOrdinal` and `d3.schemeCategory20`. The regression line is computed manually and drawn using `d3.line`, and the equation is displayed in the HTML. Interactive tooltips show data values on hover. The chart includes labeled axes and a legend.

Jan 26, 2018