S

SebDelSab

@SebDelSab·21 public vizzes

Loading thumbnail…

fresh block

A simple bar chart displays sales figures per salesperson, using steel-blue bars with labeled x- and y-axes. The visualization loads data from a CSV file with d3.csv, formats the numeric sales column, and applies d3.scaleBand with padding for the categorical axis and d3.scaleLinear for the value axis. SVG rectangles are bound to the data via d3.selectAll and enter().append, while d3.axisBottom and d3.axisLeft render the axes. The chart is built with D3 v4 and rendered entirely as SVG, with margins handled through a group transform.

Loading thumbnail…

data_viz_projet

This interactive map of France displays train stations as pink dots over gray regions. Users can click a region to zoom in via a smooth transition, and hover over any station or region to see a tooltip with its name. The visualization uses D3 v4 with `d3.geoConicConformal` for projection, `d3.geoPath` for rendering GeoJSON shapes, and a quantize color scale for potential thematic mapping. Region and station data come from external GeoJSON sources, with SVG elements animated through D3 transitions.

Loading thumbnail…

Projet_DV

A choropleth map of the United States displays state boundaries and allows users to click any state to zoom and center the projection on it. The visualization is built with D3.js version 3, using `d3.geo.albersUsa` for the map projection and `d3.geo.path` to render the geographic features from a TopoJSON dataset. Clicking a state triggers a smooth animated transition via `g.transition()` with a 750ms duration, scaling and translating the entire group of paths to focus on the selected state, while clicking the background resets the view. The interaction uses D3's selection and classing methods to highlight the active state in orange.

Loading thumbnail…

TP_4

This choropleth map visualizes the cumulative number of influenza cases per French region for the week of November 11, 2014, using a green color scale to encode incidence rates. The map loads geographical boundaries from an external GeoJSON file, while case data from the CSV file is merged into the GeoJSON features based on matching region names. The visualization is built with D3 v4, using `d3.geoConicConformal` for the map projection, `d3.geoPath` to render regions, and `d3.scaleQuantize` for color classification. Hovering over a region displays a tooltip with its name and cumulative case count.

Loading thumbnail…

america

This example renders a choropleth-free map of the United States from GeoJSON state boundaries, using the Albers equal-area conic projection via `d3.geoAlbersUsa()` and tracing each state's outline with `d3.geoPath()`. The SVG canvas is populated by loading `us-states.json` and appending a `<path>` element per feature, whose coordinates are transformed by the projection. The code relies on D3 v4’s geo API and is forked from an existing block, with the data sourced from a gist.

Loading thumbnail…

TP_4

This example displays a single static line of text, "Edit the code below to change me!", centered within an SVG canvas. The visualization renders this message in a monospace font using D3 v4’s selection and attribute methods, such as `svg.append` and `attr` to set the text’s position and size. The code is a minimal template, often used as a starting point in Blockbuilder, with no interactive or data-driven features present. The SVG element is sized at 960 by 500 pixels.

Loading thumbnail…

TP_4

This example displays a static SVG canvas featuring a single text message, “Edit the code below to change me!,” rendered in monospace font. The visualization uses D3.js v4 to append the SVG element and the text node, with the `d3.select` API targeting the body and setting width and height attributes. The code imports the D3 library from a CDN and demonstrates basic SVG creation and text placement, serving as a minimal starter template for further modifications.

Loading thumbnail…

TP_4

This example displays a static text message, prompting users to edit the code to change its content. The visualization renders an SVG element using D3 v4, appending a single text node with monospace styling at a fixed position. The code calls `d3.select` to target the body, creates an SVG canvas, and uses `svg.append` with `attr` methods to position and style the text. No interactive or dynamic behaviors are demonstrated, as the output is purely the placeholder instruction. The data source is the hardcoded string within the script.

Loading thumbnail…

TP_4

This example displays the text “Edit the code below to change me!” in monospace font on a blank SVG canvas. It uses D3 v4 to select the page body, append an SVG element, and add a single text element with specified x, y, and font-size attributes. The visualization demonstrates basic SVG creation and text placement using d3.select and svg.append, with no data binding or interactive behavior.

Loading thumbnail…

[animated charts] stocks from dataset

This example cycles through five animated chart types—area, empty area, multiple, stacked, and stream—to compare monthly stock prices for Microsoft, Amazon, and IBM from 2000 onward. The data is loaded from a CSV file via `d3.dsvFormat` and nested by symbol using `d3.nest`. Each chart is rendered as an SVG path using `d3.area` with transitions controlled by `setTimeout`, while `d3.scaleOrdinal` assigns colors and `d3.scaleTime` maps dates. The sequence repeats automatically, highlighting shape and layout differences across chart forms.

Loading thumbnail…

rendu_TP3

This interactive visualization animates a multi-step transition from a line chart into a stacked area chart, using a stock-price dataset from a gist by mbostock. The code first renders individual lines, then reveals filled areas and rearranges them into a vertically stacked layout. Built with D3 v3, it uses `d3.time.scale`, `d3.scale.linear`, and `d3.layout.stack` to coordinate the motion, with SVG paths and grouped elements animated via `transition()` and `duration()`.

Loading thumbnail…

fresh block

This example shows monthly stock price trends for multiple companies from 2000 to 2010, with each symbol rendered as a separate colored line on a time-series chart. The visualization uses D3 v4’s `d3.line` with a basis curve, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by stock symbol. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders static SVG paths with axes. The legend code is commented out, and no animation is implemented.

Loading thumbnail…

loading multiple stock data from dataset (marche)

This example displays monthly stock price trends for multiple companies as a multi-line chart. The visualization loads CSV data containing symbols, dates, and prices, then nests the records by symbol to draw each stock’s price trajectory over time. The code uses d3.nest, d3.line, and d3.curveBasis to render smooth lines, with d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom/Left for ticks. A legend maps symbols to colors via d3.scaleOrdinal and d3.schemeCategory10, all rendered as SVG elements in D3 v4.

Loading thumbnail…

loading multiple stock data from dataset

This example displays multiple stock price time series as a set of overlaid line charts. It loads a CSV dataset containing monthly price data for Microsoft, Amazon, and IBM, then nests the data by stock symbol using `d3.nest()` to group the records. The visualization uses a D3 v4 SVG renderer with `d3.scaleTime()` and `d3.scaleLinear()` for the axes, and applies the `d3.curveBasis` interpolation to smooth the lines. The code attempts to color each line with `d3.schemeCategory10` and add a legend, though the active portion only renders the uncolored paths.

Loading thumbnail…

CM4

This example shows a minimal SVG scene containing a single text message, “Edit the code below to change me!”, rendered in monospace font at the center of a 960-by-500 canvas. The code uses d3.select to append an SVG element to the body, then appends a text node with fixed positioning and font styling. Built with d3.v4 and the blockbuilder.org template, it demonstrates the basic structure for creating and styling static SVG elements, with no data binding, interactions, or dynamic behavior beyond the initial render.

Loading thumbnail…

simple line chart from dataset

This example visualizes a simple time series with a line chart, plotting monthly values from a small JSON dataset between January and July 2016. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map dates and numeric values, while d3.line constructs the black stroked path. Each data point is marked by a semi-transparent grey circle that turns red on mouseover, triggering a dashed vertical guideline and a text label showing the exact value via d3.select and appended SVG elements. The chart also displays a permanent value label for the final data point at the right edge.

Loading thumbnail…

simple line chart from dataset

A simple line chart displays seven monthly data points from a small JSON dataset, showing the trend of values from January to July 2016. The chart uses D3 v4 APIs including `d3.timeParse` for date parsing, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. Circles mark each point; hovering highlights a point in red and adds a dashed vertical guide line with a value label. The SVG renders text labels for each month below the chart and the last value at the right edge.

Loading thumbnail…

simple line chart from dataset

A line chart displays monthly values from a small JSON dataset, with points connected by a black stroke and labeled with formatted dates. The chart uses a time-scaled x-axis and linear y-axis, with the final value annotated on the right. On mouseover, D3 v4 appends a dashed vertical reference line and a temporary text label showing the hovered point’s value. The SVG is rendered manually with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse`/`d3.timeFormat` for date processing.

Loading thumbnail…

simple bar chat updates

A simple bar chart displays ten labeled categories from a semicolon-delimited CSV dataset, with values periodically updated. The chart uses D3 v4 scales, entering text labels and rectangles into an SVG, then re-scaling the y-domain to the maximum value before applying a transition to the rectangle heights and positions. Rectangles are styled with black strokes and no fill, and the update cycle runs every 500 milliseconds using `setInterval`, demonstrating dynamic data binding and smooth transitions.

Loading thumbnail…

simple bar chat dataset

A simple bar chart visualizes a small dataset of eleven named values, loaded from a semicolon-delimited CSV file. The chart displays each category label as text above its corresponding rectangle, with bar heights proportional to the numeric values. The code uses D3 v4 to parse the data with `d3.dsvFormat`, creates linear scales with `d3.scaleLinear`, and appends both `text` and `rect` elements to an SVG. The axes and scales are set after the CSV loads, while the bars themselves are positioned using the value accessor and index-based x-coordinates.

Loading thumbnail…

fresh block with data binding

This example showcases a minimal data-binding demonstration using D3.js v4. It renders a single line of text, "Edit the text !", into an SVG canvas by mapping each character of the string to a separate text element. The code leverages D3's `select`, `data`, and `enter` operations to append SVG text nodes with calculated vertical and horizontal offsets based on their index. The visualization's entire behavior relies on D3's selection and data-joining API, without any external data source, to illustrate fundamental binding mechanics.