Skip to main content
Log in
E

EnzoTheBrown

@EnzoTheBrown·9 public vizzes

Loading thumbnail…

fresh block

A choropleth map of French administrative regions displays influenza case counts across 52 weeks of 2014, with an interactive slider that lets viewers select a week. The visualization uses D3 v4’s `d3.geoConicConformal` projection and `d3.geoPath` to render GeoJSON region boundaries, while a `d3.scaleQuantize` color scale encodes the total flu cases per region. Data comes from the CSV file `GrippeFrance2014.csv` and is merged with region shapes in `regions.json`. The slider triggers a map update that recalculates each region’s fill color based on weekly totals.

Dec 10, 2017
Loading thumbnail…

tp2 dataviz

This example animates a multi-series line chart, plotting monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each series as a dark, interpolated path in its own small multiples panel, highlighting the latest point with a colored circle. The animation then transitions each panel into a horizon chart, layering three clipped, stacked area fills to show the same data with greater vertical resolution. The code uses d3.svg.line and d3.svg.area generators, d3.time.scale for dates, and d3.select transitions to orchestrate the sequential reveal of lines and horizons.

Nov 27, 2017
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of monthly values, displaying the trend over time with labeled points and a final value annotation. Built with D3 v4, it uses SVG for rendering and includes interactive hover effects that highlight individual data points with circles, reveal their values, and show dashed guide lines. The data comes from a local JSON file, and scales like `d3.scaleTime()` and `d3.scaleLinear()` handle positioning, while `d3.line()` draws the path.

Nov 14, 2017
Loading thumbnail…

simple animated bar chat dataset

A simple bar chart built with D3 v4 reads a semicolon-delimited CSV file from the local gist, parsing it with `d3.dsvFormat(';')` and `dsv.parse(raw)`. The SVG rendering creates a 960-by-500 canvas and uses `d3.scaleLinear` for both the x- and y-axes, with the y-domain computed from the maximum value in the dataset. Ten labeled bars (A through J) are positioned using the x-scale, though the chart currently lacks displayed rectangles and only renders the category names as text. The data source is a small `dataset.csv` included with the block.

Nov 9, 2017
Loading thumbnail…

simple bar chat dataset

This example shows a set of categorical bars colored black and white, with each bar labeled by a letter from A to J. It uses D3 v4 to load semicolon-delimited data from a CSV file via `d3.dsvFormat` and `d3.text`, then renders the chart as SVG rectangles and text elements. The x and y scales are created with `d3.scaleLinear`, with domains set after the data is parsed. The chart itself does not display bars; it only shows the text labels positioned along the x-axis, as the code appends text elements but no rect elements.

Nov 9, 2017
Loading thumbnail…

simple bar chat dataset

This example shows a set of categorical bars colored black and white, with each bar labeled by a letter from A to J. It uses D3 v4 to load semicolon-delimited data from a CSV file via `d3.dsvFormat` and `d3.text`, then renders the chart as SVG rectangles and text elements. The x and y scales are created with `d3.scaleLinear`, with domains set after the data is parsed. The chart itself does not display bars; it only shows the text labels positioned along the x-axis, as the code appends text elements but no rect elements.

Nov 9, 2017
Loading thumbnail…

simple line chart without dataset

This example displays a simple line chart built without an external dataset, using a hardcoded array of ten numeric values. The visualization renders both the data points as text labels and corresponding bars via SVG rectangles, all generated by D3 v4. The code uses `d3.scaleLinear` for both x and y axes, with the y-scale mapping the maximum data value to a height of 100 pixels. A group element translates the entire chart 100 pixels to the right, and the bars are positioned based on index and value.

Nov 9, 2017
Loading thumbnail…

simple line chart without dataset

This example shows a simple line chart that uses vertical bars to represent a static dataset of ten numeric values, with the values labeled above each bar. The visualization is rendered as an SVG inside an HTML page, using D3.js v4 to bind the data array to rectangle elements and scale the bar heights proportionally to the maximum value in the dataset. The code defines linear scales for the x- and y-axes, then appends the bars and text labels to a translated group element, with a fixed width for each bar derived from the data length.

Nov 9, 2017
Loading thumbnail…

[basic chart] line chart (d3 v4)

This example shows a multi-line chart with four time-series categories (a, b, c, d) plotted over dates in early 2016, using D3 v4’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. It renders SVG paths via `d3.line` and `d3.axisBottom`/`d3.axisLeft` for axes, with colors from `d3.scaleOrdinal(d3.schemeCategory10)`. The data is hardcoded as an array of objects, and the chart is drawn inside a 960×300 SVG with margins. No interactivity is included.

Dec 3, 2016