Skip to main content
Log in
E

EranM6

@EranM6·12 public vizzes

Loading thumbnail…

fresh block

This example loads a CSV file of US mass shooting statistics using `d3.csv` and groups the data by year with a JavaScript `reduce` operation, printing the resulting structure to the console. It demonstrates a purely data-processing workflow, with no visual rendering. The code relies on D3 v4 for CSV parsing and uses standard array methods to reshape the tabular input into a year-keyed object.

Aug 13, 2019
Loading thumbnail…

fresh block

This visualization presents a placeholder bar-chart-like display of Israeli election results, listing party names alongside their seat counts, sorted in descending order. The code prepares the data by extracting party names and values from a gist-sourced array, then sorts the items by value. Although the initial rendering merely draws static SVG text using d3.v4, the structure suggests an intended interactive bar chart. The dataset includes twelve parties, from כחול-לבן with 36 seats down to מרצ and ישראל ביתנו with 4 each, but no actual bars or axes are implemented in the visible code.

Mar 6, 2019
Loading thumbnail…

Multi area chart

This multi-area chart displays two distinct time-series metrics—stock values and their price-to-earnings ratios—across a decade of yearly intervals. The visualization uses a dual-axis layout with an orange-filled area for value data and a purple-filled area for peRatio data, each overlaid with corresponding line strokes. Built with D3 v4, the chart leverages `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.line` APIs to render SVG paths. Alternating shaded vertical bands, generated from x-axis tick positions, help delineate time periods, while axis ticks are manually styled and gridlines added via polygon outlines.

Nov 10, 2018
Loading thumbnail…

midTerms

This visualization, titled "midTerms," presents a playful U.S. election map where each state is represented by a colored dot. The author, EranM6, uses D3 v4 with SVG and animation to show fictional candidates and their positions. The rendering uses state abbreviations as labels, and the data defines states and candidates with positions, though the exact visual encoding (e.g., color, size, or animation) is not explicitly detailed in the code snippets provided. The piece appears to explore election-related data in a creative, non-standard layout, with candidate information including names, states, and position values that could map to a dot plot or similar chart with transitions.

Oct 25, 2018
Loading thumbnail…

fresh block

A radial layout displays the 50 U.S. states as labeled circles, with candidate circles repositioning via a D3 force simulation. The code uses `d3.forceSimulation` with `forceX` and `forceY`, plus custom gravity and quadtree-based collision functions, to push candidate nodes from their initial center position. State nodes are fixed in a circle based on index, each showing its two-letter symbol. The SVG renders all elements, with candidate circles colliding against each other but not against state circles.

Oct 22, 2018
Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

Sep 1, 2018
Loading thumbnail…

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

Aug 31, 2018
Loading thumbnail…

connect the dots

The visualization connects a series of data points—each representing a timestamp, price, and percentage change—with animated SVG paths to form a line chart. Using D3 v4, the dots are linked sequentially as the data streams in, creating a "connect the dots" effect that highlights the temporal progression of the values. The chart renders with smooth transitions, emphasizing the flow of the data over time.

Aug 27, 2018
Loading thumbnail…

transition

This animated scatterplot cycles through barley yield data from six Minnesota sites across nine years, showing how the distribution shifts with each season. Circles represent individual variety-site combinations, colored by barley strain and positioned by site on the x-axis and yield on the y-axis. The visualization uses D3 v4’s `d3.csv` to load the data and `d3.transition()` with a 1.5-second interval to animate circle entry, exit, and radius changes. Data comes from the `barleyfull.csv` file, rendered as SVG circles with opacity.

Jul 28, 2018
Loading thumbnail…

path

This chart shows a multi-line comparison of daily average temperatures across three U.S. cities—New York, San Francisco, and Austin—over a period spanning late 2011 to early 2012. Each city is represented by a colored line plotted against a shared time axis, with the y-axis denoting temperature in degrees Fahrenheit. The data is loaded from a TSV file, and the visualization uses D3 v4 to render the SVG paths, making it easy to compare seasonal trends and temperature variations among the cities.

Jul 24, 2018
Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

Jul 24, 2018
Loading thumbnail…

d3

This example shows a multi-series line chart comparing daily average temperatures across three US cities—New York, San Francisco, and Austin—over a three-month period from October 2011 through January 2012. The data is loaded from a tab-separated values file using d3.tsv. Each city is encoded as a separate colored line, with the date on the x-axis and temperature in degrees Fahrenheit on the y-axis. The visualization uses d3 v4 with SVG rendering to draw axes, gridlines, and a legend, making seasonal trends and city-to-city differences readily apparent.

Jul 24, 2018