Skip to main content
SimilarExport ZIP
100%

Make a house

✓ Published0🌍 Public
KKarin Meersman
Last edited Dec 4, 2020
Created on Dec 4, 2020
Forked from Make a face

This example uses D3 v5 to draw a green garden square and plot a blue line graph on top of it. The line represents a small dataset of x/y coordinates, processed through a line interpolator to create a smooth path. The garden rect provides a context, but the primary focus is demonstrating how to create a simple geometric line chart using D3’s path generation and SVG rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

House / d3

A static SVG scene depicts a stylized house with a red roof, a yellow sun, a green lawn, and a white door, all composed of basic geometric shapes. The code uses d3.v4 to render the graphic, explicitly drawing each element with `<rect>`, `<circle>`, and `<path>` tags. Two rotated rectangles form the door, while a transparent path outlines the ground. The visualization relies on hard-coded coordinates and SVG styling, with no data or interaction.

CCharisma9
74% match
Loading thumbnail…

SVG House

This example draws a simple house composed entirely of SVG shapes. A hot pink roof, a rectangular body, a door, and a window are assembled using `d3` selections with `<path>`, `<rect>`, `<circle>`, and `<line>` elements. The door is semi-transparent, and the window includes a cross pattern. The code renders these shapes directly in an `index.html` file, using D3 v4 to create the SVG structure against a light gray background.

DDDDDDanica
71% match
Loading thumbnail…

My Home

This example draws a night-time scene of a house with a roof, door, windows, streetlight, and bushes, rendered as SVG shapes. It demonstrates fundamental DOM manipulation with D3.js by appending rectangles, circles, lines, and paths to a pre-selected SVG element. The code uses d3.select and .attr methods to position and style elements, and creates a reusable window-building function to simplify repeated structure. The scene is composed entirely with hard-coded coordinates and scale factors, with no external data source.

SSai Krishna Doultabad
71% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a colorful landscape scene with a house, sun, clouds, palm trees, and fence rendered as SVG shapes using D3 v7. The code demonstrates basic selection and append operations via `d3.select`, along with data binding through `d3.line()` and `curveBasisClosed` to draw the cloud path. Each element, from the house's rects and polygons to the tree trunks and fronds represented as lines, is positioned with explicit coordinates and filled with named colors. The visualization shows how D3 can be used for static, non-data-driven illustrations.

Hharichandanamone21@gmail.com
70% match
Loading thumbnail…

nature scene

This example shows a simple nature scene built with D3.js, depicting a house, trees, clouds, sun, and a fence in an SVG canvas. The code uses D3’s selection and append methods to create each shape, including rectangles for the house and door, polygons for the roof, lines for palm tree trunks and fronds, and a path with d3.curveBasisClosed for the cloud silhouette. A circle represents the sun, while a long rectangle forms the fence. The visualization renders entirely with SVG elements, using hardcoded coordinates and colors to assemble the static scene.

Ssaisathyapriya097@gmail.com
70% match
Loading thumbnail…

How to create a line chart using D3

This example demonstrates how to build a line chart with D3 v6, rendering an SVG with a pink background. It plots two lines: one from a dataset of coordinate pairs using `d3.line()` with `curveMonotoneX`, and a second hardcoded line, alongside red circles for the data points. The chart includes axes created with `d3.axisBottom` and `d3.axisLeft`, a title, and axis labels, with styling applied via CSS classes for stroke and fill.

Hhanulik.ondrej@gmail.com
70% match
Loading thumbnail…

Let's make a line chart with D3.js!

This example demonstrates how to build a line chart using D3.js v5, rendering the visualization as an SVG element within an HTML page. The code initializes an SVG canvas and prepares to map data to x and y coordinates, though the specific data array and line generator are not visible in the provided snippet. The example relies on the core D3 library for DOM manipulation and SVG creation, with the chart’s appearance styled through an external stylesheet. The rendering approach uses standard SVG paths, making it suitable for static or animated line-based data representations.

Ssoniyaa-dv
69% match
Loading thumbnail…

Fork of Let's make a face with D3.js and a house.

A static SVG scene depicts a pond with ducks, lily pads, a sun, clouds, a tree, and a house with a gate. Built using D3.js v5, the code demonstrates fundamental DOM manipulation by chaining `select` and `append` calls to construct the entire illustration. Each element, from the light-blue water rectangle to the yellow sun circle, is positioned with explicit `attr` values for coordinates and dimensions. The example is based entirely on hand-coded data and does not involve data joins, scales, or interactive behavior, serving as a simple introduction to creating SVG graphics programmatically.

Yynagurvali786@gmail.com
69% match